如何在蛇體內分離div（Snake JS游戲）

Question

發現編寫JS游戲（Snake）時遇到問題。 無法在蛇體內分離div。 現在，我實現了蛇體的一部分沿一個方向移動，而另一部分則向另一個方向移動（每個塊的左上方更新相同）。 我想像一條蛇一樣將它們分開，但不知道該怎么做。 有人可以給些建議嗎？ 這是我的js代碼（僅適用於chrome）：

// 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);

這是codepen http://codepen.io/Kuzyo/pen/esFbf
提前致謝。

Answer 1

也許這對您有幫助，如何分隔蛇中的div。

（順便說一句，我已經使用了jQuery）

我所做的是為每個身體的和平度添加一個div ，並為其賦予相同的width ， height ， position等。

然后，我的移動函數被setInterval為1秒調用。 它循環通過我作為身體的所有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();
    });
}

希望有道理。

看我的演示 。