Recording/showing score JS game

Question

I would like to add a leaderboard to this game so you can enter your name at the end and scores are recorded.

Failing that just displaying the users score at the end rather than it just reverting to the "start game" button automatically would suffice.

Id also like to add touch capability for mobiles/tablets.

Ive copied the code below along with a 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

for show latest result add html element, where you can show it

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

and change text on this element, when you lose (line 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");
...