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

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时不跳跃，所以我需要它连续移动。我还希望当玩家按下移动键并到达屏幕中间时它会移动。

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;
}

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