어떤 이미지가 키로 이동되는지 확인하는 방법

Question

나는 몇 주 동안 만 그것을 사용 해왔다. 나는 그들이 어떻게 작동하는지에 대한 기초를 배우기 위해 처음부터 게임을 만들려고 노력하고 있습니다. 나는 자습서에서 탈주하여 배경 이미지, 음악 및 10 개의 레벨을 추가하는 것과 같은 몇 가지 사항을 변경했습니다. 이미지가 어떻게 작동 하는지를 이해하는 것은 내가 이해하지 못하는 것입니다.

JavaScript에서 화살표 키를 사용하여 패들의 이동을 어떻게 알 수 있습니까? 벽돌이 우발적으로 움직이지 않는 이유는 무엇입니까? 외륜 변수는 벽돌에 어떻게 할당됩니까? 외륜과 관련된 키에 대해서는 코드에서 아무 것도 볼 수 없습니다. 이 게임은 Urbangamez.site의 PC에서만 온라인으로 작동합니다.

Answer 1

Normaly는 게임 루프에서 주요 변수의 부울 값을 확인하여 이에 따라 루프의 각 진드기마다 패들을 이동합니다.

먼저 html 요소를 사용하여이 코드를 작성했지만 동일한 주체가 canvas 요소를 사용하게되었습니다. 나는 당신의 독서 쾌락을위한 코드에 몇 가지 코멘트를 남겼습니다.

// setup globals 
 
var paddle = document.getElementById('paddle'); 
 
var rightPressed = false; 
 
var leftPressed = false; 
 

 
// add your key event listeners that you've pasted in the comments. 
 
document.addEventListener("keydown", keyDownHandler, false); 
 
document.addEventListener("keyup", keyUpHandler, false); 
 
// you can find keycodes at the bottom of the page on: 
 
// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode 
 
function keyDownHandler(e) { 
 
    if(e.keyCode == 39) rightPressed = true; 
 
    else if(e.keyCode == 37) leftPressed = true; 
 
} 
 
function keyUpHandler(e) { 
 
    if(e.keyCode == 39) rightPressed = false; 
 
    else if(e.keyCode == 37) leftPressed = false; 
 
} 
 

 
// let's do the loop-ti-loop 
 
(function gameloop(timestamp) { 
 

 
    // get the current left position string '0px' cut of the 'px' and convert into number 
 
    var curXPosPaddle = Number(paddle.style.left.slice(0,-2)); 
 
    console.log('x:',curXPosPaddle); 
 
    
 
    // if right key down add 1 to the current paddle left position 
 
    if(rightPressed && !leftPressed) 
 
    paddle.style.left = curXPosPaddle + 1 + 'px'; 
 
    // if left key down substract 1 from the current paddle left position 
 
    if(leftPressed && !rightPressed) 
 
    paddle.style.left = curXPosPaddle - 1 + 'px'; 
 
    
 
    // recall the loop again as soon as possible 
 
    window.requestAnimationFrame(gameloop); 
 
})()

#paddle{ 
 
    position: absolute; 
 
    top:0px; 
 
    left: 0px; 
 
    width:40px; 
 
    height:20px; 
 
    background:red; 
 
} 
 
#txt{ 
 
    margin-top:30px; 
 
}

<div id="paddle"></div> 
 
<div id="txt">click here to activate the example window<br> afterwards, Press Left or Right key</div>

이제 당신은 화면의 가장자리 :