snakegame-javascript의 버그 수정에 도움이 필요합니다.

Question

저는 javascript를 처음 사용하며 뱀 게임을 만들려고했습니다. 이동 함수에서 뱀은 자체적으로 요소를 추가하는 것처럼 보입니다.

뱀이 [20,20]의 위치를 ​​가지고 있고, 움직이기 시작할 때 [21,20] 위치에 도달하면 뱀은 그 자체로 요소를 추가합니다. 나는 뱀이 오직 하나만 가질 수있는 방법을 생각할 수 없다. 초기화에서

자바 스크립트

//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() 함수를 호출합니다. 당신이 기본 방향을