1

这是 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。我不知道如何描述它，但只要开始游戏并尝试吃食物然后移动，你就会明白我的意思。

4

3 回答 3

4

所以，我猜你想在这里做一个诺基亚风格的蛇游戏，你不能用一个 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;    
}

说明：

​</p>

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

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

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

如果您对此有任何问题，请告诉我。

于 2012-06-22T12:43:28.287 回答
1

解决方案并不简单。当它改变方向时，您不应该改变蛇的高度和宽度，您需要创建第二条蛇尾，随着您增加第一条蛇尾的长度，它的尺寸会减小。所以如果你向左走，你按下，创建一个新的蛇尾，它大一个单位，向下移动，然后将旧尾巴减少 1 个单位，向下增加一个单位，向下增加一个单位，然后将旧尾巴宽度减少一个单位ETC...

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

于 2012-06-22T12:40:22.500 回答
1

我假设您的问题是“为什么我的蛇看起来不像其他蛇相关游戏中的普通蛇？”。要制作一条蛇，它不能只有一个位置（snakePosition）。一条蛇通常由几个部分组成。您将如何跟踪蛇弯曲的位置？

于 2012-06-22T12:40:26.967 回答