0

まず第一に、こんにちはみんな：-]
私は私のプロジェクトに問題があります-HTML5キャンバスのゲーム。あなたが何をしなければならないかは教えませんが、私の動きに未知の問題があります。

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で移動せず、右の壁または下の壁に移動します...
コードを見ていますがなぜ正方形がこの間違いを犯すのか理解できません...
誰かが私が間違っていることを教えてもらえますか？:)

編集：マップに2D配列を使用しています：
1 =壁、2 =移動できるブロック、0 =空きスペース（移動できる場所）、3-移動できないブロックですが、次の場合にアクティブ化できますあなたは近くにいます。

4

1 に答える 1

2

それはあなたがキープレスをどのように扱っているかによるものです。現在は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
    }
}

これを示す実例

これは、キーが押されるたびに、キーコードと同じインデックス番号を持つ要素を配列に設定してtrueに設定します。キーを押すのをやめると、falseに設定されます。次に、プレイヤーの動きを通常処理する場所を確認できます。これにより、ほぼ無制限の数のキーを押すことができます。

于 2013-03-22T21:12:01.400 に答える