javascript - 使元素在事件发生之前以某种方式表现(制作吃 bean 人游戏)

Question

我正在用 Javascript 制作 pacman 游戏作为练习。让 Angular 色无限地朝一个方向移动直到按下另一个键为止的好方法是什么？

function Player(){

this.left = $('#pacMan').css('left');

this.leftMove = function(){

this.left = parseInt(this.left) - 20;  
$('#pacMan').animate({'left': this.left}, 100);   
};


//Pressing directional keys calls appropriate methods.

$('body').keydown(function(){
if (event.which === 39){
for (i=0; i<13; i++){
pacMan.rightMove();
}
}
if (event.which === 37){
pacMan.leftMove();
}
if (event.which === 38){
pacMan.topMove();
}
if (event.which === 40){
pacMan.bottomMove();
}

});*/

如何使元素不断移动一个方向，直到按下新键为止，它会朝该方向移动？

Answer 1

我倾向于用于解决此类问题的一般方法是让您的对象具有 changeX (vx) 和 changeY ( vy)变量。然后在主游戏循环中将对象的位置更改为变量:

this.left = parseInt(this.left) - this.vx;  
this.top = parseInt(this.top) - this.vy;  

在事件处理程序中，您可以根据要移动的位置设置 vx 和 vy 的值。例如，设置 vx = 10 和 vy = 0 会使其每次循环向左移动 10 个单位。

if (event.which === 39) {
   //pacMan.leftMove();
   pacMan.vx = 10; pacMan.vy = 0;
}

玩家只需拥有一个 move() 函数，该函数将根据主循环中的这些值进行移动:

var timer = setInterval(function () {
  pacMan.move();
}, 50);

其中move()是:

this.move = function(){
  this.left = parseInt(this.left) - this.vx;  
  $('#pacMan').css({'left': this.left})
  this.top = parseInt(this.top) - this.vy;  
  $('#pacMan').css({'top': this.top});      
}

Working Example