Question

当我按箭头键时，为什么第二个方块会消失？而不是消失第二个方格应该跟随第一个方格。我检查了每行代码，没有任何错误，我使用的浏览器是谷歌浏览器。

这是我的代码：

<!doctype html>
     <html>
    <head>
    <title></title>
    </head>
    <body>
    <canvas id="canvas" style="border:1px solid #000;"></canvas>
    <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var width = 500;
    var height = 500;
    var win = false;
    var player = {
        x:250,
        y:250,
        speed:5,
        width:100,
        height:100
    };
    var ai = {
        x:150,
        y:150,
        mox:0,
        moy:0,
        speed:1,
        width:50,
        height:50
    };
    canvas.width = width;
    canvas.height = height;
    ctx.fillRect(player.x, player.y, player.width, player.height);
    ctx.stroke();
    ctx.fillRect(ai.x, ai.y, ai.width, ai.height);
    ctx.stroke();
    function a() {
        if(player.x < ai.x && win==false) {
            ai.mox-=ai.speed;
        }
        if(player.x > ai.x && win==false) {
            ai.mox = ai.speed;
        }
        if(player.y < ai.y && win==false) {
            ai.moy -= ai.speed;
        }
        if(player.y > ai.y && win==false) {
            ai.moy = ai.speed;
        }
        canvas.width = canvas.width;
        var ctx = canvas.getContext("2d");
        ctx.fillRect(ai.x, ai.y, ai.width, ai.height);
        ctx.stroke();
    }
function move(e) {
    // alert(e.keyCode);
    if(e.keyCode==37) {
        player.x -= player.speed;
    }
    if(e.keyCode==39) {
        player.x += player.speed;
    }
    if(e.keyCode==38) {
        player.y -= player.speed;
    }
    if(e.keyCode==40) {
        player.y+=player.speed;
    }
    ai.x += ai.mox;
    ai.y += ai.moy;
    a();
    canvas.width = canvas.width;
    var ctx = canvas.getContext("2d");
    ctx.fillRect(player.x, player.y, player.width, player.height);
    ctx.stroke();
}
document.onkeydown = move;
</script>
</body>
</html>

请告诉我我的代码有什么问题。语法检查器也告诉我它在语法上是正确的。

Answer 1

这有一些问题，我稍后会谈到这些问题。要立即解决您的问题，您需要添加

ctx.fillRect(ai.x, ai.y, ai.width, ai.height);

之后

ctx.fillRect(player.x, player.y, player.width, player.height);

好的，回到问题所在。大多数HTML5画布游戏都有一个叫做每个x MS的刻度函数，你根本就没有这个。代码中还有一些其他小问题，但我认为随着您的了解，您将能够找出这些问题。祝你好运:)）

为什么第二个方块消失了

1 个答案: