制作JS游戏，将其他对象添加到代码中

debugcn 发表于 Dev

圣经

我有一个游戏概念，并且使用w3学校，我已经在画布的底部构建了一个用于移动游戏的基本代码。我想开发一款与W3游戏计划不同的游戏。我并不是在实际编写代码时寻求帮助，而是在代码中添加其他变量/对象的地方寻求帮助。这是我当前的代码。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    canvas {
      border: 5px solid #d3d3d3;
      background-color: #f1f1f1;
    }
  </style>
</head>

<body onload="startGame()">
  <script>
    var myGamePiece;

    function startGame() {
      myGamePiece = new component(30, 30, "black", 350, 445);
      myGameArea.start();
    }

    var myGameArea = {
      canvas: document.createElement("canvas"),
      start: function() {
        this.canvas.width = 700;
        this.canvas.height = 480;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function(e) {
          myGameArea.key = e.keyCode;
        }) 
        window.addEventListener('keyup', function(e) {
          myGameArea.key = false;
        })
      },
      clear: function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
    }

    function component(width, height, color, x, y) {
      this.width = width;
      this.height = height;
      this.speedX = 0;
      this.speedY = 0;
      this.x = x;
      this.y = y;
      this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
      this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
      }
    }

    function updateGameArea() {
      myGameArea.clear();
      myGamePiece.speedX = 0;
      myGamePiece.speedY = 0;
      if (myGameArea.key && myGameArea.key == 37) {
        myGamePiece.speedX = -1;
      }
      if (myGameArea.key && myGameArea.key == 39) {
        myGamePiece.speedX = 1;
      }
      myGamePiece.newPos();
      myGamePiece.update();
    }
  </script>
</body>

</html>

任何帮助将不胜感激，谢谢。

对于有兴趣的人，我的计划是让不同的物体从顶部掉落，当您抓住它们时，每个物体都会对您的播放器或背景/音乐产生不同的影响。

清除棕褐色

在该代码上添加其他对象，您将需要在两个位置插入代码：

函数startGame
这是初始化所有对象变量的地方
函数updateGameArea
这是将对象实际绘制到画布中的位置

因此，让我们跳到一个例子：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    canvas {
      border: 5px solid #d3d3d3;
      background-color: #f1f1f1;
    }
  </style>
</head>

<body onload="startGame()">
  <script>
    var myGamePiece;

    function startGame() {
      dots = []
      for (i = 0; i < 45; i++) {
        a = i*8 * Math.PI / 180
        dots.push(new component(2, 2, "red", Math.sin(a)*45 + 80, Math.cos(a)*35 + 60)) 
      }
      myGamePiece = new component(30, 30, "black", 350, 125);
      myGameArea.start();
    }

    var myGameArea = {
      canvas: document.createElement("canvas"),
      start: function() {
        this.canvas.width = 600;
        this.canvas.height = 160;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function(e) {
          myGameArea.key = e.keyCode;
        });        
        window.addEventListener('keyup', function(e) {
          myGameArea.key = false;
        });
      },
      clear: function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
    }

    function component(width, height, color, x, y) {
      this.width = width;
      this.height = height;
      this.speedX = 0;
      this.speedY = 0;
      this.x = x;
      this.y = y;
      this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
      this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;
      }
    }

    function updateGameArea() {
      myGameArea.clear();
      myGamePiece.speedX = 0;
      myGamePiece.speedY = 0;
      if (myGameArea.key && myGameArea.key == 37) {
        myGamePiece.speedX = -1;
      }
      if (myGameArea.key && myGameArea.key == 39) {
        myGamePiece.speedX = 1;
      }
      myGamePiece.newPos();
      myGamePiece.update();
      dots.forEach(x => x.update());
    }
  </script>
</body>

</html>