JS记录/显示得分游戏

Question

我想在该游戏中添加排行榜，以便您可以在结尾输入您的姓名并记录分数。

如果仅显示用户分数，而不是自动返回到“开始游戏”按钮，就足够了。

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

我已将下面的代码与jsfiddle一起复制。

https://jsfiddle.net/goktxe84/

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

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

})

Answer 1

为了显示最新结果，请在其中添加html元素

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

并且在丢失时更改此元素上的文本（第79行）

...
 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");
...