厉害！84 行 JavaScript 代码实现塔式堆叠游戏

作者 | 李雪敬

出品 | 程序人生（coder_life）

塔式堆叠小游戏游戏玩法

想必大家对这个小游戏都挺熟悉的。这个游戏的重点是把尽可能多的盒子叠在一起。当你点击屏幕时，位于上方正在移动的盒子会往下掉，如果想要上面移动的盒子正好落在下面盒子上，就需要在合适的时机点击屏幕。如果你没在两个盒子完美对齐的时候点击，盒子突出的部分就会被切割掉下来（“碎片”），下一个盒子的落地空间就更小了，比前一个更难弹跳。

游戏代码

let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
context.font = 'bold 30px sans-serif';
let scrollCounter, cameraY, current, mode, xSpeed;
let ySpeed = 5;
let height = 50;
let boxes = [];
boxes[0] = {
  x: 300,
  y: 300,
  width: 200
};
let debris = {
  x: 0,
  width: 0
};

function newBox() {
  boxes[current] = {
    x: 0,
    y: (current + 10) * height,
    width: boxes[current - 1].width
  };
}

function gameOver() {
  mode = 'gameOver';
  context.fillText('Game over. Click to play again!', 50, 50);
}

function animate() {
  if (mode != 'gameOver') {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillText('Score: ' + (current - 1).toString(), 100, 200);
    for (let n = 0; n  0 && boxes[current].x + boxes[current].width > canvas.width)
        xSpeed = -xSpeed;
      if (xSpeed  boxes[current - 1].x) {
          boxes[current].width = boxes[current].width - difference;
          debris.x = boxes[current].x + boxes[current].width;
        } else {
          debris.x = boxes[current].x - difference;
          boxes[current].width = boxes[current].width + difference;
          boxes[current].x = boxes[current - 1].x;
        }
        if (xSpeed > 0)
          xSpeed++;
        else
          xSpeed--;
        current++;
        scrollCounter = height;
        newBox();
      }
    }
    debris.y = debris.y - ySpeed;
    if (scrollCounter) {
      cameraY++;
      scrollCounter--;
    }
  }
  window.requestAnimationFrame(animate);
}

function restart() {
  boxes.splice(1, boxes.length - 1);
  mode = 'bounce';
  cameraY = 0;
  scrollCounter = 0;
  xSpeed = 2;
  current = 1;
  newBox();
  debris.y = 0;
}

canvas.onpointerdown = function() {
  if (mode == 'gameOver')
    restart();
  else {
    if (mode == 'bounce')
      mode = 'fall';
  }
};

restart();
animate();

参考链接：https://slicker.me/javascript/tower.htm

#欢迎来留言#

留言点赞数量最多的前两名

程序人生携手【北京大学出版社】送出

《从零开始读懂量子力学》一本

截至9月18日14:00点