HTML5とキャンバス：プレーヤーの動きで背景を移動する

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()イベントリスナーを追加する必要があります。あなたはそれがX上-100px達したとき、それはそのフロア値に戻ってシフトしていない場合、あなたはインクリメントを開始する必要があります

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

：それは上矢印た場合たとえば、あなたはこれを書きますbgShiftX。

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

これはいくつかを明確にするのに役立ちます。