javascript - 贪吃蛇游戏游戏结束

Question

我正在做一个贪吃蛇游戏，我想在宇宙飞船坠毁时显示游戏结束。我希望游戏结束图像出现并执行类似漂浮在棋盘游戏中心的操作。

我认为我必须放在这里，但不知道该怎么做。

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

由于您使用的是 jQuery，因此您可以调用 modal dialog

if (snake.detectCollision(snake.velocity) === true) {
  $("#dialog").dialog("open"); // here
  ...
}

创建<div id="dialog">...</div>后，请参阅链接示例。

注:不错的游戏。您应该禁用 180° 旋转，即向左移动的宇宙飞船不应对向右箭头使用react。