JavaScript - 将对象移动到新位置

Question

我正在编写简单的“贪吃蛇”游戏，但遇到了这个问题: 每次驯服我的蛇都会碰到红色圆圈(苹果)，苹果应该被移动到 Canvas 上的新位置。现在新的苹果出现了，但旧的苹果并没有消失(它应该)，而且当 Canvas 上有超过 2 个苹果时，它们会创建一个填充图形......它看起来像这样:ibb.co/nrYdLQ(也不应该发生)。

负责移动苹果的代码是这样的:

if (!this.objectCollide(myApple)) {
    this.segments.pop();
  } else {
    myApple = new block(Math.floor(Math.random() * gameField.width),Math.floor(Math.random() * gameField.height))
  };

我不知道为什么它会像我上面描述的那样工作，而不是只是将一个苹果移动到一个新位置并移除旧的。 请帮忙。

JSFiddle:https://jsfiddle.net/e1ga0fpm/

完整的 JavaScript 代码:

var gameField = document.getElementById('gameField');
var ctx = gameField.getContext("2d");
var blockSize = 10;
columnCt = gameField.width / blockSize;
rowsCt = gameField.height / blockSize;

var block = function(x, y) {
  this.x = x;
  this.y = y;
}

block.prototype.drawBlock = function() {
  ctx.fillStyle = "blue";
  ctx.fillRect(this.x * blockSize, this.y * blockSize, blockSize,
    blockSize);
};

block.prototype.drawApple = function() {
  ctx.fillStyle = "red";
  ctx.textBaseline = "bottom";
  ctx.arc(this.x, this.y, 6, 2 * Math.PI, false);
  ctx.fill();
}

var Snake = function() {
  this.segments = [new block(20, 20), new block(19, 20), new block(18, 20), new block(17, 20),
    new block(16, 20), new block(15, 20), new block(14, 20), new block(13, 20), new block(12, 20),
    new block(11, 20), new block(10, 20)
  ];
  this.direction = "right";
}

Snake.prototype.drawSnake = function() {
  for (i = 0; i < this.segments.length; i++) {
    this.segments[i].drawBlock();
  }
}

Snake.prototype.setDirection = function(dir) {
  if (this.direction == "left" && dir == "right" || this.direction == "right" && dir == "left" || this.direction == "up" && dir == "down" ||
    this.direction == "down" && dir == "up") {
    return
  } else {
    this.direction = dir;
  };
};

Snake.prototype.objectCollide = function(obj) {
  if (this.segments[0].x == Math.round(obj.x / blockSize) && this.segments[0].y == Math.round(obj.y / blockSize)) {
    return true
  } else {
    return false
  }
};

Snake.prototype.move = function() {
  var head = this.segments[0];
  var newHead;

  switch (this.direction) {
    case "right":
      newHead = new block(head.x + 1, head.y);
      break;
    case "left":
      newHead = new block(head.x - 1, head.y)
      break;
    case "down":
      newHead = new block(head.x, head.y + 1)
      break;
    case "up":
      newHead = new block(head.x, head.y - 1)
      break;
  }

  this.segments.unshift(newHead);

  if (!this.objectCollide(myApple)) {
    this.segments.pop();
  } else {
    myApple = new block(Math.floor(Math.random() * gameField.width),Math.floor(Math.random() * gameField.height))
  };
  var collision = newHead.x >= columnCt || newHead.x <= -1 ||
    newHead.y >= rowsCt || newHead.y <= -1;

  for (i = 1; i < this.segments.length; i++) {
    if (this.segments[i].x == newHead.x && this.segments[i].y == newHead.y) {
      collision = true;
      break;
    };
  };

  if (collision) {
    clearInterval(myFun);
  };

};

var mySnake = new Snake()
mySnake.drawSnake();
var myApple = new block(Math.floor(Math.random() * gameField.width),
  Math.floor(Math.random() * gameField.height));
var myFun = setInterval(function() {
  ctx.clearRect(0, 0, gameField.width, gameField.height);
  mySnake.move();
  mySnake.drawSnake();
  myApple.drawApple();
}, 100)

var directions = {
  37: "left",
  38: "up",
  39: "right",
  40: "down"
};

document.onkeydown = function(event) {
  var newDirection = directions[event.keyCode]
  if (newDirection != undefined) {
    mySnake.setDirection(newDirection);
  };

Answer 1

我不太确定为什么苹果没有被“吃掉”，但是我可能知道为什么它看起来很奇怪。

如果您在 Canvas 上绘图，它看起来就像一支笔。所以每当你画一个新的苹果时，笔就会移动到那个位置，然后画一条线。几个苹果之后，如果你调用 .fill()，这条(还不可见的)线就会被填满。所以画之前需要动笔:

block.prototype.drawApple = function() {
  ctx.fillStyle = "red";
  ctx.textBaseline = "bottom";
  ctx.moveTo(this.x,this.y);
  ctx.arc(this.x, this.y, 6, 2 * Math.PI, false);
  ctx.fill();
 }