增加蛇的大小

Question

我已经写过这个简单的蛇游戏 - 你用箭头导航蛇吃苹果（红色圆圈）。现在在我的代码中当蛇吃（交叉）苹果时它的（蛇）大小增加1块（10px）。我想做的是：每次蛇吃苹果 - ＆gt;增加蛇的大小 - ＆gt;将苹果移动到画布内的不同位置。

在代码中我标记了我认为移动苹果的代码应该去的部分，但我不知道如何实现以及实际的代码是什么：

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);

免责声明：效率不高。由于碰撞的可能性，蛇的长度会增加，因此会滞后。

javascript蛇游戏 - 如何移动苹果？

1 个答案:

增加蛇的大小

在苹果周围移动