2

私にはシンプルなコンセプトがあります。プレイヤーが W、A、S、または D を押すと、それに応じてキャンバス上の画像が移動します。ただし、これにより非常に途切れ途切れのアニメーションが発生し、その理由はわかりません (ただし、イベント リスナーと関係があると思います)。以下は私のコードです。

var playerXPos = 10;
var playerYPos = 10;
var playerImg = new Image();
playerImg.src = "knight.png";

function mainGameLoop(){
    window.requestAnimationFrame(mainGameLoop);
    c = document.getElementById("gameCanvas").getContext("2d");


    c.clearRect(0,0,1000,500);

    c.drawImage(playerImg,playerXPos,playerYPos);
}
window.requestAnimationFrame(mainGameLoop);


    window.addEventListener("keydown", onKeyDown, false);
    window.addEventListener("keyup", onKeyUp, false);
    window.addEventListener("keypress", onKeyPress, false);

    function onKeyDown(e){
        var keyCode = e.keyCode;
        switch(keyCode){
            case 87: //w
                onKeyW();
            break;
            case 65: //a
                onKeyA();
            break;
            case 83: //s
                onKeyS();
            break;
            case 68: //d
                onKeyD();
            break;
        }



function onKeyW(){
    playerYPos -= 5;
}
function onKeyA(){
    playerXPos -= 5;
}
function onKeyS(){
    playerYPos += 5;
}
function onKeyD(){
    playerXPos += 5;
}

なぜこれを行うのですか？どんな助けでも大歓迎です！

EDIT：補足として、ブール値を使用する前にこれを行いました（wキーが押されるとkeyW変数がtrueになり、mainGameLoopにはありますif(keyW == true){playerYPos -= 5;}）

ジャスフィドル

4

1 に答える 1

1

どうぞ: jsFiddle

キー イベントごとに位置を変更したくない場合。また、フレーム間の時間を考慮する必要があります。多くの要因に応じて、1 つのフレームが最後のフレームから 30 ミリ秒になる場合もあれば、60 ミリ秒になる場合もあるからです。

var playerXPos = 10;
var playerYPos = 10;
var playerSpeed = 0.3; // this is in pixels per ms

var aPressed = false;
var wPressed = false;
var sPressed = false;
var dPressed = false;
var lastTime = null;
function mainGameLoop(timestamp) {
    var delta = timestamp - (lastTime || timestamp);

    if(aPressed){
        playerXPos -= playerSpeed * delta;
    }
    if(dPressed){
        playerXPos += playerSpeed * delta;
    }
    if(wPressed){
        playerYPos -= playerSpeed * delta;
    }
    if(sPressed){
        playerYPos += playerSpeed * delta;
    }

    window.requestAnimationFrame(mainGameLoop);
    c = document.getElementById("gameCanvas").getContext("2d");

    c.clearRect(0, 0, 1000, 500);
    player();
    lastTime = timestamp;
}
window.requestAnimationFrame(mainGameLoop);

function player() {
    var playerImg = new Image();
    //playerImg.src = "knight.png";
    c.fillRect(playerXPos, playerYPos,100,100);
}

function onKeyW(pressed) {
    wPressed = pressed;
}

function onKeyA(pressed) {
    aPressed = pressed;
}

function onKeyS(pressed) {
    sPressed = pressed;
}

function onKeyD(pressed) {
    dPressed = pressed;
}

window.addEventListener("keydown", onKeyDown, false);

function onKeyDown(e) {
    var keyCode = e.keyCode;
    switch (keyCode) {
        case 87:
            //w
            onKeyW(true);
            console.log("bro");
            break;
        case 65:
            //a
            onKeyA(true);
            break;
        case 83:
            //s
            onKeyS(true);
            break;
        case 68:
            //d
            onKeyD(true);
            break;
    }
}

window.addEventListener("keyup", onKeyUp, false);

function onKeyUp(e) {
    var keyCode = e.keyCode;
    switch (keyCode) {
        case 87:
            //w
            onKeyW(false);
            console.log("bro");
            break;
        case 65:
            //a
            onKeyA(false);
            break;
        case 83:
            //s
            onKeyS(false);
            break;
        case 68:
            //d
            onKeyD(false);
            break;
    }
}
于 2013-02-13T02:32:53.253 に答える