JavaScript蛇游戲-如何移動蘋果？

Question

我已經編寫了這個簡單的蛇游戲-在該游戲中，您使用箭頭導航蛇吃蘋果（紅色圓圈）。 現在在我的代碼中，當蛇吃（相交）蘋果時，其（蛇）的大小增加1塊（10像素）。 我想做的是：每次蛇吃掉蘋果->增加蛇的大小->將蘋果移到畫布中的不同位置。

在代碼內部，我已經標記了我認為移動蘋果的代碼應該去的那部分，但是我不知道如何實現以及該代碼的實際代碼是什么：

if (!this.objectCollide(myApple)){
      this.segments.pop();
    } else {
      alert("COLLISION!!"))
    }; 

這是完整的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 {
    alert("COLLISION!!!")
  };
  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);
  };
};

在JSFiddle上的示例： https ://jsfiddle.net/x9ztn3vs/

Answer 1

而不是使用alert("COLLISION!!!"); 只需做以下兩件事：

增加蛇的大小

只需在數組的最后添加另一個元素：

this.segments.push(this.segments[this.segments.length-1]);

在蘋果周圍走動

do {
    myApple.x = Math.floor(Math.random() * gameField.width);
    myApple.y = Math.floor(Math.random() * gameField.height);
    var colliding = this.segments.find((v) => v.x == Math.round(myApple.x / blockSize) && v.y == Math.round(myApple.y / blockSize));    
} while (colliding);

免責聲明：效率不高。 它會滯后於蛇的長度，因為發生碰撞的可能性會增加。