HTML5和画布：随着玩家的移动而移动背景

Question

我正在尝试使用画布制作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); 
} 

但我无法弄清楚如何使移动平滑，当它到达-100px X上不跳，所以我需要它连续移动。我也希望当播放器按moveKey并到达屏幕中间时它会移动。

Answer 1

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

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

如果你想让它不转回到它的本底值，当它到达-100px X上，那么你就需要开始递增bgShiftX。

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

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