Sign in to follow this  

Collision detection not working, and I'm not sure why

Recommended Posts


For simplicity I have a game and I'm trying to get my car to hit a wall. I've tried searching and I've tried several things as you'll see below, I'm not sure why I can't get it to work.

Here is the code in my create function:

        create: function () {
            this.carSprite = game.add.sprite(,, 'car');
        this.timer =,
            this.addRoad, this);

Then in my update function:

        update: function () {
            game.physics.arcade.overlap(this.carSprite, this.wallSprite, this.scoring, null, this);

I am creating the wallSprite like this:

     addOneRoadSection: function (x, y) {
    this.scoreCalculator += 1;
            if (this.scoreCalculator == 10) {
                this.scoreCalculator = 0;
                this.wallSprite = game.add.sprite(x + 100, y, 'wall');
                this.wallAnimation = this.wallSprite .animations.add('wallAnimation');
      'wallAnimation', 30, true);
                this.wallSprite.body.velocity.y = 100;
                this.wallSprite.checkWorldBounds = true;
                this.wallSprite.outOfBoundsKill = true;

I am calling addOneRoadSection like this:

        addRoad: function () {
            this.addOneRoadSection(this.xValue, 0);

addRoad is being called in create using this.timer` 

So in summary what this is doing is that when the scoreCalculator is ten, it add's a wall. That works fine, the wall is animated fine, but the collision detection does not work at all.

I tried moving the code inside of the if statement to my create function and it works fine with collision detection (but other things break so I can't keep it there). What am I doing wrong? I have a suspicion that this.wallSprite may be referring to something else at the time it is called in update?



Share this post

Link to post
Share on other sites

So I figured this out. What was happening was that my initial inclination of me of me creating a new sprite and that over writing the other one was right.

Here is how I solved the issue:

in `create`:

    create: function(){ 
     //Create a wallSprite array
     var wallSprite = [];

Now that I have an array when I add a new `wallSprite` in `addOneRoadSection` I can add the physics to each sprite like this:


       addOneRoadSection: function (x, y) {
                this.wallSprite.push(game.add.sprite(x + 100, y, 'wall'));
                game.physics.arcade.enable(this.wallSprite[this.wallSprite.length -1]);
                this.wallAnimation = this.wallSprite[this.wallSprite.length - 1].animations.add('wallAnimation');
                this.wallSprite[this.wallSprite.length - 1]'wallAnimation', 30, true);
                this.wallSprite[this.wallSprite.length -1].body.velocity.y = 100;
                this.wallSprite[this.wallSprite.length - 1].checkWorldBounds = true;
                this.wallSprite[this.wallSprite.length -1].outOfBoundsKill = true;

Finally in `update` I just need to do this:

        for (var i = 0; i < this.wallSprite.length; i++) {
            game.physics.arcade.overlap(, this.wallSprite, this.scoring, null, this);

Voila - collision detection works for every sprite now. 

Share this post

Link to post
Share on other sites

I'm glad you solved this! You can also use a group instead of an Array. That will give you utility methods like getFirstAlive, which you can use for object pooling, which is something I think you'll need as you create lots of walls.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.