Question

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.

Answer 1

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:

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

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.