HTML/CSS简易游戏开发技术咨询：如何实现5个Table并排布局及第二关卡搭建

我来帮你搞定这两个问题！先从最棘手的并排布局说起，再聊聊第二关卡的搭建思路。

一、实现5个Table并排显示 #

默认情况下，table是块级元素，会自动占满一行并换行。这里用CSS Flexbox是最简洁现代的实现方式，既能保证布局灵活，又不会破坏你每个table独立的需求（避免主角穿越障碍物）。

具体步骤： #

1. 用一个容器包裹所有table，给容器设置display: flex，让内部元素横向排列
2. 调整table的样式，让它们均匀分配空间，同时去掉默认的间距干扰

修改后的代码示例：

<!DOCTYPE HTML>
<html lang="en-us">
<head>
<title> Level 1 </title>
<link rel="stylesheet" type="text/css" href="Mohanned_Project.css" />
<style>
body { 
  background: blue; 
  background-size: cover; 
  margin: 0; /* 去掉body默认边距，避免布局偏移 */
}
/* 并排布局的容器 */
.table-group {
  display: flex;
  gap: 15px; /* 给table之间加自定义间距，可选 */
  padding: 10px; /* 容器内边距，避免元素贴边 */
}
/* 每个table的统一样式 */
.table-group table {
  flex: 1; /* 让所有table均分容器宽度 */
  border-collapse: collapse; /* 合并边框，可选优化 */
}
/* 让图片自适应table宽度，避免溢出 */
.table-group img {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>
<div class="table-group">
  <!-- 第一个table -->
  <table>
    <tr>
      <th>
        <img src="Obstacle_1.png">
        <img src="Box.png" id="Goat" align="left">
        <img src="Win.png" align="right">
      </th>
    </tr>
  </table>
  <!-- 第二个table -->
  <table>
    <tr>
      <th>
        <img src="Obstacle_1.png">
      </th>
    </tr>
  </table>
  <!-- 剩下3个table按同样结构添加即可 -->
  <table>...</table>
  <table>...</table>
  <table>...</table>
</div>
</body>
</html>

小提示：把图片的宽度设为100%，可以让图片自动适配table的宽度，避免出现横向滚动条或者布局错乱的问题。

二、第二关卡的搭建思路 #

因为你需要每个关卡的元素独立（防止主角穿越），最好给每个关卡创建独立的容器，用少量JS控制关卡的显示/隐藏，同时自定义第二关卡的布局和元素样式。

具体实现： #

1. 给每个关卡创建一个独立的section容器，默认隐藏，只有当前激活的关卡显示
2. 给第二关卡的主角、障碍物设置独特的样式和布局，和第一关卡区分开
3. 用简单的JS函数实现关卡切换

完整示例代码：

<!DOCTYPE HTML>
<html lang="en-us">
<head>
<title> Game Levels </title>
<link rel="stylesheet" type="text/css" href="Mohanned_Project.css" />
<style>
body { 
  background: blue; 
  background-size: cover; 
  margin: 0;
}
.table-group {
  display: flex;
  gap: 15px;
  padding: 10px;
}
.table-group table {
  flex: 1;
  border-collapse: collapse;
}
.table-group img {
  width: 100%;
  height: auto;
}
/* 关卡容器基础样式 */
.level {
  display: none; /* 默认隐藏所有关卡 */
}
.level.active {
  display: block; /* 显示当前激活的关卡 */
}
/* 第一关卡主角样式 */
#Goat { 
  position: sticky; 
  top: 300px; 
  left: 10px; 
}
/* 第二关卡主角样式（自定义位置） */
#Goat_2 { 
  position: sticky; 
  top: 150px; 
  left: 50px; 
}
/* 关卡切换按钮样式 */
.btn { 
  color: #fff; 
  border: none; 
  margin: 10px; 
  padding: 12px 15px; 
  font-size: 20px; 
  font-weight: 600; 
  text-transform: uppercase; 
  letter-spacing: 2px; 
  cursor: pointer; 
  border-radius: 10px; 
  transition: box-shadow 0.4s; 
  background: #2d3436;
}
.btn:hover {
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<!-- 关卡切换按钮 -->
<button class="btn" onclick="switchLevel('level1')">Level 1</button>
<button class="btn" onclick="switchLevel('level2')">Level 2</button>

<!-- 第一关卡 -->
<section class="level active" id="level1">
  <div class="table-group">
    <table>
      <tr>
        <th>
          <img src="Obstacle_1.png">
          <img src="Box.png" id="Goat" align="left">
          <img src="Win.png" align="right">
        </th>
      </tr>
    </table>
    <table>
      <tr>
        <th>
          <img src="Obstacle_1.png">
        </th>
      </tr>
    </table>
    <!-- 剩下3个table -->
  </div>
</section>

<!-- 第二关卡 -->
<section class="level" id="level2">
  <div class="table-group">
    <!-- 自定义第二关卡的布局，比如更换障碍物图片、调整table顺序 -->
    <table>
      <tr>
        <th>
          <img src="Obstacle_2.png"> <!-- 第二关卡专属障碍物 -->
          <img src="Box.png" id="Goat_2" align="left">
          <img src="Win.png" align="right">
        </th>
      </tr>
    </table>
    <table>
      <tr>
        <th>
          <img src="Obstacle_2.png">
        </th>
      </tr>
    </table>
    <!-- 剩下3个table可以调整布局，增加难度 -->
  </div>
</section>

<script>
// 关卡切换函数
function switchLevel(targetId) {
  // 隐藏所有关卡
  document.querySelectorAll('.level').forEach(level => {
    level.classList.remove('active');
  });
  // 激活目标关卡
  document.getElementById(targetId).classList.add('active');
}
</script>
</body>
</html>

关键说明： #

• 每个关卡是完全独立的容器，不会出现元素互相干扰的问题，完美解决你担心的主角穿越障碍物的情况
• 第二关卡可以通过更换图片、调整主角初始位置、修改table布局来实现不同的难度
• 用到的JS代码非常简单，仅用于切换关卡，符合你“少量使用JavaScript”的需求

内容的提问来源于stack exchange，提问作者Mohanned Almohandes