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事件（请参阅these four W3Schools pages）。然后，您将在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）

然而，Khan-Academy使用JavaScript的修改，它称为'ProcessingJS'。这似乎与Processing.js类似，除了（据我所知）Processing.js正在处理在JavaScript上运行的代码，而ProcessingJS是看起来有点类似于Processing代码的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（）被调用两次）这一事实使得这很困难。

Answer 2

使用此作品

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

在javascript中的简单移动

2 个答案: