ここに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は留まりません。どう説明したらいいのかわからないけど、ゲームを始めて食べ物を食べてから動かしてみてください。