JavaScript游戏高分榜优雅呈现：利用CSS与JS实现视图动态切换

本教程将指导您如何在javascript游戏中优雅地展示高分榜，避免页面跳转，通过巧妙运用css的`display`属性和javascript动态控制元素可见性，实现游戏区域与高分榜视图的无缝切换，从而提升用户体验。

1. 引言：优化游戏高分榜显示

在开发基于JavaScript的网页游戏时，游戏结束后如何美观地展示高分榜是一个常见的需求。传统的做法可能包括跳转到新的HTML页面，或者直接在游戏区域内简单粗暴地覆盖显示。然而，这两种方式都可能导致用户体验不佳。本教程旨在提供一种更优雅的解决方案：通过动态切换HTML元素的可见性，实现在同一个页面上无缝地从游戏界面过渡到高分榜界面，而无需刷新或加载新页面。

2. HTML结构调整：高分榜容器

为了实现游戏区域与高分榜的切换，我们需要将高分榜列表（

）包裹在一个独立的容器中。这个容器将作为高分榜的显示区域，并能被JavaScript控制其可见性。同时，我们可以在这个容器中添加一个标题和一个“再玩一次”按钮，以增强用户体验。

请将您的HTML结构调整如下：

    
    
    
    


    
    
      
高分榜
      

      再玩一次
    

    
    
      
    

    

3. CSS样式定义：初始隐藏与布局

接下来，我们需要为高分榜容器及其内部元素定义样式。核心在于将.high-scores-container初始设置为display: none;，使其在页面加载时不可见。同时，为了让高分榜在显示时能与游戏区域保持一致的布局和美观度，可以为其设置相同的宽度、高度和居中样式。

/* style.css */

/* 游戏区域样式 (保持不变，但需确保其可以被隐藏) */
.grid {
  width: 400px;
  height: 600px;
  background-color: yellow;
  position: relative;
  font-size: 200px;
  text-align: center;
  background-image: url(bluesky_level1.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 400px 600px;
  margin-right: auto;
  margin-left: auto;
  /* 其他现有样式 */
}

/* 高分榜容器样式 */
.high-scores-container {
  display: none; /* 初始隐藏 */
  width: 400px; /* 与游戏区域保持一致 */
  height: 600px; /* 与游戏区域保持一致 */
  margin-right: auto;
  margin-left: auto;
  background-color: #f0f8ff; /* 示例背景色 */
  position: relative;
  padding: 20px;
  box-sizing: border-box; /* 确保内边距包含在宽高内 */
  text-align: center;
  font-family: "Georgia", "Times New Roman", serif;
  color: #333;
}

.high-scores-container h2 {
  font-size: 40px;
  margin-bottom: 30px;
  color: #0056b3;
}

#highScores {
  list-style-type: decimal; /* 使用数字列表 */
  padding: 0;
  margin: 0 auto 30px auto; /* 居中列表并添加底部外边距 */
  max-width: 80%; /* 限制列表宽度 */
  text-align: left; /* 列表项文本左对齐 */
  font-size: 24px;
}

#highScores li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  display: flex; /* 使用flex布局让分数和名字对齐 */
  justify-content: space-between; /* 分数和名字分居两边 */
}

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

#playAgainBtn {
  display: none; /* 按钮初始也隐藏，等待高分榜显示时再出现 */
  padding: 12px 25px;
  font-size: 22px;
  background-color: #28a74