javascript - 杀蛇不工作状态加物体不工作属性

Question

我正在通过 javascript 制作蛇游戏，我遇到了 2 个问题。

第一个问题:当他的 X 和 Y 碰到 Canvas 的边界时，我设置了“杀死”蛇的条件，但我不明白为什么它不起作用。

第二个问题:我的“snake”方法“draw”工作正常，但如果我输入“var i = snake.dlzka”而不是“var i = snake.snake_body.length”，则会输入错误: 无法读取未定义的属性“x”。

var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 650;
var ctx = canvas.getContext("2d");

var dotW = 10;
var dotH = 10;
var direction = "right";  //smer pohybu hadika

var snake = {
    dlzka: 5,
    snake_body: [],
    
    arraySpawn: function(){
        for(var i = snake.dlzka; i >= 0; i--){
            this.snake_body.push({
                x: i*dotW,
                y: 0
            });
        }
    },
    
    
    draw: function(){
        ctx.clearRect(0,0, canvas.width, canvas.height);
        for(var i = snake.dlzka; i>0; i--){
            //alert(snake.snake_body.length);
            ctx.fillStyle = "blue";
            ctx.fillRect(snake.snake_body[i].x, snake.snake_body[i].y, dotW, dotH);
        }
        snake.move();
    },
    
    
    move: function(){
        var first = snake.snake_body[0];
        var first_x = first.x;
        var first_y = first.y;
        
        
        
        switch(direction){
            case "right":
                first_x += 10;
                break;
                
            case "left":
                first_x -= 10;
                break;
                
            case "up":
                first_y -= 10;
                break;
                
            case "down":
                first_y += 10;
                break;
        }
        
        this.snake_body.pop();
        this.snake_body.unshift({
            x: first_x,
            y: first_y
        });
        
        if((first_x == canvas.width || 0) || (first_y == canvas.height || 0)){
            var restart = confirm("Do you want to play again?");
            if(restart){
                clearInterval(intervalID);
                snake.snake_body = [];
                snake.arraySpawn();
                intervalID = setInterval(function(){snake.draw()}, 33);
            }
        }
    },
    
    
    update_direction: function(e){
        var key = e.keyCode;
        
        if(key == 37 && direction !== "right"){
            direction = "left";
        }else if(key == 38 && direction !== "down"){
            direction = "up";
        }else if(key == 39 && direction !== "left"){
            direction = "right";
        }else if(key == 40 && direction !== "up"){
            direction = "down";
        }
    }
};


snake.arraySpawn();
var intervalID = setInterval(function(){snake.draw()}, 33);
window.onkeydown = snake.update_direction;

canvas{
    border: 1px solid black;
}

<canvas id="canvas"></canvas>

fiddle :http://jsfiddle.net/scarface/pdz4k8dj/20/

Answer 1

第一个问题源于代码片段(first_x == canvas.width || 0) 基于operator precedence规则和从左到右的评估，这评估为

((first_x == canvas.width) || 0)

这不是你想要的。尝试

(first_x == canvas.width || first_x == 0)

相反，但请尝试阅读规则以确保您理解原因。请注意，测试要求 Canvas 是蛇移动的 x(或 y)量的精确倍数，并且可以说它可以更好地写成

(first_x >= canvas.width || first_x <= 0)

不要忘记更改 y 值测试，因为它有完全相同的问题。

第二个问题是由于没有考虑到数组索引是从零开始的。所以

for(var i = snake.snake_body.length; i>0; i--)

从数组末尾(产生错误)迭代回到第二个元素。将其更改为

for(var i = snake.snake_body.length - 1; i >= 0; i--)

从事 fiddle 工作。