JavaScript 贪吃蛇游戏如何实现吃苹果后生长3格而非1格

原逻辑说明 #

原代码的长度控制逻辑为：每次移动时向蛇头插入1个新块，如果没吃到苹果就删除蛇尾1块，总长度保持不变；如果吃到苹果就不删除蛇尾，总长度+1，因此每次吃苹果仅生长1格。

修改步骤 #

我们通过新增待生长计数的方式实现连续生长3格，该方案不会出现方块重叠、生长瞬移的问题，兼容性最好：

1. 首先修改Snake构造函数，新增待生长计数属性：

var Snake = function() {
  this.segments = [
    new Block(5, 5),
    new Block(5, 5),
    new Block(5, 5)
  ];

  this.direction = "right";
  this.nextDirection = "right";
  this.growPending = 0; // 新增：记录还需要生长的格数
};

2. 替换Snake.prototype.move方法里的碰撞后生长逻辑，修改后完整代码如下：

Snake.prototype.move = function() {
  var head = this.segments[0];
  var newHead;
  this.direction = this.nextDirection;
  if (this.direction === "right") {
    newHead = new Block(head.col + 1, head.row);
  } else if (this.direction === "down") {
    newHead = new Block(head.col, head.row + 1);
  } else if (this.direction === "left") {
    newHead = new Block(head.col - 1, head.row);
  } else if (this.direction === "up") {
    newHead = new Block(head.col, head.row - 1);
  }
  if (this.checkCollision(newHead)) {
    gameOver();
    return;
  }

  this.segments.unshift(newHead);

  if (newHead.equal(apple.position)) {
    score += 3; // 可选：分数对应增加3，不需要可以保留原score++
    this.growPending += 2; // 本次已经生长1格，再补充2次待生长就总共3格
    apple.move();
  } else {
    // 有待生长额度就消耗额度不删尾巴，否则删除蛇尾保持长度
    if (this.growPending > 0) {
      this.growPending--;
    } else {
      this.segments.pop();
    }
  }
};

灵活调整说明 #

如果后续需要修改每次生长的格数，只需要调整this.growPending += 2里的数值即可：要生长N格就填写N-1，比如要生长5格就改成this.growPending +=4。

内容的提问来源于stack exchange，提问作者Questioner