Question

首先你好男人： - ]
我的项目有问题 - HTML5 Canvas中的一个游戏。我不会告诉你你要做什么，但我的动作有未知问题。

的index.html {

<!DOCTYPE HTML>
<html>
    <head>
        <title>StickySquares</title>
        <script src="scripts/main.js"></script>
        <style>
            #gameArea{
                background-image: url('images/bkg.jpg');
            }
        </style>
    </head>
    <body onload="init();">
        <div id="fastimages" hidden="hidden">
            <img id="bodyIMG" src="images/body.png" />
            <img id="wallIMG" src="images/wall.png" />
        </div>
        <canvas id="gameArea" width="640" height="480">
            ERROR... Update your browser!
        </canvas>
        <div id="debug"></div>
    </body>
</html>

}

main.js {

var myCanvas, keyPressed = true;
var sprBody, sprWall;
var map = [];
var figures = [];
var debugtxt;
function unpressKey(){
    keyPressed = false;
}
function debugText(){
    debugtxt = document.getElementById("debug");
    var text = "";
    for(var y=0;y<15;y+=1){
        for(var x=0;x<20;x+=1){
            text += map[y][x].toString();
        }
        text += "<br />";
    }
    debugtxt.innerHTML = text;
}
function playerUpdate(button){
    // 37 - left, 38 - up, 39 - right, 40 - down
    if(!keyPressed){
        for(var y=0;y<15;y+=1){
            for(var x=0;x<20;x+=1){
                if(map[y][x]==2){
                    switch(button.keyCode){
                        case 37: // Left
                            if(map[y][x-1]==0){
                                map[y][x]=0;
                                map[y][x-1]=2;
                            }
                        break;
                        case 38: // Up
                            if(map[y-1][x]==0){
                                map[y][x]=0;
                                map[y-1][x]=2;
                            }
                        break;
                        case 39: // Right
                            if(map[y][x+1]==0){
                                map[y][x]=0;
                                map[y][x+1]=2;
                            }
                        break;
                        case 40: // Down
                            if(map[y+1][x]==0){
                                map[y][x]=0;
                                map[y+1][x]=2;
                            }
                        break;
                    }
                }
            }
        }
    }
    debugText();
}
function draw(){
    myCanvas.clearRect(0, 0, 640, 480);

    for(var y=0;y<15;y+=1){
        for(var x=0;x<20;x+=1){
            if(map[y][x]==1){
                myCanvas.drawImage(sprWall, x*32, y*32);
            }else{
                if(map[y][x]==2 || map[y][x]==3){
                    myCanvas.drawImage(sprBody, x*32, y*32);
                }
            }
        }
    }
}
function init(){
    myCanvas = document.getElementById("gameArea").getContext("2d");
    sprBody = document.getElementById("bodyIMG");
    sprWall = document.getElementById("wallIMG");
    for(var firstIndex=0;firstIndex<15;firstIndex+=1){
        map[firstIndex] = [];
        figures[firstIndex] = [];
        for(var secondIndex=0;secondIndex<20;secondIndex+=1){
            map[firstIndex][secondIndex] = 0;
            figures[firstIndex][secondIndex] = [];
        }
    }
    for(var x=0;x<20;x+=1){
        map[0][x] = 1;
        map[14][x] = 1;
    }
    for(var y=0;y<15;y+=1){
        map[y][0] = 1;
        map[y][19] = 1;
    }
    map[2][2] = 3;
    map[7][9] = 2;

    window.addEventListener("keyup", playerUpdate, false);
    window.addEventListener("keydown", unpressKey, false);

    setInterval(draw, 1000 / 60);
}

}

当我测试我的游戏时，当我按下右侧和向下箭头键时，方块不会随着+1移动，它会移动到右侧墙壁或下方墙壁上。
我正在查看我的代码，但我无法理解为什么广场会犯这个错误...
有人能告诉我我做错了什么吗？：）

编辑：我正在使用二维数组作为地图：
1 =墙，2 =可以移动的块，0 =可用空间（你可以移动的地方），3 - 阻挡你不能移动，但你可以在你附近时激活它。

Answer 1

这是由于您处理按键的方式。现在它只能接受一个，它会覆盖以前的任何键，这就是为什么你现在只能朝一个方向前进。这就是我喜欢的方式。

var keys=[];

document.body.addEventListener("keydown", function (e) {
    keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function (e) {
    keys[e.keyCode] = false;
});

function updatePlayer(){
    if (keys[38]) {
       //up
    }

    if (keys[40]) {
       //down
    }

    if (keys[39]) {
       //right
    }

    if (keys[37]) {
       //left
    }
}

<强> Live Example Demonstrating This

这样做的每次按下一个键时，你在数组中设置一个元素，其索引号与键代码为真。当您停止按键时，其设置为false。然后你可以检查你通常处理球员运动的位置。这使您可以按下无限量的按键。

按右/向下箭头按钮时出现未知错误

1 个答案: