Javascript 记录/显示比赛成绩

我想在这个游戏中添加一个排行榜，这样你就可以在最后输入你的名字并记录分数

如果失败了，只在最后显示用户得分，而不是自动返回“开始游戏”按钮就足够了

我还想为手机/平板电脑添加触摸功能

我复制了下面的代码和一个JSFIDLE

$（文档）.ready（函数（）{
$（“#画布”）.addClass（“displayNone”）；
$（“#开始”）。单击（函数（）{
$（“#开始”）.addClass（“显示无”）；
$（“#canvas”）.removeClass（“displayNone”）；
})
var键=[]；
window.addEventListener（“向下键”，
职能（e）{
键[e.keyCode]=真；
开关（如钥匙代码）{
案例37：案例39：案例38：案例40：
案例32:e.preventDefault（）；break；
默认：中断；
}
},
假）；
window.addEventListener（'keyup'，
职能（e）{
密钥[e.keyCode]=假；
},
假）；
var canvas=$（“#canvas”）[0]；
var ctx=canvas.getContext（“2d”）；
var w=$（“#画布”）.width（）；
var h=$（“#画布”）.height（）；
var-cw=10；
变量d；
食品；
var评分；
var-snake_阵列；
函数init（）{
d=“对”；
创建_snake（）；
创造食物（）；
得分=0；
如果（游戏循环类型！=“未定义”）清除间隔（游戏循环）；
game_loop=setInterval（画图，90）；
}
init（）；
函数create_snake（）{
变量长度=5；
snake_数组=[]；
对于（变量i=长度-1；i>=0；i--）{
snake_数组({
x:我，
y:0
});
}
}
函数create_food（）{
食物={
x:Math.round（Math.random（）*（w-cw）/cw），
y:Math.round（Math.random（）*（h-cw）/cw），
};
}
函数绘制（）{
ctx.fillStyle=“白色”；
ctx.fillRect（0,0,w,h）；
ctx.strokeStyle=“黑色”；
ctx.strokeRect（0，0，w，h）；
var nx=snake_数组[0].x；
var ny=snake_数组[0].y；
如果（d==“右”）nx++；
否则，如果（d==“左”）nx--；
否则，如果（d==“向上”）ny--；
如果（d==“向下”）ny++；
如果（nx==-1 | | nx==w/cw | | ny==-1 | | ny==h/cw | |检查碰撞（nx，ny，snake|数组））{
$（“#开始”）.removeClass（“displayNone”）；
$（“#画布”）.addClass（“displayNone”）；
init（）；
返回；
}
如果（nx==food.x&&ny==food.y）{
变量尾={
x:nx，
y:纽约
};
分数++；
创造食物（）；
}
否则{
var tail=snake_array.pop（）；
尾x=nx；
tail.y=ny；
}
蛇_阵列。反移位（尾部）；
对于（变量i=0；i

要显示最新结果，请添加html元素，您可以在其中显示它

<button id="start">Start Game</button>
<canvas id="canvas" width="300" height="300"></canvas>
<span id="score"></span>

---

嗨@GJR，你试过什么，什么不起作用了？：）嗨，威尔，我只尝试了下面建议的代码，但似乎不起作用。一旦你输了，我需要显示分数。这也是一个冗长得多的请求，但我需要让它在移动设备上工作，以便用户触摸屏幕移动“蛇”。Will，一旦你输了，分数现在会显示出来，但几秒钟后会重置为0，在你重新启动游戏之前，我如何使分数保持可见？谢谢你的代码，它可以工作，我只需要更改底线来停止游戏自动重启$（“#start”）.removeClass（“displayNone”）$（#canvas”）.addClass（“displayNone”）；分数在最后显示，但几秒钟后重置为0？？？您可以在此处看到该行为-分数也显示在开始屏幕上，而不是在您失败时触发？解决方案：在外部范围中定义分数变量，然后仅在单击开始按钮时将其设置为零

  display:none;
}

button{
   height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

$(document).ready(function() {
        $("#canvas").addClass("displayNone");
    $("#start").click(function(){
        $("#start").addClass("displayNone");
      $("#canvas").removeClass("displayNone");
    })
    var keys = [];
        window.addEventListener("keydown",
    function(e){
        keys[e.keyCode] = true;
        switch(e.keyCode){
            case 37: case 39: case 38:  case 40: 
            case 32: e.preventDefault(); break; 
            default: break; 
        }
    },
false);
window.addEventListener('keyup',
    function(e){
        keys[e.keyCode] = false;
    },
false);
    var canvas = $("#canvas")[0];
    var ctx = canvas.getContext("2d");
    var w = $("#canvas").width();
    var h = $("#canvas").height();

    var cw = 10;
    var d;
    var food;
    var score;

    var snake_array;

    function init() {
        d = "right"; 
        create_snake();
        create_food(); 
        score = 0;

        if (typeof game_loop != "undefined") clearInterval(game_loop);
        game_loop = setInterval(paint, 90);
    }
    init();

    function create_snake() {
        var length = 5; 
        snake_array = []; 
        for (var i = length - 1; i >= 0; i--) {
            snake_array.push({
                x: i,
                y: 0
            });
        }
    }

    function create_food() {
        food = {
            x: Math.round(Math.random() * (w - cw) / cw),
            y: Math.round(Math.random() * (h - cw) / cw),
        };
    }

    function paint() {
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, w, h);
        ctx.strokeStyle = "black";
        ctx.strokeRect(0, 0, w, h);

        var nx = snake_array[0].x;
        var ny = snake_array[0].y;

        if (d == "right") nx++;
        else if (d == "left") nx--;
        else if (d == "up") ny--;
        else if (d == "down") ny++;

        if (nx == -1 || nx == w / cw || ny == -1 || ny == h / cw || check_collision(nx, ny, snake_array)) {
        $("#start").removeClass("displayNone");
      $("#canvas").addClass("displayNone");
            init();
            return;
        }

        if (nx == food.x && ny == food.y) {
            var tail = {
                x: nx,
                y: ny
            };
            score++;

            create_food();
        }
        else {
            var tail = snake_array.pop(); 
            tail.x = nx;
            tail.y = ny;
        }

        snake_array.unshift(tail); 
        for (var i = 0; i < snake_array.length; i++) {
            var c = snake_array[i];
            paint_cell(c.x, c.y);
        }

        paint_cell(food.x, food.y);
        var score_text = "Score: " + score;
        ctx.fillText(score_text, 5, h - 5);
    }

    function paint_cell(x, y) {
        ctx.fillStyle = "pink";
        ctx.fillRect(x * cw, y * cw, cw, cw);
        ctx.strokeStyle = "red";
        ctx.strokeRect(x * cw, y * cw, cw, cw);
    }

    function check_collision(x, y, array) {
        for (var i = 0; i < array.length; i++) {
            if (array[i].x == x && array[i].y == y) return true;
        }
        return false;
    }

    $(document).keydown(function(e) {
        var key = e.which;
        if (key == "37" && d != "right") d = "left";
        else if (key == "38" && d != "down") d = "up";
        else if (key == "39" && d != "left") d = "right";
        else if (key == "40" && d != "up") d = "down";
    })

})

<button id="start">Start Game</button>
<canvas id="canvas" width="300" height="300"></canvas>
<span id="score"></span>

...
 if (nx == -1 || nx == w / cw || ny == -1 || ny == h / cw || check_collision(nx, ny, snake_array)) {
        document.querySelector('#score').innerText = 'Your latest score = ' + score; 
        $("#start").removeClass("displayNone");
...