javascript - 如何在暂停后进行 Javascript 函数调用

Question

我正在使用 HTML5 Canvas/Javascript 构建一个简单的游戏。但是，游戏将通过 Javascript 函数(将 js 注入(inject)浏览器)。传递的代码将移动 Angular 色，即。 “moveRight()；moveRight()；moveUp()；”。目前，我让 Angular 色移动，但是对于“moveRight(); moveRight();”， Angular 色将自己传送到它的新位置。我希望 Angular 色向右移动，然后在再次向右移动之前暂停一下。

function right(){
   window.setTimeout(function() {
      character.x += 30;
   }, 2000); 
}

我怎样才能完成这样的事情。我尝试使用超时，但对我帮助不大。

谢谢，

Answer 1

解决此问题的最佳方法是使用 requestAnimationFrame ，并在玩家能够移动时使用计数器。

setInterval 不适用于这种情况，因为您需要确认玩家向相反方向移动或玩家取消移动的情况。

如果没有更多代码，很难理解您当前的逻辑，但您将在下面找到一种基于网格的移动方法。

const c = document.getElementById('canvas');
c.width = window.innerWidth;
c.height = window.innerHeight;
const ctx = c.getContext('2d');

// player delay for movement
const playerMovementDelay = 2;
const tileSize = 32;
// player starting position
const myPlayer = {x: 1, y: 1, h: 1, w: 1};
let pkl = 0, pkr = 0, pku = 0, pkd = 0;
let pvelx = 0, pvely = 0;
let movementCountdown = 0;

function render() {

  // player logic
  movementCountdown -= 0.16;
  const deltax = pkr + pkl;
  const deltay = pkd + pku;
  if (movementCountdown <= 0 && (deltax != 0 || deltay != 0)) {
    movementCountdown = playerMovementDelay;
    pvelx = deltax;
    pvely = deltay;
  }
  const speed = 1;
  myPlayer.x += pvelx * speed;
  myPlayer.y -= pvely * speed;
  pvelx = pvely = 0;
  
  ctx.clearRect(0, 0, c.width, c.height);

  // player render
  ctx.fillStyle = '#FFD9B3';
  ctx.fillRect(myPlayer.x * tileSize, myPlayer.y * tileSize, myPlayer.w * tileSize, myPlayer.h * tileSize);

  window.requestAnimationFrame(render);
}

window.addEventListener('keydown', e => {
  if (e.key == 'ArrowRight') {
    pkr = 1;
    e.preventDefault();
  } else if (e.key == 'ArrowLeft') {
    pkl = -1;
    e.preventDefault();
  }
  
  if (e.key == 'ArrowUp') {
    pku = 1;
    e.preventDefault();
  } else if (e.key == 'ArrowDown') {
    pkd = -1;
    e.preventDefault();
  }

});

window.addEventListener('keyup', e => {
  if (e.key == 'ArrowRight') {
    pkr = 0;
  } else if (e.key == 'ArrowLeft') {
    pkl = 0;
  }
  
  if (e.key == 'ArrowUp') {
    pku = 0;
  } else if (e.key == 'ArrowDown') {
    pkd = 0;
  }
});

window.requestAnimationFrame(render);

body, html {
  margin: 0;
}

<canvas id="canvas"></canvas>