对象的速度不会改变（javascript，html canvas）

康纳·保罗

我创建了一个敌人对象，所以我可以一次创建多个。我有对象的参数来获取 x、y、x 的速度和 y 的速度。无论我输入多少速度，红色方块（敌人）都不会移动。

    var c,
        ctx,
        cWidth,
        cHeight,
        xCenter,
        yCenter,
        iBack,
        Player,
        enemy1,
        scale = 40,
        speed = scale / 3;

    // Controll initialization
    var keyState = {};
    window.addEventListener('keydown',function(e){
        keyState[e.keyCode || e.which] = true;
    },true);
    window.addEventListener('keyup',function(e){
        keyState[e.keyCode || e.which] = false;
    },true);

    // Initial function to set canvas variables and start loop
    function init() {
      c = document.getElementById('canvas');
      ctx = c.getContext('2d');
      cWidth = c.width;
      cHeight = c.height;
      xCenter = cWidth / 2;
      yCenter = cHeight / 2;

      iBack = new Image(50, 50);
      iBack.src = 'pics/background1.jpg';

      Player =
      {
        playerX: xCenter - (scale / 2),
        playerY: yCenter - (scale / 2),
        speed: speed,
        draw: function() {
          ctx.beginPath();
          ctx.rect(Player.playerX, Player.playerY, scale, scale);
          ctx.fillStyle = 'blue';
          ctx.fill();
          ctx.closePath();
        },
        checkInput: function() {
          if (keyState[65]) {
            // A key
            Player.playerX = Player.playerX - Player.speed;
          } else if (keyState[68]) {
            // D key
            Player.playerX = Player.playerX + Player.speed;
          } else if(keyState[87]) {
            // W key
            Player.playerY = Player.playerY - Player.speed;
          } else if(keyState[83]) {
            // S key
            Player.playerY = Player.playerY + Player.speed;
          }
        }
      };

      // Enemy object
      function Enemy(x, y, speedX, speedY)
      {
        this.x = x;
        this.y = y;
        this.speedX = speedX;
        this.speedY = speedY;
        this.draw = function () {
          ctx.beginPath();
          ctx.rect(this.x + this.speedX, this.y + this.speedY, scale, scale);
          ctx.fillStyle = 'red';
          ctx.fill();
          ctx.closePath();
        };
      }

      enemy1 = new Enemy(0, (cHeight / 2) - (scale / 2), 10, 10);

      setInterval(draw, 60);
    }

    function draw() {
      // Input
      Player.checkInput();

      // Draw Background
      //ctx.drawImage(iBack, 0, 0, cWidth, cHeight);
      ctx.beginPath();
      ctx.rect(0, 0, cWidth, cHeight);
      ctx.fillStyle = 'white';
      ctx.fill();
      ctx.stroke();
      ctx.closePath();

      // Draw Player
      Player.draw();

      // Draw Enemy
      enemy1.draw();

      // Collision
      playerCollision();
    }

    function playerCollision() {
      // Collision with walls
      if (Player.playerX <= 0) {
        Player.playerX = 0;
      } else if (Player.playerX + scale >= cWidth) {
        Player.playerX = cWidth - scale;
      } else if (Player.playerY <= 0) {
        Player.playerY = 0;
      } else if (Player.playerY + scale >= cHeight) {
        Player.playerY = cHeight - scale;
      }

      // Collsion with enemys

    }

萨曼尼姆

你没有任何东西会导致敌人的x价值发生变化。你只是用绘制它x + speed，但这不会让它移动。那总是把它画出来。

通常在你的中setInterval()，而不是draw()直接调用，创建一个名为类似的函数run()，它应该在调用之前做一些工作draw()以显示该工作的更改。

在run()，你应该为每个敌人做点什么enemy.x += enemy.speed。然后，当您绘制时，每一帧它们都会以速度移动。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。