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();
    });
}

希望它有意义。

查看我的demo。

我怎样才能将蛇体中的div分开（Snake JS游戏）

1 个答案: