스네이크 본문에서 div를 분리하는 방법 (Snake JS 게임)

Question

JS 게임 (Snake)을 작성하는 중 문제가 발생했습니다. 뱀 몸에서 divs를 분리 할 수 ​​없습니다. 이제 나는 뱀의 몸의 한 부분이 한 방향으로 움직이지만 다른 하나는 다른 블록으로 움직인다는 것을 알게되었다. 나는 그들을 뱀처럼 떼어 내고 싶지만 그것을 어떻게 할 지 모릅니다. 누군가 조언을 해줄 수 있습니까? 여기

// field object 
var fieldObj = { 
    field: document.getElementById("field"), 
    w: 480, 
    h: 580 
}, 
// snake object 
snakeObj = { 
    snakeBody: document.getElementsByClassName("snake-body"), 
    p: { 
     x: 0, // position x 
     y: 0 // position y 
    }, 
    v: { 
     x: 1, // velocity(here you can change speed) 
     y: 1 
}, 
keys: { 
    up: null, 
    l: null, 
    r: null, 
    down: null 
    }, 
    update: function() { 
    // this.snake.style.top = this.p.x + "px"; 
    // this.snake.style.left = this.p.y + "px"; 

    if (this.keys.down) { 
     this.p.x += this.v.x; 
    } else if (this.keys.up) { 
     this.p.x -= this.v.x; 
    } else if (this.keys.r) { 
     this.p.y += this.v.y; 
    }else if (this.keys.l) { 
     this.p.y -= this.v.y; 
    } 
    for (var i = this.snakeBody.length - 1; i >= 0; i--) { 
     this.snakeBody[i].style.top = this.p.x + "px"; 
     this.snakeBody[i].style.left = this.p.y + "px"; 
    } 
    } 
}, 
// game object 
gameObj = { 
    getRandom: function(num) { 
     return Math.floor(Math.random() * num); 
    }, 
    createSnakeTarget: function() { 
     var snakeTarget = document.createElement("div"); 
      snakeTarget.className = "snake-target"; 
      snakeTarget.style.top = this.getRandom(fieldObj.h) + "px"; 
      snakeTarget.style.left = this.getRandom(fieldObj.w) + "px"; 

      fieldObj.field.appendChild(snakeTarget); 
    }, 
    stopGame: function() { 
     var stopMessage = document.createElement("div"); 
      stopMessage.className = "stop-message"; 
      stopMessage.style.background = "white"; 

      fieldObj.field.appendChild(stopMessage); 
      //TODO: write message to stopGame 
    } 
}; 

    gameObj.createSnakeTarget(); 
//gameObj.stopGame(); 

    // Crome works only with keydown and keyup 
    window.addEventListener('keydown', function() { 
    // before changing direction you have to put previous direction to false 
    if (event.keyCode == 38) { 
     snakeObj.keys.up = true; 
     snakeObj.keys.down = false; 
    } else if (event.keyCode == 40) { 
     snakeObj.keys.down = true; 
     snakeObj.keys.up = false; 
    } else if (event.keyCode == 39) { 
     snakeObj.keys.r = true; 
     snakeObj.keys.up = false; 
     snakeObj.keys.down = false; 
    } else if (event.keyCode == 37) { 
     snakeObj.keys.l = true; 
     snakeObj.keys.r = false; 
     snakeObj.keys.up = false; 
     snakeObj.keys.down = false; 
    } 
    }, false); 
//TODO: add event hendler to click to some button 
window.addEventListener("load", function gameLoop() { 
    snakeObj.update(); 
    requestAnimationFrame(gameLoop); 
    }, false); 

가 사전에 http://codepen.io/Kuzyo/pen/esFbf
감사 codepen된다 여기 내 JS 코드 (전용 크롬에서 작동)입니다.

Answer 1

어쩌면 당신이 당신의 뱀에 divs를 어떻게 분리 할 수 ​​있는지 당신에게 도움이 될 것입니다. (나는 방법으로 jQuery를 사용했다)

는

내가 무슨 짓을 각 신체 평화에 대한 div를 추가하고 그들에게 같은 width, height, position 등

을주고 그리고 내가 가진 내 1 초의 setInterval로 호출되는 이동 함수입니다. 그것은 몸을 가지고있는 div의 모든 골짜기를 반복합니다. if($(this).index() == 0){은 첫 번째 본체 블록 전용입니다. 다른 모든 블록은 첫 번째 블록이 있던 위치를 따릅니다.

xdir 및 ydir은 화살표 키 중 하나를 클릭 할 때 업데이트됩니다.

var speed = 10; 
    var xdir = 0; 
    var ydir = 1; 

function handle_movement(){ 

    // Loop trough body divs 
    $('div.body').each(function(){ 
     // Get x and y position 
     var x = parseInt($(this).css('left')); 
     var y = parseInt($(this).css('top')); 

     // Only move the first div in the right direction 
     if($(this).index() == 0){ 
      $(this).css({'left': x + (xdir * speed) + 'px','top': y + (ydir * speed) + 'px'}); 
     } else { 
      // All other divs follow their previous sibling 
      var prevleft = $(this).prev('.body').data('left'); 
      var prevtop = $(this).prev('.body').data('top'); 
      $(this).css({'left':prevleft, 'top':prevtop}); 
     } 
     // Keep track of where the body has gone 
     $(this).data({'left':x, 'top':y}).show(); 
    }); 
} 

희망적입니다.

내 demo을 참조하십시오.