Reputation: 51
I'm doing a snake game and I want to display a game over when the spaceship crashes. I want that the Game Over image appears and does something like floating on the center of the boardgame.
I think that I have to place here but don't know how to do it.
var makeAStep = function() {
if (snake.detectCollision(snake.velocity) === true) {
var explosion = $('<div id="explosion"><img src="images/explosion.gif"></div>');
var newcss = {
top: parseInt($("#head").css("top").substring(0, $("#head").css("top").length - 2)) - 90 + 'px',
left: parseInt($("#head").css("left").substring(0, $("#head").css("left").length - 2)) - 61 + 'px',
position: 'absolute'
};
explosion.css(newcss);
$('#box').append(explosion);
var alertInterval = setInterval(function() {
clearInterval(alertInterval);
$('#explosion').remove();
}, 800);
clearInterval(intervalHandler);
intervalHandler == null;
return;
}
var lastItemPosition = snake.body[snake.body.length - 1].position.copy();
snake.move();
var iJustAteSomeFood = snake.getHead().isOnPosition(food.position);
if (iJustAteSomeFood == true) {
food.updateScore();
generateFood();
snake.body.push(new snakeItem(lastItemPosition));
}
snake.screenUpdate({updateFireballs: iJustAteSomeFood});
};
Upvotes: 0
Views: 570
Reputation: 32912
Since you are using jQuery, you can call modal dialog
if (snake.detectCollision(snake.velocity) === true) {
$("#dialog").dialog("open"); // here
...
}
after you create the <div id="dialog">...</div>
, see the link example.
Note: Nice game. You should disable 180° rotation, i.e. spaceship moving to the left should not react to right arrow.
Upvotes: 2