JavaScriptの単純な動き

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イベントの「固定モード」に戻ります（ただし、解放されたキーが現在のモード。左を押し、右を押し、次に左を離し、動きのリセットを見つけることを望まないでしょう）。例えば：

// ---- 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）

しかし、カーン・アカデミーは、それがProcessingJS」というは、JavaScriptの変形を使用します。これはProcessing.jsと似ていますが、Processing.jsはJavaScriptで実行中のProcessingコードですが、ProcessingJSは処理コードと多少似ているJavaScriptコードです。これについてはわかりませんが、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（）が2回呼び出される）場合、これは困難になります。

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

です