0

首先大家好:-]
我的项目有问题 - HTML5 Canvas 中的游戏。我不会告诉你你必须做什么，但我的动作有未知问题。

索引.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>

}

主.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 移动，它会移动到右墙或下墙......
我正在查看我的代码，但是我不明白为什么广场会犯这个错误......
有人能告诉我我做错了什么吗？:)

编辑：我在地图上使用 2d 数组：
1 = 墙，2 = 可以移动的方块，0 = 可用空间（你可以移动的地方），3 - 你不能移动的方块，但你可以在什么时候激活它你在附近。

4

1 回答 1

2

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

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

演示这一点的现场示例

这样做是每次按下一个键时，您将数组中的一个元素设置为与键代码相同的索引号为真。当您停止按下该键时，其设置为 false。然后你可以检查你通常处理玩家移动的地方。这使您可以按下几乎无限数量的键。

于 2013-03-22T21:12:01.400 回答