자바 스크립트의 간단한 동작

Question

JavaScript로 게임을 만들고 있는데, 왼쪽 및 오른쪽 키를 누를 때 오브젝트를 부드럽게 움직일 수 있는지 궁금합니다. 지금까지 왼쪽과 오른쪽으로 움직일 원을 만들었습니다. 오른쪽 화살표 키를 누르고 있으면 원은 오른쪽으로 이동하지만 동시에 왼쪽 키를 누르면 글리치가 사라지고 움직이지 않습니다. 그 반대의 경우도 마찬가지입니다. 나는 그것이 오른쪽 화살표 키를 누를 때 그리고 여전히 그것을 누르는 동안, 나는 왼쪽 키를 누른다. 원은 왼쪽으로 가고, 그 반대도 마찬가지이다. (fourW3Schoolspagesthese 참조)

var x = 200; 
draw = function() { 
    background(255,255,255); 
    ellipse(x, 200, 50, 50); 
    if (keyIsPressed && keyCode === RIGHT){ //if right key pressed 
      x += 5; 
     } 
     if (keyIsPressed && keyCode === LEFT){ //if left key pressed 
      x -= 5; 
     } 
}; 

Answer 1

일반적으로, 당신은 onkeydown 및 onkeyup 이벤트를 사용합니다 : 어쨌든, 여기 내 코드입니다. 그런 다음 onkeydown 이벤트에서 '왼쪽 이동 모드'또는 '오른쪽 이동 모드'로 전환하고 onkeyup 이벤트에서 '고정 모드'로 돌아갑니다 (단, 릴리스 된 키가 현재 모드. 왼쪽을 누르고 오른쪽을 누른 다음 왼쪽을 놓고 움직임 재설정을 찾지 않으려는 경우). 예를 들어 (특히 this onethis question 답변에서 적응 일부 코드)

// ---- Program logic ---- 

var x = 200; 

var moveSpeedX = 0; 
var moveSpeedXMultiplier = 5; 

//Draw function would go here. Normal javascript doesn't support 
//draw(), so this is only included in the Processing.js example below 

var onRightArrowDown = function() { 
    moveSpeedX = 1; 
} 

var onLeftArrowDown = function() { 
    moveSpeedX = -1; 
} 

var onRightArrowUp = function() { 
    if (moveSpeedX > 0) { 
     moveSpeedX = 0; 
    } 
} 

var onLeftArrowUp = function() { 
    if (moveSpeedX < 0) { 
     moveSpeedX = 0; 
    } 
} 


// ---- Code to work with HTML keyboard events ---- 

document.addEventListener("keydown", function(e) { 
    e = e || window.event; // For older browsers (uses window.event if e is undefined) 

    if (e.keyCode === 37) { // left arrow 
     onLeftArrowDown(); 
    } 
    else if (e.keyCode === 39) { // right arrow 
     onRightArrowDown(); 
    } 
}); 

document.addEventListener("keyup", function(e) { 
    if (e.KeyCode == 37) { // left arrow 
     onLeftArrowUp(); 
    } 
    else if (e.keyCode === 39) { // right arrow 
     onRightArrowUp(); 
    } 
}); 

그러나 칸 아카데미는 'ProcessingJS'로 지칭 스크립트의 변형을 이용한다. 이것은 Processing.js가 JavaScript에서 실행되는 코드 인 반면 ProcessingJS는 처리 코드와 다소 비슷한 JavaScript 코드라는 점을 제외하면 Processing.js와 비슷합니다 (내가 알 수있는 것부터). 이 점에 대해서는 잘 모르겠지만 ProcessingJS는 Processing.js와 동일한 함수와 변수를 지원한다고 가정합니다.

Processing.js는 자동으로 호출되는 함수 형태로 일부 키 관련 이벤트를 지원하는 것으로 나타납니다. draw()와 유사합니다. 그러나 키를 누르고있을 때 반복적으로 호출되는 이벤트 만 찾을 수 있습니다. 한 번만 실행되는 이벤트는 아닙니다. 이 여기에 이벤트/기능은 꽤 쓸모가 있습니다, 그래서 당신이 있었다 당신은뿐만 아니라 전역 변수를 계속 사용할 수 있습니다 :

// ---- Program logic ---- 

var x = 200; 

var moveSpeedX = 0; 
var moveSpeedXMultiplier = 5; 

draw = function() { 
    background(255,255,255); 
    ellipse(x, 200, 50, 50); 

    callArrowKeyFunctions(); 

    x += moveSpeedX * moveSpeedXMultiplier; 
}; 


var onRightArrowDown = function() { 
    moveSpeedX = 1; 
} 

var onLeftArrowDown = function() { 
    moveSpeedX = -1; 
} 

var onRightArrowUp = function() { 
    if (moveSpeedX > 0) { 
     moveSpeedX = 0; 
    } 
} 

var onLeftArrowUp = function() { 
    if (moveSpeedX < 0) { 
     moveSpeedX = 0; 
    } 
} 


// ---- Code to work with Processing.JS keyboard interface ---- 

var rightArrowPressedPrev = false; 
var leftArrowPressedPrev = false; 

var callArrowKeyFunctions = function() { 

    if (keyIsPressed && keyCode === RIGHT && !rightArrowPressedPrev) { 
     //if right key pressed, and it wasn't before 
     onRightArrowDown(); 
    } else if (rightArrowPressedPrev { 
     //if right key not pressed, but it was before 
     onRightArrowUp(); 
    } 

    if (keyIsPressed && keyCode === LEFT && !leftArrowPressedPrev) { 
     //if left key pressed, and it wasn't before 
     onLeftArrowDown(); 
    } else if (leftArrowPressedPrev) { 
     //if left key not pressed, but it was before 
     onLeftArrowUp(); 
    } 


    rightArrowKeyPressedPrev = (keyIsPressed && keyCode === RIGHT); 
    leftArrowKeyPressedPrev = (keyIsPressed && keyCode === LEFT); 
    // &&, ==, etc aren't specific to if statements. 
    // Instead, if statements can take any expression that returns a bool, 
    // and these expressions can be used anywhere else as well. 
} 

화살표 키가 아닌 다른 키와 함께 작동하도록 callArrowKeyFunctions 기능을 일반화 할 수 있습니다. 그러나 keyCode === RIGHT와 keyCode === LEFT가 동시에 true를 반환 할 수 있습니다 (또는 draw()가 두 번 호출 될 수 있음) 때문에이 작업을 어렵게 만듭니다.

Answer 2

사용이 조각 그리고

keyPressed = function(){ 
    keys[keyCode]=true; 
}; 
keyReleased = function(){ 
    keys[keyCode]=false; 
}; 

의 키 코드를 계속 사용할 왼쪽 나도 몰라하는, 오른쪽,하지만 d는

if(keys[65]){//a 
    x-=5; 
} 
else if(keys[68]){//d 
    x+=5; 
} 

입니다