优化JavaScript版Doodle Jump游戏结束后高分榜的页面展示

1. 添加页面空白区域的高分榜容器 #

在HTML的空白位置（比如游戏画布下方/侧边）插入专用的高分榜容器：

<!-- 示例：放在游戏画布下方 -->
<canvas id="gameCanvas"></canvas>
<div id="highScoresContainer" class="high-scores">
  <h3>🏆 高分榜</h3>
  <ul id="highScoresList"></ul>
</div>

2. 编写CSS美化样式 #

给容器添加卡片化、整洁的视觉样式，适配页面布局：

.high-scores {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 1rem;
  max-width: 320px;
  margin: 1rem auto;
}

.high-scores h3 {
  margin-top: 0;
  color: #2c3e50;
  text-align: center;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 0.5rem;
}

#highScoresList {
  list-style: none;
  padding: 0;
  margin: 0;
}

#highScoresList li {
  padding: 0.6rem 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#highScoresList li:last-child {
  border-bottom: none;
}

#highScoresList .rank {
  font-weight: bold;
  color: #f39c12;
  margin-right: 0.5rem;
}

#highScoresList .score {
  font-weight: bold;
  color: #27ae60;
}

3. 修改JavaScript渲染逻辑 #

替换原有简陋的展示代码，将高分数据结构化渲染到新容器中：

// 假设你已存储高分数据的数组：highScores = [{name: "玩家1", score: 1500}, ...]
function renderHighScores() {
  const listEl = document.getElementById('highScoresList');
  listEl.innerHTML = ''; // 清空原有内容

  // 按分数降序排序，取前10名展示
  const sortedScores = [...highScores].sort((a, b) => b.score - a.score).slice(0, 10);

  sortedScores.forEach((entry, idx) => {
    const listItem = document.createElement('li');
    listItem.innerHTML = `
      <span><span class="rank">#${idx + 1}</span>${entry.name}</span>
      <span class="score">${entry.score}</span>
    `;
    listEl.appendChild(listItem);
  });
}

// 游戏结束时触发渲染
function gameOver() {
  // 原有游戏结束逻辑（比如停止动画、显示结算信息）...
  renderHighScores();
  // 若容器默认隐藏，游戏结束后显示
  document.getElementById('highScoresContainer').style.display = 'block';
}

额外优化点 #

• 初始状态可将高分榜容器设为display: none，游戏结束后再显示
• 增加玩家昵称输入：游戏结束后弹出输入框，将昵称与分数绑定存入高分数组
• 添加渲染动画：给列表项添加入场淡入效果，提升视觉体验

内容的提问来源于stack exchange，提问作者Santiago Hernandez