CODEWITHSUNDEEP
javascriptoopcanvas
Michael Alexander
Michael Alexander

Reputation: 480

How to prevent two canvas objects from appearing in the same location

I am building a Snake arcade game, and though the game is up and working well I am attempting to tweak the game so that the apple will never appear in the same location as one of the snake segments (for those who don't know Snake, it is a classic arcade game in which a snake slithers around the screen eating apples that randomly appear, trying to avoid running into itself or the wall and growing in length each time it eats an apple). Here is the code below that moves the apple around the screen:

Apple.prototype.move = function() {
  var randomCol = Math.floor(Math.random()*(widthInBlocks-2)) +1;
  var randomRow = Math.floor(Math.random()*(heightInBlocks-2)) +1;

  this.position = new Block(randomCol, randomRow);

  for (i = 0; i < Snake.segments; i++) {
    if (this.position === Snake.segments[i].col && Snake.segments[i].row) {
      this.move();
    };
  };
}

The constructor for the snake is as follows:

var Snake = function() {
  this.segments = [
    new Block(7, 5),
    new Block(6, 5),
    new Block(5, 5)
  ];
  this.direction = "right";
  this.nextDirection = "right";
};

And the code to draw the snake is as follows:

//function to toggle the colour of the snake's segments
function alternateColour(i) {
  var colours = ["limegreen", "yellow"];
  if (i % 2 === 0) {
    return colours[0];
  } else {
    return colours[1];
  };
};

//draw snake method
Snake.prototype.draw = function() {
  this.segments[0].drawSquare("blue"); //snake head will always be blue
  for (i = 1; i < this.segments.length; i++) {
      this.segments[i].drawSquare(alternateColour(i));
  };
};

To me this all looks right, but I am still a big newbie and still new to OOP. I am not sure if I have propertly written the Apple.prototype.move method so that it will never place the apple in the location of a segment of the snake's body. The probability of it happening is low, so in order to know for sure I would have to sit and play the game for hours potentially. Any input would be greatly appreciated.

Note: the game play area is divided into a grid system of rows and columns made up of 10x10 pixel areas using the following code:

var blockSize = 10;
var widthInBlocks = width/blockSize;
var heightInBlocks = height/blockSize;

Thank you.

Upvotes: 2

Views: 121

Answers (1)

fubar
fubar

Reputation: 17398

It looks like you have a mistake in your Apple.prototype.move function when checking whether the apple position clashes with a snake segment.

You're calculating the apple position (randomCol, randomRow), but then not using these values when checking against each snake segment.

Also, you call this.move() when you expect to encounter a clash. But after that function has returned, you will continue to finish any remaining iterations in the previous for loop.

These issues can be resolved with the following changes:

for (i = 0; i < Snake.segments; i++) {
    if (randomCol === Snake.segments[i].col && randomRow === Snake.segments[i].row) {
        return this.move();
    };
};

Upvotes: 1

Related Questions