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

我希望這有助於澄清一些事情。