I'm new to javascript and I was trying to create a snake game. in the move function, the snake seems to add an element on its own.

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

To explain, if a snake has a position of [20,20], when it starts moving, as it reaches the position [21,20] the snake adds an element on its own. I can't seem how to make snake have only one.

要解释一下,如果蛇的位置为[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;

    },  

}

Picture

1 个解决方案

#1

In the init() function you are moving the snake without any direction. call the moveSnake() function after a key press event occurs i.e., inside the getSnakeDir() function.

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

If you want to move the snake immediately after loading, set a default direction

如果要在加载后立即移动蛇,请设置默认方向

#1