84行纯JavaScript代码的俄罗斯方块掉落堆叠游戏

<html>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
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 < boxes.length; n++) {
      let box = boxes[n];
      context.fillStyle = 'rgb(' + n * 16 + ',' + n * 16 + ',' + n * 16 + ')';
      context.fillRect(box.x, 600 - box.y + cameraY, box.width, height);
    }
    context.fillStyle = 'red';
    context.fillRect(debris.x, 600 - debris.y + cameraY, debris.width, height);
    if (mode == 'bounce') {
      boxes[current].x = boxes[current].x + xSpeed;
      if (xSpeed > 0 && boxes[current].x + boxes[current].width > canvas.width)
        xSpeed = -xSpeed;
      if (xSpeed < 0 && boxes[current].x < 0)
        xSpeed = -xSpeed;
    }
    if (mode == 'fall') {
      boxes[current].y = boxes[current].y - ySpeed;
      if (boxes[current].y == boxes[current - 1].y + height) {
        mode = 'bounce';
        let difference = boxes[current].x - boxes[current - 1].x;
        if (Math.abs(difference) >= boxes[current].width) {
          gameOver();
        }
        debris = {
          y: boxes[current].y,
          width: difference
        };
        if (boxes[current].x > 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();
</script>
</body>
</html>

[第1-7行]初始化HTML5 Canvas。
[8-20]声明变量和对象。
[22-28]在前一个框之后创建新框的功能。
[30-33]“游戏结束”功能。
[35-89]主游戏循环。让我们看一下细节，因为这是所有操作所在。
[36]如果游戏处于活动状态：
[37-38]清除上一帧并显示得分。
[39-43]画出所有方框。
[41]选择框的颜色。
[44-45]画出碎片。
[46]如果游戏处于“弹跳”模式（当前框从墙壁水平弹起）：
[47-52]在x轴上移动当前框。如果碰到墙壁，请反转方向。
[53]如果游戏处于“掉落”模式（当前框已释放）：
[54]在y轴上移动当前框。
[55]如果它落在上一个框的顶部：
[56]将模式更改回“反弹”
[57]计算不重叠部分的长度。
[58-60]如果差异大于框，则表示玩家完全错失了：游戏结束！
[61-64]更新碎片对象。
[65-72]确定碎片应位于盒子的左侧还是右侧。
[73-76]提高弹跳速度。
[77-79]创建新框。
[82]对碎片进行动画处理-碎片不断下落，直到在[61-64]中再次更新。
[83-85] scrollCounter确定相机应向上移动几帧。如果为正，则相机位置会更新。
[88]等待下一个动画帧
[91]在新游戏开始时将初始值重新分配给变量的功能。
[102-109]单击（鼠标或触摸）处理程序：
[103-4]如果我们处于“游戏结束”模式，则只需重新启动游戏即可。
[106-7]如果我们处于“弹跳”模式，请切换至“下降”（放开包装盒）。
[111]初始化第一场比赛。
[112]开始播放动画。

常见问题FAQ