Запись / показ игры 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");
...