Snake的JavaScript，上下移动，使块大于5px(Snake javascript, moving up and down, makes the block bigger than 5px)

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

here is jsfiddle sample - http://jsfiddle.net/6bKHc/120/ and code -

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

When snakes gets bigger, it automatically makes the block also bigger, I mean when you move down it won't stay 5px in one side. I'm not sure how to describe it, but just start the game and try eating food and then moving, you will se what I mean.

最满意答案

所以，我猜你正在尝试制作一款诺基亚风格的蛇游戏，你不能用一个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没有改变：

我为身体部分添加了另一个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循环：

// 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并将其引用存储在数组中供以后使用。

如果您遇到任何问题，请告诉我。

So, I'm guessing you're trying to make a Nokia style snake game here, you cant do it with a single Div because it can only be a rectangle; you are going to have to use an array of Divs (if you want to use the method you are using here) and update their position one by one in a loop.

I'll add a code sample after work if you haven't managed to figure it out.

EDIT::

Ok, I've made some modifications to your code so you have have a tail on your snake now, the full code is as follows (Explication below):

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

The Html has not changed:

I've added another css class for the body segments:

#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; }

Explanations:

Ok, maybe this will help, I've modified your code so it now has an array called snakeBody[] which is keeping track of the new segments in the snake, if you look at the new for loop:

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

This is what is updating the tail positions each loop to the next position.

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

And that is attaching the bodysegnts to the DOM and storing their references in the array for later use.

If you're having any trouble with this let me know.

更多推荐