对象移动的基本键盘功能

Question

我无法弄清楚我的代码有什么问题。我有另一个例子，我能够开始工作，但它没有使用构造函数对象，而这个例子。这是我能想到的唯一不同之处。我已经以多种方式对其进行了调整，但没有运气。请帮助我了解为什么它不起作用。

function newGame() {
  let Player, Controller;
  let context = document.getElementById("canvas").getContext("2d");
  //Player
  Player = function (x, y, width, height) {
    this.width = width,
    this.height = height,
    this.x = x,
    this.y = y,
    this.xVelocity = 0;
    this.yVelocity = 0;
    this.update = function () {
      context.fillStyle = "red";
      context.fillRect(this.x + this.xVelocity, this.y + this.yVelocity, this.width, this.height);
    };
  };
  let player1 = new Player(200, 200, 25, 25);

  let playerUpdate = function () {
    player1.update();
  };

  //Controller
  Controller = function() {
    this.right = false;
    this.left = false;
    this.keyDownUp = function(e) {
      let keyInput = (e.type == "keydown") ? true : false;
      console.log(keyInput)
    switch (e.keyCode) {
      case 37:
        this.left = keyInput;
        break;
      case 39:
        this.right = keyInput;
    }
   }
  };
  
  let loop = function () {
    if (Controller.left) {
      player1.xVelocity += 10;   
    };
    playerUpdate();
  };

window.requestAnimationFrame(loop);
window.addEventListener("keydown", Controller.keyDownUp);
window.addEventListener("keyup", Controller.keyDownUp);
}

newGame();

Answer 1

您的 loop 只运行一次。 requestAnimationFrame(loop); 就像 setTimeout 你需要为每一帧调用它。在函数 loop.

的底部添加行 requestAnimationFrame(loop);

例子

  function loop() {
      if (Controller.left) {
          player1.xVelocity += 10;   
      }
      playerUpdate();
      requestAnimationFrame(loop);  // get next frame
  };
  requestAnimationFrame(loop); // start animation

重新评论

代码一团糟，我不确定你的部分意图。

我已经改写如下，猜测你的意图。

(() => {
    function Player(x, y, width, height) {
        this.width = width,
        this.height = height,
        this.x = x,
        this.y = y,
        this.vx = 0;
        this.vy = 0;
    }
    Player.prototype = {
        update() {
            this.vx = controller.left ? -10 : 0;
            this.vx = controller.right ? 10 : this.vx;
            this.x += this.vx;
            this.y += this.vy;
            this.x = (this.x + ctx.canvas.width) % ctx.canvas.width;
        },
        draw() {
            ctx.fillStyle = "red";
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    function Controller() {
        this.right = false;
        this.left = false;
        addEventListener("keydown", keyEvent.bind(this));
        addEventListener("keyup", keyEvent.bind(this));
        function keyEvent(e) {
            if (e.code === "ArrowRight") { this.right = e.type === "keydown" }
            else if (e.code === "ArrowLeft") { this.left = e.type === "keydown" }
        }
    }
    function loop() {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        player.update();
        player.draw();
        requestAnimationFrame(loop);
    };
    
    const ctx = document.getElementById("canvas").getContext("2d");
    const controller = new Controller();
    const player = new Player(200, 175, 25, 25);
    requestAnimationFrame(loop);
})();

<canvas id="canvas" width="300" height="200"></canvas>

尽你所能。

对象移动的基本键盘功能

Basic keyboard functionality for movement of object

javascript

addeventlistener

keyboard-events

重新评论