Javascript 如何为一个简单的蛇游戏添加一个结束屏幕？

我根据教程制作了一个简单的蛇游戏，并对其进行了一些修改。当您打开html文档时，游戏立即开始，这很好，但我想为游戏添加一个结尾。当你达到一定的分数时，我希望游戏停止循环，也许会出现一个结束画面，但现在我似乎能弄明白。如果有人能给我指出正确的方向，我将不胜感激

//constants
var COLS=26, ROWS=26;
// IDs
var EMPTY=0, SNAKE=1, FRUIT=2;
// directions
var LEFT=0, UP=1, RIGHT=2, DOWN = 3;
// Keykoder
var KEY_LEFT=37, KEY_UP=38, KEY_RIGHT=39, KEY_DOWN = 40;

var soundEfx;
var soundLoad = "smask2.mp3"

var grid = {

width: null,
height: null,
_grid: null,


init: function(d, c, r) {
this.width = c;
this.height = r;

this._grid = [];
for (var x=0; x < c; x++) {
this._grid.push([]);
for (var y=0; y < r; y++) {
this._grid[x].push(d);
}
}
},

set: function(val, x, y) {
this._grid[x][y] = val;
},

get: function(x, y) {
return this._grid[x][y];
}
}

var snake = {

direction: null,
last: null,
_queue: null,


init: function(d, x, y) {
this.direction = d;

this._queue = [];
this.insert(x, y);
},

insert: function(x, y) {
this._queue.unshift({x:x, y:y});
this.last = this._queue[0];
},

remove: function() {
return this._queue.pop();
}
}

function setFood() {
var empty = [];
for (var x=0; x < grid.width; x++) {
for (var y=0; y < grid.height; y++) {
if (grid.get(x, y) === EMPTY) {
empty.push({x:x, y:y});
}
}
} 
var randpos = empty[Math.floor(Math.random()*empty.length)];
grid.set(FRUIT, randpos.x, randpos.y);
}


// Game objects
var canvas, ctx, keystate, frames, score;

function main() {
canvas = document.createElement("canvas");
canvas.width = COLS*20;
canvas.height = ROWS*20;
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);

ctx.font ="12px Helvetica";

frames = 0;
keystate = {};
document.addEventListener("keydown", function(evt)
                      {
 keystate[evt.keyCode] = true;
 });
document.addEventListener("keyup", function(evt)
                     {
 delete keystate[evt.keyCode];
})

init();
loop();
}

function init() {
score = 0;

grid.init(EMPTY, COLS, ROWS);

var sp = {x:Math.floor(COLS/2), y:ROWS-1};
snake.init(UP, sp.x, sp.y);
grid.set(SNAKE, sp.x, sp.y);

setFood();
}

function loop() {
update();
draw();

 window.requestAnimationFrame(loop, canvas);
}

function update() {
frames++;

 if (keystate[KEY_LEFT] && snake.direction !== RIGHT)  snake.direction        =    LEFT;
if (keystate[KEY_UP] && snake.direction !== DOWN) snake.direction = UP;
if (keystate[KEY_RIGHT] && snake.direction !== LEFT) snake.direction = RIGHT;
 if (keystate[KEY_DOWN] && snake.direction !== UP) snake.direction = DOWN;

 if (frames%5 === 0) {
    var nx = snake.last.x;
    var ny = snake.last.y;

    switch (snake.direction) {
        case LEFT:
            nx--;
            break;
        case UP:
            ny--;
            break;
        case RIGHT:
            nx++;
            break;
        case DOWN:
            ny++;
            break;
    }

    if (0 > nx || nx > grid.width-1 ||
        0 > ny || ny > grid.height-1 ||
       grid.get(nx, ny) === SNAKE
       )

        {
            return init();
        }

    if (grid.get(nx, ny) === FRUIT) {
        var tail = {x:nx, y:ny};
        score++;
        setFood();
        soundEfx.play();
    } else {

    var tail = snake.remove();
    grid.set(EMPTY, tail.x, tail.y);
    tail.x = nx;
    tail.y = ny;
    }
    grid.set(SNAKE, tail.x, tail.y);
    snake.insert(tail.x, tail.y);
 }
}

function draw() {
 var tw = canvas.width/grid.width;
 var th = canvas.height/grid.height;
 soundEfx = document.getElementById("soundEfx");

 for (var x=0; x < grid.width; x++) {
 for (var y=0; y < grid.height; y++) {
 switch (grid.get(x, y)) {
 case EMPTY:
 ctx.fillStyle = "#F8F8FF";
 break;
 case SNAKE:
 ctx.fillStyle = "#4682B4";
 break;
 case FRUIT:
 ctx.fillStyle = "#DC143C";
 break;
}
 ctx.fillRect(x*tw, y*th, tw, th);
}
}
ctx.fillStyle = "#000"
ctx.fillText("POÄNG: " + score, 10, canvas.height-10);
}


main();

//常数
var COLS=26，ROWS=26；
//身份证
空变量=0，蛇=1，果=2；
//方向
var LEFT=0，UP=1，RIGHT=2，DOWN=3；
//凯柯德
var KEY_LEFT=37，KEY_UP=38，KEY_RIGHT=39，KEY_DOWN=40；
var-soundEfx；
var soundLoad=“smask2.mp3”
变量网格={
宽度：空，
高度：空，
_网格：空，
init：函数（d，c，r）{
这个宽度=c；
这个高度=r；
这个。_网格=[]；
对于（var x=0；xnx | | nx>grid.width-1||
0>ny | | ny>grid.height-1||
grid.get（nx，ny）==SNAKE
)
{
返回init（）；
}
if（grid.get（nx，ny）==水果）{
var-tail={x:nx，y:ny}；
分数++；
设置食物（）；
soundEfx.play（）；
}否则{
var tail=snake.remove（）；
网格集（空，tail.x，tail.y）；
尾x=nx；
tail.y=ny；
}
网格集（SNAKE，tail.x，tail.y）；
snake.insert（tail.x，tail.y）；
}
}
函数绘图（）{
var tw=canvas.width/grid.width；
var th=canvas.height/grid.height；
soundEfx=document.getElementById（“soundEfx”）；
对于（var x=0；x

在循环中，为score创建一个条件语句。比如说

if（分数>100）{//do something}
if (grid.get(nx, ny) === FRUIT) {
    var tail = {x:nx, y:ny};
    score++;

    if (score >= 100) {
       //do something
    }
    else {
       setFood();
       soundEfx.play();
    }

} else {
   var tail = snake.remove();
   grid.set(EMPTY, tail.x, tail.y);
   tail.x = nx;
   tail.y = ny;
}