Codepen，Javascript，如何将keyCode上下添加到paddle

Question

我看到了“JavaScript Canvas 教程 - 使用键盘在屏幕上移动精灵/字符”，但它没有帮助我如何将 keyCode 和移动添加到我的桨上。 我希望有人可以解释并展示如何使 keyCode 移动我的变量“paddle1Y”。

 var canvas; var canvasContext; var ballX = 300; var ballY = 200; var paddle1Y = 150; const PADDLE_THICKNESS = 10; const PADDLE_HEIGHT = 100; window.onload = function (){ canvas = document.getElementById("gameCanvas"); canvasContext = canvas.getContext("2d"); var framesPerSecond = 30; setInterval(function() { drawEverything(); }, 1000/framesPerSecond); } function moveEverything(){ if(paddle1Y.keyCode == 38){ paddle1Y -=5; } if(paddle1Y.keyCode == 40){ paddle1Y +=5; } } //draws all on the gameCanvas wich is black. function drawEverything(){ //Next line blanks the screen with black colorRect(0,0,canvas.width,canvas.height, "black"); //next line draw left paddle colorRect(0,paddle1Y, PADDLE_THICKNESS,PADDLE_HEIGHT, "white"); //next line draws ball from the function colorCircle(ballX,ballY,10, "white"); } // summerize the ball information function colorCircle(centerX,centerY, radius, drawColor){ canvasContext.fillStyle = drawColor; canvasContext.beginPath(); canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2,true); canvasContext.fill(); } //summerize the canvas info, like; Color and width/height function colorRect(leftX, topY, width,height, drawColor){ canvasContext.fillStyle = drawColor; canvasContext.fillRect(leftX, topY, width, height); }

 <canvas id = "gameCanvas" width = "800" height= "600"></canvas>

Answer 1

您需要添加事件处理程序的 键盘事件，并使用通过event的处理程序来访问.keyCode （或.which ）的道具。

这正是您可以在代码中使用它的方法：

 var canvas; var canvasContext; var ballX = 300; var ballY = 200; var paddle1Y = 150; const PADDLE_THICKNESS = 10; const PADDLE_HEIGHT = 100; window.onload = function (){ canvas = document.getElementById("gameCanvas"); canvasContext = canvas.getContext("2d"); var framesPerSecond = 30; setInterval(function() { drawEverything(); }, 1000/framesPerSecond); } //draws all on the gameCanvas wich is black. function drawEverything(){ //Next line blanks the screen with black colorRect(0,0,canvas.width,canvas.height, "black"); //next line draw left paddle colorRect(0,paddle1Y, PADDLE_THICKNESS,PADDLE_HEIGHT, "white"); //next line draws ball from the function colorCircle(ballX,ballY,10, "white"); } // summerize the ball information function colorCircle(centerX,centerY, radius, drawColor){ canvasContext.fillStyle = drawColor; canvasContext.beginPath(); canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2,true); canvasContext.fill(); } //summerize the canvas info, like; Color and width/height function colorRect(leftX, topY, width,height, drawColor){ canvasContext.fillStyle = drawColor; canvasContext.fillRect(leftX, topY, width, height); } function handleKeyDown ( event ) { var keyCode = event.which || event.keyCode; switch (keyCode){ case 38: paddle1Y -=5; break; case 40: paddle1Y +=5; break; default: // Avoid preventDefault() when not pressing expected keys return; } // Don't scroll window when pressing UP/DOWN event.preventDefault(); } document.addEventListener('keydown', handleKeyDown, true);

 <canvas id = "gameCanvas" width = "800" height= "600"></canvas>

使用keydown和keyup来跟踪按键被按下的更通用示例：

 var el = document.getElementById('a'); function handleKeyDown ( event ) { var key = event.which || event.keyCode; el.innerHTML = `${key} <strong>pressed</strong> <br/> ${el.innerHTML}`; } function handleKeyUp ( event ) { var key = event.which || event.keyCode; el.innerHTML = `${key} <em>released</em> <br/> ${el.innerHTML}`; } document.addEventListener('keydown', handleKeyDown, true); document.addEventListener('keyup', handleKeyUp, true);

 <div id="a">NOTHING happened</div>

运行该代码段并单击/围绕没有发生的事情，然后按向左、向右等查看效果。

---

与上面相同的示例，但更加模块化... DRY

 var el = document.getElementById('a'); function initKeyHandler ( statusText ) { return function handleKey ( event ) { var key = event.which || event.keyCode; el.innerHTML = `${key} ${statusText} <br/> ${el.innerHTML}`; } } var handleKeyDown = initKeyHandler(`<strong>pressed</strong>`); var handleKeyUp = initKeyHandler(`<em>released</em>`); document.addEventListener('keydown', handleKeyDown, true); document.addEventListener('keyup', handleKeyUp, true);

 <div id="a"> NOTHING happening </div>