Question

屏幕上没有显示任何内容。这就是我到目前为止所做的：

在index.html中：

<html>
<body>
<canvas id="canvas" width="480" height="480" style="background-color:grey;"></canvas>
<script src="script.js"></script>
</body>
</html>

在script.js中：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var player = {
    x1: 30,
    y1: 0,
    x2: 20,
    y2: 0,
    x3: 10,
    y3: 0,
    x4: 0,
    y4: 0,
    width: 10,
    height: 10
}

var keys = [];
var speed = 10;

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

window.addEventListener("keyup", function(e){
    delete keys[e.keyCode];
}, false);


function update(){
    if(keys[37]){
        if(!(player.x1 = 0)){
            if(!(player.x2 = player.x1 - player.width)){
                player.x4 = player.x3;
                player.y4 = player.y3;
                player.x3 = player.x2;
                player.y3 = player.y2;
                player.x2 = player.x1;
                player.y2 = player.y1;
                player.x1 -= player.width;
            }
        }
    }
    if(keys[39]){
        if(!(player.x1 = canvas.width - player.width)){
            if(!(player.x2 = player.x1 + player.width)){
                player.x4 = player.x3;
                player.y4 = player.y3;
                player.x3 = player.x2;
                player.y3 = player.y2;
                player.x2 = player.x1;
                player.y2 = player.y1;
                player.x1 += player.width;
            }
        }
    }
    if(keys[38]){
        if(!(player.y1 = 0)){
            if(!(player.y2 = player.y1 - player.height)){
                player.x4 = player.x3;
                player.y4 = player.y3;
                player.x3 = player.x2;
                player.y3 = player.y2;
                player.x2 = player.x1;
                player.y2 = player.y1;
                player.y1 -= player.height;
            }
        }
    }
    if(keys[40]){
        if(!(player.y1 = canvas.height - player.height)){
            if(!(player.y2 = player.1 + player.height)){
                player.x4 = player.x3;
                player.y4 = player.y3;
                player.x3 = player.x2;
                player.y3 = player.y2;
                player.x2 = player.x1;
                player.y2 = player.y1;
                player.y1 += player.height;
            }
        }
    }
}

function render(){
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = "red";
    context.fillRect(player.x1, player.y1, player.width, player.height);
    context.fillRect(player.x2, player.y2, player.width, player.height);
    context.fillRect(player.x3, player.y3, player.width, player.height);
    context.fillRect(player.x4, player.y4, player.width, player.height);
}

function gameLoop(){
    update();
    render();
}

setInterval(function(){
    gameLoop();
}, 500);

我希望你能告诉我这个代码要做什么。请问任何必要的问题。为了能够发布这个，我需要更多的单词来计算代码。本段将重复进行。

Answer 1

控制台提到

未捕获的SyntaxError：意外的数字

这里

if(keys[40]){
    if(!(player.y1 = canvas.height - player.height)){
        if(!(player.y2 = player.1 + player.height)){

更改为

if(keys[40]){
    if(!(player.y1 = canvas.height - player.height)){
        if(!(player.y2 = player.y1 + player.height)){

我想在HTML 5中制作蛇游戏。出了什么问题？

1 个答案: