4

I am working on a game in Javascript in which I have a player try to collect coins. Both are currently rects() with different dimensions, and I am trying to incorporate a function that alerts the user when they have gotten a coin. Currently, this is my code for my player & coin collision detection.

isTouching(player) {

        return player.x + player.width > this.x &&
               this.x + this.width > player.x &&
               player.y + player.height > this.y &&
               this.y + this.height > player.y;

    }

However, when I loop through my coins array and check for collisions, nothing happens. Why is this? Here is my code pertaining to this:

for (let x = 0; x < 5; x ++) { coins[x].collisions(); }

and...

collisions() {

        if (this.isTouching(player)) {

            alert("you got a coin!");

        }

    }

Both my coins and player have their own class, with my coins being stored in an array.

let player;
let coins = [];
player =    new Player();
for (let x = 0; x < 5; x ++) { coins.push(new Coin()); }

Even when the player touches the coin, there is no alert. How can I fix this?

P.S. I know there are many libraries capable of checking for collisions between rectangles, but I wanted to utilize my own function to check for collisions. Please let me know how/if I need to change my collision detection system.

Also, if my provided code is unclear, here is a .zip (download linked) containing my program code: https://www.mediafire.com/file/00rz1ta5s55rvzf/game.zip/file

EDIT: A comment suggested I use a library to check for collisions, which I'm technically not allowed to do, but for the sake of testing, I tried it. I imported bmoren's p5.collide2D library which worked for me in the past, and used this code (below). However, the issue still remains, and the collisions between objects is not detected at all.

New code utilizing library:

if (this.touched()) {
        
     alert("you got a coin!");
        
}
        
touched() {
        
     return collideRectRect(this.x, this.y, this.width, this.height, player.x, player.y, player.width, player.height);
        
}
Bubbly
  • 301
  • 3
  • 11
  • One of the top rule in programming : Don't re-invent the wheel. If there is a library our there that suits your needs use it. If you're using this as a learning experience, fair enough. To save us wading through all of your code that is elsewhere, consider providing a [MCVE] here that demonstrates the problem – Jon P Apr 30 '21 at 02:19
  • Sorry, this is for a project in which I am trying to cut down on the use of libraries, meaning I'm required to code my own functions. Nonetheless, I tried to use a library that worked for me before in a previous project (bmoren's p5collide2d), but that did not work either. I've edited my original post and included my new code. – Bubbly Apr 30 '21 at 02:39

1 Answers1

4

Just read all of your code. I was able to get the coin alert working, here's what you need to change

in game.engine.js, change the function setup. Here I have updated your loop, problem is your random x and y of coins need to be passed to your coin class instance.

function setup() {

  // Apply classes to empty variables
  console.log("Creating player...");
  player =    new Player();

  console.log("Creating world...");
  world  =    new World();

  console.log("Creating coins...");
  for (let i = 0; i < number_of_coins; i++) { coins.push(new Coin(coin_cords_X[i], coin_cords_Y[i])); }

  console.log("Creating controller...");
  controller = new Controller();

  // Draw canvas with set size
  console.log("Creating game screen...");
  createCanvas(1250, 750);

}

Now, your game.coin.js, needs to take the passed x and y in the constructor and use it instead.

class Coin {

    // Setup player attributes
    x;
    y;
    width;
    height;

    constructor(x, y) {

        this.x = x;
        this.y = y;
        this.width = 30;
        this.height = 30;

    }

    show(x) {
        fill(player.color);

        rect(this.x, this.y, this.width, this.height);

    }

  // rest of the methods will be as is
}

Having done both of these things, it should work fine.

I am attaching the modified program zip. https://www.mediafire.com/file/4krl9e0trdxlcx3/game.zip/file

Anshul Rasiwasia
  • 237
  • 1
  • 5