本教程将指导您如何在javascript游戏中优雅地展示高分榜，避免页面跳转，通过巧妙运用css的`display`属性和javascript动态控制元素可见性，实现游戏区域与高分榜视图的无缝切换，从而提升用户体验。
1. 引言：优化游戏高分榜显示
在开发基于JavaScript的网页游戏时，游戏结束后如何美观地展示高分榜是一个常见的需求。传统的做法可能包括跳转到新的HTML页面，或者直接在游戏区域内简单粗暴地覆盖显示。然而，这两种方式都可能导致用户体验不佳。本教程旨在提供一种更优雅的解决方案：通过动态切换HTML元素的可见性，实现在同一个页面上无缝地从游戏界面过渡到高分榜界面，而无需刷新或加载新页面。
2. HTML结构调整：高分榜容器
为了实现游戏区域与高分榜的切换，我们需要将高分榜列表（
请将您的HTML结构调整如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doodle Jump Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 高分榜容器，初始时将通过CSS隐藏 -->
<div class="high-scores-container">
<h2>高分榜</h2>
<ol id="highScores"></ol>
<button id="playAgainBtn">再玩一次</button>
</div>
<!-- 游戏区域 -->
<div class="grid">
<div class="volumeIcon"></div>
</div>
<script src="app.js"></script>
</body>
</html>3. CSS样式定义：初始隐藏与布局
接下来，我们需要为高分榜容器及其内部元素定义样式。核心在于将.high-scores-container初始设置为display: none;，使其在页面加载时不可见。同时，为了让高分榜在显示时能与游戏区域保持一致的布局和美观度，可以为其设置相同的宽度、高度和居中样式。
立即学习“Java免费学习笔记（深入）”；
/* 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 
