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();
Advertisement
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); })();
<canvas id="canvas" width="300" height="200"></canvas>
Take what you can from it.