snakegame-javascriptのバグを修正するのに役立ちます

Question

私はjavascriptを初めて使っています。私は蛇のゲームを作成しようとしていました。 move関数では、ヘビはそれ自身で要素を追加するようです。

スネークが[20,20]の位置にある場合、移動を開始すると、スネークは[21,20]の位置に達すると、単独で要素を追加します。私はヘビに1つしか持たないように見えることができません。あなたが任意の方向なしで蛇を移動しているのinit（）関数で

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

。 は、キー押下イベントが発生した後、すなわちgetSnakeDir（）関数の内部でmoveSnake（）関数を呼び出す。

あなたはすぐにロードした後に蛇を移動したい場合は、デフォルトの方向に