Question

对于某些练习，我决定做一个蛇游戏。但是有一个问题：如果你吃了一个水果，它就不会在蛇身上添加一个身体部位！（l 41以及更多）我有一个画布所以不要担心这个和我将在以后优化我的代码。我知道还有其他方法可以做到，但我这样做了，我需要你的帮助来解决这个问题。因此，当你吃水果时，它应该添加一个身体部分，但它会收缩一个并添加一个，所以它保持不变。（第一次出现，然后加一个！）我不知道为什么它第一次工作而不是其他时间。如果你想测试，复制代码并添加这个HTML行:(使用html标签!!!）

＆＃13;

var ctx = document.getElementById("ctx").getContext("2d"); //get the canvas
var WIDTH = 600;
var HEIGHT = 600;
var framecount = 0;
var fruitList = {};
var bodyparts = {};
var bodyparts2 = {};
var score = 0;
var bodyLenght = 1;
var bodyLenght2 = 0;
ctx.font = '30px Arial';
var head = { //head of snake
  x: 300,
  y: 300,
  spdX: 10,
  spdY: 5,
  color: 'blue',
  width: 20,
  lastX: 0,
  lastY: 0,
};
var body1 = {
  x: 300,
  y: 320,
  color: 'blue',
  width: 20,
  lastX: null,
  lastY: null,
}
var tail = {
  x: 300,
  y: 340,
  color: 'blue',
  width: 20,
  lastX: null,
  lastY: null,

}
bodyparts[1] = body1;
bodyparts2[1] = tail;
Body = function() { // snake's body
  var body = {
    x: null,
    y: null,
    id: bodyLenght,
    color: 'blue',
    width: 20,
    lastX: null,
    lastY: null,
  };
  bodyparts[bodyLenght] = body;
  bodyparts2[bodyLenght2] = body;
}
Fruit = function(id, x, y, color) { // fruits 
  var fruit = {
    x: x,
    y: y,
    id: id,
    color: 'orange',
    width: 20,
  };
  fruitList[id] = fruit;
}
setbodyPos = function(id1, id2) {
  id1.lastX = id1.x;
  id2.x = id1.lastX;
  id1.lastY = id1.y;
  id2.y = id1.lastY;
}
randomFruit = function() { // random coordinates for fruit
  var x = Math.random() * (WIDTH - 20);
  var y = Math.random() * (HEIGHT - 20);
  var id = Math.random;
  Fruit(id, x, y);
}
testCollisionRectRect = function(rect1, rect2) {
  return rect1.x <= rect2.x + rect2.width && rect2.x <= rect1.x + rect1.width && rect1.y <= rect2.y + rect2.width && rect2.y <= rect1.y + rect1.width;
}
updatePosition = function() {
  document.onkeydown = function(event) { //check if key is pressed
    if (event.keyCode === 68) //d
      head.pressingRight = true;
    else if (event.keyCode === 83) //s
      head.pressingDown = true;
    else if (event.keyCode === 81) //q
      head.pressingLeft = true;
    else if (event.keyCode === 90) // z
      head.pressingUp = true;
  }
  if (head.pressingRight) { //move head
    setbodyPos(bodyparts[bodyLenght], tail);
    for (var key in bodyparts) {
      for (var key2 in bodyparts2) {
        setbodyPos(bodyparts[key], bodyparts2[key2])
      }
    }
    setbodyPos(head, body1);
    head.x += head.width;
  }
  if (head.pressingLeft) {
    setbodyPos(bodyparts[bodyLenght], tail);
    for (var key in bodyparts) {
      for (var key2 in bodyparts2) {
        setbodyPos(bodyparts[key], bodyparts2[key2])
      }
    }
    setbodyPos(head, body1);
    head.x -= head.width;
  }
  if (head.pressingDown) {
    setbodyPos(bodyparts[bodyLenght], tail);
    for (var key in bodyparts) {
      for (var key2 in bodyparts2) {
        setbodyPos(bodyparts[key], bodyparts2[key2])
      }
    }
    setbodyPos(head, body1);
    head.y += head.width;
  }
  if (head.pressingUp) {
    setbodyPos(bodyparts[bodyLenght], tail);
    for (var key in bodyparts) {
      for (var key2 in bodyparts2) {
        setbodyPos(bodyparts[key], bodyparts2[key2])
      }
    }
    setbodyPos(head, body1);
    head.y -= head.width;
  }
  if (head.x > (WIDTH - head.width)) { // checks if it is a valid position
    head.x = WIDTH - head.width;
  };
  if (head.x < 0) {
    head.x = 0;
  };
  if (head.y > (HEIGHT - head.width)) {
    head.y = HEIGHT - head.width;
  };
  if (head.y < 0) {
    head.y = 0;
  };

  head.pressingDown = false; // no key is pressed
  head.pressingUp = false;
  head.pressingLeft = false;
  head.pressingRight = false;
}

drawEntity = function(id) { // draw rectangle in canvas
  ctx.save;
  ctx.fillStyle = id.color;
  ctx.fillRect(id.x, id.y, id.width, id.width);
  ctx.restore;
}

update = function() { //update canvas
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  framecount++;
  if (framecount % 125 === 0) { // 5 sec
    randomFruit();
  }
  for (var key in fruitList) {
    drawEntity(fruitList[key]);
    if (testCollisionRectRect(head, fruitList[key]) === true) {
      delete fruitList[key];
      bodyLenght++;
      bodyLenght2++;
      Body();
      score++;
      tail.x = tail.lastX;
      tail.y = tail.lastY;
    };
  }
  updatePosition();
  drawEntity(head);
  drawEntity(tail);
  for (var key in bodyparts) {
    drawEntity(bodyparts[key]);
  }
  ctx.fillStyle = 'black';
  ctx.fillText('Score:' + score, 0, 30)
}

setInterval(update, 40);

＆＃13;

<canvas id="ctx" width="600" height="600" style="border:1px solid #000000;"></canvas>

＆＃13;

Answer 1

这里有很多事情要发生，所以让我指出一个我多年前为了学习javascript而写的游戏：

https://github.com/david0178418/Snake

另外，在我完成这项工作后，我的同事要求我把它变成一种蠕虫病毒＆＃34;游戏。挑战被接受了：

https://github.com/david0178418/Worm

这是非常古老的代码（当我还是初级/中级开发人员和整个js noob时），但希望你能从中收集答案。

蛇身体渲染（身体不跟随头部）

1 个答案: