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() 이벤트 리스너를 추가해야합니다. 그 위쪽 화살표 인 경우 예를 들어, 당신이 작성합니다

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

몇 가지를 명확히하는 데 도움이되기를 바랍니다.