Question

我正在尝试使用Canvas制作HTML5游戏。我有一段代码应该移动bg：

function drawScene() { // main drawScene function
clear(); // clear canvas
// draw background
context = document.getElementById("gameCanvas").getContext('2d');
bgShiftX -= 3;
if (bgShiftX <= -100) {
   bgShiftX = 0;
}
  context.drawImage(floor, 0 + bgShiftX, 410);
  context.drawImage(city, 0 + bgShiftX, 175);
}

但我无法弄清楚如何使它平滑移动并且在X上达到-100px时不会跳跃，所以我需要它不断移动。而且我希望它在玩家按下moveKey并到达屏幕中间时移动。

Answer 1

您需要为moveKey添加keydown()事件侦听器。例如，如果它是向上箭头，你会写这个：

window.addEventListener('keydown', function(e){ moveMe(e), false);
function moveMe(e) {
  if (e.keyCode === '38') {
    // shift up
  }
}

如果你希望它在X上达到-100px时不会回到它的底值，那么你需要开始递增bgShiftX。

if (bgShiftX <= -100) {
  incrementX();
}
function incrementX() {
  bgShiftX += 3;
}

我希望这有助于澄清一些事情。

HTML5和Canvas：随着玩家的移动移动背景

1 个答案: