Basic keyboard functionality for movement of object

Question

I am unable to figure out what is wrong with my code. I have another example I was able to get to work but it didn't use constructor objects and this one does. That's about the only different I can think of. I've tweaked it in many ways but no luck. Please help me understand why it isn't working.

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();

user_3877726 · Answer

Your loop only runs once. requestAnimationFrame(loop); is like setTimeout you need to call it for each frame. Add the line requestAnimationFrame(loop); at the bottom of the function loop.

Example

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

Re comments

The code is a mess and I am unsure as to your intentions in parts of it.

I have re-written it as follows making guesses as to your intentions.

(() => {
    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);
})();

Take what you can from it.

Basic keyboard functionality for movement of object

1 Answers

Re comments