Question

这是我正在制作的大型游戏的简化部分。当前的运动是箭头键，但我希望它们是WASD。我在此上看到了youtube，这就是我的制作方法。我已经对其进行了扩展，但是不知道如何更改为WASD。我从键码左箭头了解基本的键码以及此人的使用方式吗？向下箭头键编码。

<!DOCTYPE html>
<html>
<head>

<script>
var ctx = null;
var gameMap = [
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 1, 1, 1, 0, 1, 1, 1, 1, 0,
    0, 1, 0, 0, 0, 1, 0, 0, 0, 0,
    0, 1, 1, 1, 1, 1, 1, 1, 1, 0,
    0, 1, 0, 1, 0, 0, 0, 1, 1, 0,
    0, 1, 0, 1, 0, 1, 0, 0, 1, 0,
    0, 1, 1, 1, 1, 1, 1, 1, 1, 0,
    0, 1, 0, 0, 0, 0, 0, 1, 0, 0,
    0, 1, 1, 1, 0, 1, 1, 1, 1, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];
var tileW = 40, tileH = 40;
var mapW = 10, mapH = 10;
var currentSecond = 0, frameCount = 0, framesLastSecond = 0, lastFrameTime = 0;

var keysDown = {
    37 : false,
    38 : false,
    39 : false,
    40 : false
};

var player = new Character();

function Character()
{
    this.tileFrom   = [1,1];
    this.tileTo     = [1,1];
    this.timeMoved  = 0;
    this.dimensions = [30,30];
    this.position   = [45,45];
    this.delayMove  = 700;
}
Character.prototype.placeAt = function(x, y)
{
    this.tileFrom   = [x,y];
    this.tileTo     = [x,y];
    this.position   = [((tileW*x)+((tileW-this.dimensions[0])/2)),
        ((tileH*y)+((tileH-this.dimensions[1])/2))];
};
Character.prototype.processMovement = function(t)
{
    if(this.tileFrom[0]==this.tileTo[0] && this.tileFrom[1]==this.tileTo[1]) { return false; }

    if((t-this.timeMoved)>=this.delayMove)
    {
        this.placeAt(this.tileTo[0], this.tileTo[1]);
    }
    else
    {
        this.position[0] = (this.tileFrom[0] * tileW) + ((tileW-this.dimensions[0])/2);
        this.position[1] = (this.tileFrom[1] * tileH) + ((tileH-this.dimensions[1])/2);

        if(this.tileTo[0] != this.tileFrom[0])
        {
            var diff = (tileW / this.delayMove) * (t-this.timeMoved);
            this.position[0]+= (this.tileTo[0]<this.tileFrom[0] ? 0 - diff : diff);
        }
        if(this.tileTo[1] != this.tileFrom[1])
        {
            var diff = (tileH / this.delayMove) * (t-this.timeMoved);
            this.position[1]+= (this.tileTo[1]<this.tileFrom[1] ? 0 - diff : diff);
        }

        this.position[0] = Math.round(this.position[0]);
        this.position[1] = Math.round(this.position[1]);
    }

    return true;
}

function toIndex(x, y)
{
    return((y * mapW) + x);
}

window.onload = function()
{
    ctx = document.getElementById('game').getContext("2d");
    requestAnimationFrame(drawGame);
    ctx.font = "bold 10pt sans-serif";

    window.addEventListener("keydown", function(e) {
        if(e.c>=37 && e.keyCode<=40) { keysDown[e.keyCode] = true; }
    });
    window.addEventListener("keyup", function(e) {
        if(e.keyCode>=37 && e.keyCode<=40) { keysDown[e.keyCode] = false; }
    });
};

function drawGame()
{
    if(ctx==null) { return; }

    var currentFrameTime = Date.now();
    var timeElapsed = currentFrameTime - lastFrameTime;

    var sec = Math.floor(Date.now()/1000);
    if(sec!=currentSecond)
    {
        currentSecond = sec;
        framesLastSecond = frameCount;
        frameCount = 1;
    }
    else { frameCount++; }

    if(!player.processMovement(currentFrameTime))
    {
        if(keysDown[38] && player.tileFrom[1]>0 && gameMap[toIndex(player.tileFrom[0], player.tileFrom[1]-1)]==1) { player.tileTo[1]-= 1; }
        else if(keysDown[40] && player.tileFrom[1]<(mapH-1) && gameMap[toIndex(player.tileFrom[0], player.tileFrom[1]+1)]==1) { player.tileTo[1]+= 1; }
        else if(keysDown[37] && player.tileFrom[0]>0 && gameMap[toIndex(player.tileFrom[0]-1, player.tileFrom[1])]==1) { player.tileTo[0]-= 1; }
        else if(keysDown[39] && player.tileFrom[0]<(mapW-1) && gameMap[toIndex(player.tileFrom[0]+1, player.tileFrom[1])]==1) { player.tileTo[0]+= 1; }

        if(player.tileFrom[0]!=player.tileTo[0] || player.tileFrom[1]!=player.tileTo[1])
        { player.timeMoved = currentFrameTime; }
    }

    for(var y = 0; y < mapH; ++y)
    {
        for(var x = 0; x < mapW; ++x)
        {
            switch(gameMap[((y*mapW)+x)])
            {
                case 0:
                    ctx.fillStyle = "#685b48";
                    break;
                default:
                    ctx.fillStyle = "#5aa457";
            }

            ctx.fillRect( x*tileW, y*tileH, tileW, tileH);
        }
    }

    ctx.fillStyle = "#0000ff";
    ctx.fillRect(player.position[0], player.position[1],
        player.dimensions[0], player.dimensions[1]);

    ctx.fillStyle = "#ff0000";
    ctx.fillText("FPS: " + framesLastSecond, 10, 20);

    lastFrameTime = currentFrameTime;
    requestAnimationFrame(drawGame);
}
</script>

</head>
<body>

<canvas id="game" width="400" height="400"></canvas>

</body>
</html>

Answer 1

（已移动以回答格式问题。）

您可以通过以下方式自己回答这个问题：

目标：不要寻找箭头键，而要寻找WASD。

标识用于处理按键事件（提示）的代码。似乎您已经将其范围缩小了很多。
查看键代码（提示）是否与您实际要使用的键匹配。您已经确定他们没有，但是如何进行更改？
在网络上搜索“ js箭头键代码”，看是否与代码中的任何内容对齐。（是）
找到您要使用的键的键代码。（也许使用与上述相同的参考？）
适当地映射到箭头键已经处理的动作。（例如，向上箭头很有可能是w，所以您希望当前的向上箭头处理程序为w触发。
???
利润。

TL; DR：您基本上已经完成了-缺少的链接是关键代码。 BAM 自救王子/小偷。

Answer 2

如何在区块中添加else if：

window.addEventListener("keydown", function(e) {
        if(e.c>=37 && e.keyCode<=40) { keysDown[e.keyCode] = true; }
    });

window.addEventListener("keydown", function(e) {
        if(e.c>=37 && e.keyCode<=40) { 
           keysDown[e.keyCode] = true; 
        } else if(e.c === 87) {
         // This is the key for "W"
         }
        });

如何使用类似的方法将方向键从箭头键更改为WASD？

2 个答案: