Snake javascript，上下移动，使块大于5px

Question

这里是jsfiddle示例 - http://jsfiddle.net/6bKHc/120/和代码 -

    var move, inter;
    inter = setInterval(move = function() {
        var dir = $(".snake").data('dir');
        var snake = $('.snake');
        var food = $('.food');
        if(dir == 'top') {
            snake.css({"top": snake.position().top + 5 + "px"});
            if(snake.width() > 5) {
                snake.css({"width": snake.width() - 5 + "px", "height": snake.height() + 5 + "px"});   
            }
        }
        if(dir == 'bottom') {
            snake.css({"top": snake.position().top - 5 + "px"});
            if(snake.width() > 5) {
                snake.css({"width": snake.width() - 5 + "px", "height": snake.height() + 5 + "px"});   
            }            
        }
        if(dir == 'left') {
            snake.css({"left": snake.position().left + 5 + "px"});
            if(snake.height() > 5) {
                snake.css({"width": snake.width() + 5 + "px", "height": snake.height() - 5 + "px"});   
            }            
        }
        if(dir == 'right') {
            snake.css({"left": snake.position().left - 5 + "px"});
            if(snake.height() > 5) {
                snake.css({"width": snake.width() + 5 + "px", "height": snake.height() - 5 + "px"});   
            }              
        }
        var snakePosition = snake.position();
        var foodPosition = food.position();
        var randomNum = Math.ceil(Math.random()*40);
        var randomNumber = randomNum*5;
        console.log(snakePosition.top + " - snake top + left - " + snakePosition.left);
        console.log(foodPosition.top + " - snake top + left - " + foodPosition.left);        
        if(snakePosition.top == foodPosition.top && snakePosition.left == foodPosition.left) {
            console.log(randomNumber);
            snake.css({"width": snake.width() + 55 + "px"});   
            food.css({"left": randomNumber+1+"px", "top": randomNumber+1+"px"});            
        }
    }, 200);
$(document).keydown(function(event){
    if(event.which == 40) {
        $(".snake").data('dir','top');
    } else if(event.which == 39) {
        $(".snake").data('dir','left');           
    } else if(event.which == 37) {
        $(".snake").data('dir','right');        
    } else if(event.which == 38) {
        $(".snake").data('dir','bottom');    
    };     
});​

当蛇变大时，它会自动使块也变大，我的意思是当你向下移动时它不会在一侧保持5px。我不确定如何描述它，但只是开始游戏并尝试吃食物然后移动，你会明白我的意思。

Answer 1

所以，我猜你是想在这里制作诺基亚风格的蛇游戏，你不能用一个Div来做，因为它只能是一个矩形;你将不得不使用一个Div数组（如果你想使用你在这里使用的方法）并在一个循环中逐个更新它们的位置。

如果你还没弄清楚，我会在下班后添加一个代码示例。

修改::

好的，我已经对你的代码做了一些修改，所以你现在已经在你的蛇上留下了一个尾巴，完整的代码如下（下面的解释）：

    var move, inter;
    var snakeBody= [];

    // Main Loop
    inter = setInterval(move = function() {
        var dir = $(".snake").data('dir');
        var snake = $('.snake');
        var food = $('.food');

        // Update body segment positions
        for (bodySeg=snakeBody.length-1;bodySeg>=0;bodySeg--){
            var lastsegment;
            if (bodySeg==0) {lastsegment=snake;} else {lastsegment=snakeBody[bodySeg-1];}

            snakeBody[bodySeg].css({"top": lastsegment.position().top});
            snakeBody[bodySeg].css({"left": lastsegment.position().left});                
        }

        // update head of the snake, depending on last pressed key
        if(dir == 'top') {
            snake.css({"top": snake.position().top + 5 + "px"});
        } 
        if(dir == 'bottom') {
            snake.css({"top": snake.position().top - 5 + "px"});          
        }
        if(dir == 'left') {
            snake.css({"left": snake.position().left + 5 + "px"});           
        }
        if(dir == 'right') {
            snake.css({"left": snake.position().left - 5 + "px"});             
        }



        // Handle Head of snake touching food
        var snakePosition = snake.position();
        var foodPosition = food.position();
        var randomNum = Math.ceil(Math.random()*40);
        var randomNumber = randomNum*5;       
        if(snakePosition.top == foodPosition.top && snakePosition.left == foodPosition.left) {
            var index = snakeBody.length;
            $("#content").append("<div id='snakebody"+index+"' class='snakebodycss'></div>");
            snakeBody[index]=$("#snakebody"+index);
            food.css({"left": randomNumber+1+"px", "top": randomNumber+1+"px"});            
        }
    }, 200);
