记录/显示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");
...