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

然后继续使用left和right的keycodes，我不知道，但是a和d是

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

通常，您会使用onkeydown和onkeyup事件（参见这 四个 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 使用了 JavaScript 的修改，它被称为“ProcessingJS”。这似乎类似于 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() 可能被调用两次）这一事实使得这变得困难。

于 2016-12-18T05:55:38.867 回答