需要帮助修复snakegame-javascript中的错误

Question

我是javascript的新手，我正在尝试创建一个蛇游戏。在移动功能中，蛇似乎自己添加了一个元素。

要解释一下，如果蛇的位置为[20,20]，当它开始移动时，当它到达[21,20]位置时，蛇会自行添加一个元素。我似乎无法让蛇只有一个。

的Javascript

//execute the code
$(document).ready(function () {
     init();
})

function init() {
    board.initBoard();
    drawSnake();
    moveSnake();
    getSnakeDir();
    food.createFood();

}
 var board= {
    DIM:40,

    initBoard: function() {
        for(var i=0;i<40;i++) {
            var row=$('<div class="row-' + i + '"></div>');
            for(var j=0;j<40;j++) {
                var col=('<div class="col-'+ j +'-'+ i +'"></div>');
                $(row).append(col);
            }
            $("#gameboard").append(row);
        }
    }
 }

var snake= {
    position:['20-20','21-20'],
    direction:' ',
    speed:200,

};
function drawSnake() {
    $('.col-20-20').addClass('snake');
    $('.col-21-20').addClass('snake');

}

function getSnakeDir() {

    $(document).keydown(function(event) {
        //event.preventDefault();
        if(event.which == 38) {snake.direction='u'; console.log('key up');}
        else if(event.which==39){snake.direction='r';console.log('key right');}
        else if(event.which==40){snake.direction='d';console.log('key down');}
        else if(event.which==37){snake.direction='l';console.log('key left');}
    });

}

function moveSnake() {

    var tail=snake.position.pop();
    $('.col-'+tail).removeClass('snake');
    console.log('tail is'+tail);
    var coords=snake.position[0].split('-');
    var x=parseInt(coords[0]);
    var y=parseInt(coords[1]);

    if(snake.direction=='r') {x=x+1;}
    else if(snake.direction=='d'){y=y+1;}
    else if(snake.direction=='l'){x=x-1;}
    else if(snake.direction=='u'){y=y-1;}

    var currentcoords=x+'-'+y;
    snake.position.unshift(currentcoords);
    $('.col-'+currentcoords).addClass('snake');
    //console.log(currentcoords);


 if(currentcoords==food.coords) {

    console.log('true');

    $('.col-'+food.coords).removeClass('food');

    snake.position.push(tail);

    food.createFood();
    }

        setTimeout(moveSnake,2000);

}
var food = {
coords:"",

    createFood:function() {
         var x= Math.floor(Math.random()*39)+1;
         var y= Math.floor(Math.random()*39)+1;
        var fruitCoords=x+'-'+y;
        $('.col-'+fruitCoords).addClass('food');
        food.coords=fruitCoords;

    },  

}

图片

Answer 1

在init（）函数中，你没有任何方向移动蛇。 在按键事件发生后调用moveSnake（）函数，即在getSnakeDir（）函数内部。

如果您想在加载后立即移动蛇，请设置默认方向