Простой ход в javascript

Question

Я делаю игру в JavaScript, и мне интересно, как я могу сделать объекты плавно перемещающимися, когда вы нажимаете левую и правую клавиши. Пока у меня есть круг, чтобы двигаться влево и вправо. Если вы держите клавишу со стрелкой вправо, кружок перемещается вправо, однако, если вы затем нажмете левую клавишу одновременно, это будет выглядеть как глюки и перестанет двигаться, и наоборот. Я хочу, чтобы, когда я нажимаю клавишу со стрелкой вправо, и, продолжая нажимать ее, я нажимаю левую клавишу, круг будет идти влево и наоборот. Во всяком случае, вот мой код:

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 события (см thesefourW3Schoolspages). Затем вы переключитесь на «режим с левым ходом» или «режим правого перемещения» на событие onkeydown и вернитесь в «стационарный режим» на событие onkeyup (но только если выпущенный ключ был ответственным за Текущий режим. Вы не хотите нажимать влево, нажимать вправо, затем отпускать влево и находить сброс движения). Например:

// ---- 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(); 
    } 
}); 

(некоторый код адаптирован из ответов на this question, особенно this one)

Однако Хан-академия использует модификацию JavaScript, который оно ссылается как 'ProcessingJS'. Это похоже на Processing.js, за исключением того, что (из того, что я могу сказать) Processing.js - это обрабатывающий код, выполняющийся на JavaScript, а ProcessingJS - это код JavaScript, который выглядит несколько похож на код обработки. Я не уверен в этом, но я предполагаю, что ProcessingJS поддерживает те же функции и переменные, что и Processing.js.

Возможно, обработчик.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; 
}