“堆箱子”小游戏

芥末鱿鱼

发布于 2022-05-05 15:04:06

3920

发布于 2022-05-05 15:04:06

文章被收录于专栏：玩转 Spring Cloud玩转 Spring Cloud

“堆箱子”小游戏, 升级中 …

推出小游戏版本, 微信搜索"开心堆箱子"体验体验, 代码不难, 纯属娱乐

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-09-18，如有侵权请联系 cloudcommunity@tencent.com 删除

微信