如何确定键移动哪些图像

Question

我对JavaScript的新手只使用了几周。我正在尝试从头开始制作游戏，只是为了了解它们的工作方式。我从教程中进行了突破，并更改了一些添加背景图像，音乐和10个级别的事情。了解图像的工作方式是我不了解的东西。

JavaScript如何使用箭头键移动桨。为什么砖不小心移动？桨变量如何分配给砖块？我在代码中没有看到与桨相关的键。该游戏仅在urbangamez的PC上在线工作。Site

Answer 1

正常工作是如何工作的，通过检查gameloop中的密钥变量的布尔值，从而相应地向循环的每个刻度移动桨。

让我首先用HTML元素编写的所有状态，但是使用同一主体使用帆布元素。我在代码中留下了一些评论，以使您的阅读乐趣。

// setup globals
var paddle = document.getElementById('paddle');
var rightPressed = false;
var leftPressed = false;
// add your key event listeners that you've pasted in the comments.
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
// you can find keycodes at the bottom of the page on:
// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
function keyDownHandler(e) { 
  if(e.keyCode == 39) rightPressed = true; 
  else if(e.keyCode == 37) leftPressed = true; 
} 
function keyUpHandler(e) { 
  if(e.keyCode == 39) rightPressed = false; 
  else if(e.keyCode == 37) leftPressed = false; 
}
// let's do the loop-ti-loop
(function gameloop(timestamp) {
  // get the current left position string '0px' cut of the 'px' and convert into number
  var curXPosPaddle = Number(paddle.style.left.slice(0,-2));
  console.log('x:',curXPosPaddle);
  
  // if right key down add 1 to the current paddle left position 
  if(rightPressed && !leftPressed) 
    paddle.style.left = curXPosPaddle + 1 + 'px';
  // if left key down substract 1 from the current paddle left position
  if(leftPressed && !rightPressed)
    paddle.style.left = curXPosPaddle - 1 + 'px';
  
  // recall the loop again as soon as possible
  window.requestAnimationFrame(gameloop);
})()

#paddle{
  position: absolute;
  top:0px;
  left: 0px;
  width:40px;
  height:20px;
  background:red;
}
#txt{
  margin-top:30px;
}

<div id="paddle"></div>
<div id="txt">click here to activate the example window<br> afterwards, Press Left or Right key</div>

现在，您可以开始编程桨的边界，以不超过屏幕的边缘：）