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

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

javascript jquery

Snake javascript上下移动，使块大于5px,javascript,jquery,Javascript,Jquery,下面是JSFIDLE示例和代码- var move, inter; inter = setInterval(move = function() { var dir = $(".snake").data('dir'); var snake = $('.snake'); var food = $('.food'); if(dir == 'top') { snake.css({"top": snak

下面是JSFIDLE示例和代码-

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

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

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

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

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

我想你的问题是“为什么我的蛇看起来不像其他与蛇相关游戏中的普通蛇？”。要制造一条蛇，它不能只有一个位置（蛇的位置）。蛇通常由几个部分组成。你打算如何追踪蛇的弯曲处？

所以，我猜你在这里尝试制作一款诺基亚风格的蛇游戏，你不能用一个Div来完成，因为它只能是一个矩形；您必须使用一个div数组（如果您想使用这里使用的方法），并在循环中逐个更新它们的位置

如果您还没有弄明白，我会在下班后添加一个代码示例

编辑：：

好的，我对你的代码做了一些修改，现在你有了一条蛇的尾巴，完整的代码如下（解释如下）：

说明：

好的，也许这会有帮助，我已经修改了你的代码，现在它有一个名为

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

if（snakePosition.top==foodPosition.top&&snakePosition.left==foodPosition.left）{
//这里我们得到了蛇身阵的顶端位置（未被占据）
var指数=蛇身长度；
//在这里，我们向content div添加了一个新的div，具有唯一的id（snakevody0）
//（蛇身）等
$（“#内容”）。追加（“”）；
//在这里，我们用引用填充上面for循环中使用的数组
//给我们的蛇形组。
蛇体[指数]=$（“#蛇体”+指数）；
css（{“左”：随机数+1+“px”，“顶”：随机数+1+“px”}）；
}

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

如果您在这方面有任何问题，请告诉我。

因此，我猜您正在尝试制作一款诺基亚风格的蛇游戏，您不能使用单个Div，因为它只能是一个矩形；您必须使用一个div数组（如果您想使用这里使用的方法），并在循环中逐个更新它们的位置