如何在HTML中制作游戏分数排行榜？

```

保存为"score.html"用浏览器打开它，你会看到...就一个标题和空白页面。别急，好戏在后头呢！

关键部分：JavaScript来帮忙

HTML自己记不住分数，得靠JavaScript这个好兄弟。在

前面加上这些：

```html

```

刷新页面，现在能看到三个假玩家了！但这只是开始...

让数据活起来：添加新分数

排行榜不能永远是那三个假人啊。我们来加个表单：

在
<div id="scoreboard"添加：

```html

添加新成绩

<form id="ScoreForm"

<button type=""

```

然后在

里继续写：

```javascript

document.getElementById("ScoreForm"EventListener("submit" function(e){

e.preventDefault(); // 阻止表单自动提交

let name = document.getElementById("Name"value;

let score = parseInt(document.getElementById("playerScore");

players.push({name: name, score: score});

showScores();

// 清空输入框

document.getElementById("playerName" = " document.getElementById("playerScore" = "});

```

现在试试输入你的名字和分数，点击提交！排行榜实时更新了有没有？

数据存储难题：关掉页面就没了？

等等...好像发现问题了。关掉浏览器再打开，数据又变回最初那三个假人了。这不行啊！

这时候就需要

localStorage

出马了。修改下代码：

```javascript

// 加载时读取保存的数据

if(localStorage.getItem("gameScores" {

players = JSON.parse(localStorage.getItem("Scores"// 在添加新成绩的函数里，保存数据

document.getElementById("addScoreForm"addEventListener(""(e){

e.preventDefault();

let name = document.getElementById("playerName";

let score = parseInt(document.getElementById("Score"value);

players.push({name: name, score: score});

localStorage.setItem("gameScores" JSON.stringify(players));

showScores();

document.getElementById("Name"value = " document.getElementById("Score"value = "```

现在关掉浏览器再打开，数据还在！原理很简单：把数据转换成字符串存起来，读取时再转回来。

常见问题自问自答

Q: 为什么我的代码不管用？

A: 检查这几个地方：

• 所有引号是不是成对的
• 变量名有没有拼写错误
• 每个语句结尾有没有分号

Q: 能显示前10名吗？

A: 当然！修改showScores函数：

```javascript

// 只显示前10名

players.slice(0,10).forEach((player, index) => {

scoreboard.innerHTML +=

`

${index+1}. ${player.name} - ${player.score}分

`;

});

```

Q: 想清空所有数据怎么办？

A: 在浏览器控制台输入：

```javascript

localStorage.removeItem("gameScores"```

然后刷新页面。

进阶小技巧

想让排行榜更酷？试试这些：

• 给前三名加特殊样式
• 添加时间戳记录什么时候得的分数
• 做成响应式布局，手机也能看

不过这些属于"有了更好"的功能，先把基础打牢最重要。

小编观点

说实话，我第一次做这个的时候，localStorage那部分卡了我整整一晚上。但搞明白后才发现原来这么简单！编程就是这样，站在门外看觉得高深莫测，真正动手做就会发现很多问题都有现成解决方案。

你现在已经比90%只看不练的人强多了。接下来可以试着把这个排行榜整合到你喜欢的游戏里，或者...算了不给你布置作业了，自己去玩吧！