0

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

2 に答える 2

0

このピースを使って

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

その後、左右のキーコードを使い続けますが、これはわかりませんが、a と d は

if(keys[65]){//a
    x-=5;
}
else if(keys[68]){//d
    x+=5;
}
于 2017-01-06T00:23:04.990 に答える
0

通常、イベントonkeydownとonkeyupイベントを使用します (これらの 4 つの W3Schools ページを参照してください)。次に、イベントで「左移動モード」または「右移動モード」に切り替え、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();
    }
});

（この質問への回答、特にこの質問から一部のコードを改変）

ただし、Khan-Academy は、「ProcessingJS」と呼ばれる JavaScript の修正を使用しています。これは Processing.js に似ているように見えますが、(私が知る限り) Processing.js は JavaScript で実行される処理コードであり、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 回呼び出される可能性がある) という事実が、これを難しくしています。

于 2016-12-18T05:55:38.867 に答える