Question

我是javascript的新手，只使用了几个星期。我试图从头开始制作游戏，只是为了学习它们如何工作的基础知识。我从教程中突破并更改了一些内容，例如添加背景图像，音乐和10个级别。了解图像是如何工作的，这是我无法理解的。

javascript如何知道用箭头键移动球拍。为什么砖块不会意外移动？如何将桨叶变量分配给砖块？我没有在代码中看到与桨相关的键的任何内容。该游戏只能在Urbangamez.site上的PC上在线使用

Answer 1

Normaly如何工作是通过检查游戏循环中关键变量的布尔值，从而相应地为循环的每个滴答移动桨。

首先让我说我用html元素编写了这个，但是使用canvas元素的同样的原则。我在代码中留下了一些评论，以便您阅读。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

现在你可以开始编写桨的边界，使其不会越过屏幕的边缘：）

如何确定按键移动的图像

1 个答案: