时间戳

首页 > 解决方案 > 制作JS游戏，在代码中添加其他对象的地方

javascript - 制作JS游戏，在代码中添加其他对象的地方

问题描述

我有一个游戏概念，并使用 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>

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

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

标签： javascriptcanvasjavascript-objects

解决方案

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

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

  • 函数 startGame
    我dots = []...只在椭圆图案上添加了几个“点”
  • 函数 updateGameArea
    在这里我们只调用对象的更新：
    dots.forEach(x => x.update());

推荐阅读