蛇游戏结束

Question

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

};

The complete code

Answer 1

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, ie spaceship moving to the left should not react to right arrow.