Codepen，Javscript，如何在键盘上上下添加keyCode

Question

我看到了"JavaScript Canvas Tutorial - Move a sprite/character on screen using the keyboard"，但是它并没有帮助我如何向键盘中添加keyCode和移动。我希望somone能够解释甚至展示如何制作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

您需要为keyboard events添加事件处理程序，并在处理程序中使用传递的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>

运行该代码段，然后在没有任何反应上/周围单击，然后按向左，向右等查看效果。

---

与上面的示例相同，但模块化程度更高... D.R.Y。

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>