// update last pressed key
$(document).keydown(function(event){
    if(event.which == 40) {
        $(".snake").data('dir','top');
    } else if(event.which == 39) {
        $(".snake").data('dir','left');           
    } else if(event.which == 37) {
        $(".snake").data('dir','right');        
    } else if(event.which == 38) {
        $(".snake").data('dir','bottom');    
    } else if(event.which == 13) {
        console.log(snakeBody)
    }        
});​

Html没有改变：

<div id="content">
 <div class="snake">
 </div>
 <div class="food">
 </div>
</div>​

我为身体部分添加了另一个css类：

#content {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  float: left;    
}

#content .snake {
  background: green;
  width: 5px;
  height: 5px;
  display: inline;
  position: absolute;  
  z-index: 10;
}

#content .snakebodycss {
  background: red;
  width: 5px;
  height: 5px;
  display: inline;
  position: absolute;  
  z-index: 10;
}

#content .food {
  width: 5px;
  height: 5px;
  background: orange;  
  position: absolute;    
}

---

解释：

好吧，也许这会有所帮助，我已经修改了你的代码，所以它现在有一个名为snakeBody[]的数组，它可以跟踪蛇中的新段，如果你看一下新的for循环：< / p>

   // This for loop will run through the snakeBody array backwards, from the highest index to 0
   // This is to allow us to set each segment to the location of the next closest to the head 
   // each loop
   for (bodySeg=snakeBody.length-1;bodySeg>=0;bodySeg--){
        //We need a reference the the previous segment to set the one we are currently inspecting
        // It will either be another segment or the head of the snake
        var lastsegment;
        if (bodySeg==0) {lastsegment=snake;} else {lastsegment=snakeBody[bodySeg-1];}

        snakeBody[bodySeg].css({"top": lastsegment.position().top});
        snakeBody[bodySeg].css({"left": lastsegment.position().left});                
    }

这就是将每个循环的尾部位置更新到下一个位置。

   if(snakePosition.top == foodPosition.top && snakePosition.left == foodPosition.left) {
        // Here we get the top position (unoccupied) of our snake body array
        var index = snakeBody.length;
        // Here we are adding a new div to the content div, with a unique id (snakevody0)
        // (snakebody1) etc etc 
        $("#content").append("<div id='snakebody"+index+"' class='snakebodycss'></div>");
        // Here we are populating the array we use in the above for loop with refrences
        // to our snake segment divs.
        snakeBody[index]=$("#snakebody"+index);
        food.css({"left": randomNumber+1+"px", "top": randomNumber+1+"px"});            
    }

这就是将bodysgnts附加到DOM并将它们的引用存储在数组中供以后使用。

如果你遇到任何麻烦，请告诉我。

Answer 2

解决方案并不简单。当它改变方向时，你不应该改变蛇的高度和宽度，你需要创建第二条蛇尾，当你增加第一条蛇尾的长度时它会缩小。因此，如果你向左走，然后按下，创建一个新的蛇尾，一个单位大，向下行进，然后减少1个单位的旧尾巴，向下增加一个单位的新尾巴，并减少一个单位宽度的旧尾巴等...

这个过程可能需要跟踪几个单独的尾部，你可能会在一条蛇的长度内多次改变方向。

Answer 3

我认为你的问题是“为什么我的蛇看起来不像其他蛇类游戏的常规蛇？”。要制作蛇，它不仅可以有一个位置（snakePosition）。蛇通常由几个部分组成。你怎么跟踪蛇弯曲的位置？