技术求助：如何用HTML制作含启动游戏、设置、Credits按钮的游戏菜单

核心思路 #

• 用绝对定位的div创建菜单容器，默认覆盖在canvas上方显示
• 点击「开始游戏」后隐藏菜单，启动游戏逻辑
• 为三个菜单按钮绑定对应功能事件

修改后的完整代码 #

HTML部分 #

将菜单容器放在body内、canvas之前，结构如下：

<html>
<head>
  <div style="display:none"> 
    <img id="background" preload="true" src="img/Marslandschaft2.jpg" width="770" height="227">
  </div>
  <div style="display:none"> 
    <img id="panzer_l" preload="true" src="img/panzer2.png" width="70" height="27">
  </div>
  <div style="display:none"> 
    <img id="panzer_r" preload="true" src="img/panzer2_s.png" width="70" height="27">
  </div>
  <audio id="music" src="Audio/fahrt.m4a"></audio>
  <audio id="backgroundmusic" src="Audio/backgroundmusic.mp3"></audio>

  <link rel="stylesheet" type="text/css" href="css/mystyle.css">
  <script language="javascript" type="text/javascript" src="scripts/myjs.js"></script>
  <title>tanks</title>
</head>

<body>
  <!-- 游戏菜单容器 -->
  <div id="gameMenu" class="game-menu">
    <h1 class="menu-title">坦克对战</h1>
    <button id="startBtn" class="menu-btn">Start Game</button>
    <button id="settingsBtn" class="menu-btn">Settings</button>
    <button id="creditsBtn" class="menu-btn">Credits</button>
  </div>

  <div class="mystyle"></div>
  <canvas id="myCanvas" class="canvas" width="1640" height="700"></canvas>
</body>
<html>

CSS部分（更新mystyle.css） #

添加菜单样式，实现居中覆盖效果：

body {
  background-color: rgb(0, 0, 0);
  color: blue;
  font-size: 40px; /* 修正原代码笔误：40x → 40px */
  position: relative; /* 为菜单绝对定位提供参考 */
  margin: 0;
  padding: 0;
}

.mystyle {
  color: #444;
  padding: 5px;
  font-size: 25px;
  margin: 10px;
}

.canvas {
  margin: 20px;
  border: 1px solid rgb(154, 11, 11);
  display: block; /* 消除canvas默认行内元素间距 */
}

.displays {
  margin: 20px;
}

/* 游戏菜单样式 */
.game-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  padding: 40px;
  border-radius: 10px;
  text-align: center;
  z-index: 100; /* 确保菜单在canvas上方 */
}

.menu-title {
  color: #fff;
  margin-bottom: 30px;
  font-size: 50px;
}

.menu-btn {
  display: block;
  width: 200px;
  padding: 15px;
  margin: 15px auto;
  font-size: 24px;
  background-color: #c0392b;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-btn:hover {
  background-color: #e74c3c;
}

/* 隐藏菜单的类 */
.hidden {
  display: none;
}

JS部分（更新myjs.js） #

调整启动逻辑，绑定菜单按钮事件：

var kugel = 0;
var player_health = 100;
var panzer_sp = {
  x: 0,
  y: 0,
  width: 10,
  height: 5,
  player_health
}
var panzer_sp2 = {
  x: 0,
  y: 0,
  width: 10,
  height: 5,
  player_health
}
var damage = 20;
var gameInterval; // 保存定时器ID，方便游戏结束后清理

// 页面加载完成后绑定菜单事件
window.onload = function() {
  const startBtn = document.getElementById('startBtn');
  const settingsBtn = document.getElementById('settingsBtn');
  const creditsBtn = document.getElementById('creditsBtn');
  const gameMenu = document.getElementById('gameMenu');

  // 开始游戏按钮事件
  startBtn.addEventListener('click', function() {
    gameMenu.classList.add('hidden'); // 隐藏菜单
    loadGame(); // 启动游戏
  });

  // 设置按钮事件
  settingsBtn.addEventListener('click', function() {
    alert('设置功能待实现');
  });

  // Credits按钮事件
  creditsBtn.addEventListener('click', function() {
    alert('坦克游戏 v1.0\n作者：SPORT DIGITAL');
  });
}

function loadGame() {
  gameInterval = window.setInterval(f_timer, 20);
  kugel = new Array(); // 创建子弹数组

  canvas = document.getElementById('myCanvas');
  canvas.setAttribute('tabindex', '0');
  canvas.focus();
  canvas.addEventListener('mousedown', f_mousedown, false);
  canvas.addEventListener('keypress', f_keypress, false);
  music = document.getElementById("music");
  panzer_sp = canvas.width / 2;
  panzer_sp2 = canvas.width / 2 - 10;

  f_draw();
}

function f_draw() {
  canvas = document.getElementById('myCanvas');
  canvas.width = canvas.width; // 清空画布

  var gc = canvas.getContext("2d");
  gc.fillStyle = "#800";

  // 绘制背景
  let background = document.getElementById("background");
  gc.drawImage(background, 0, 0, 1640, 700);

  // 绘制坦克
  let img = document.getElementById("panzer_l");
  gc.drawImage(img, panzer_sp, canvas.height - 50, 150, 52);
  gc.drawImage(img, panzer_sp2, canvas.height - 50, 150, 52);

  // 绘制子弹
  gc.fillStyle = "#900";
  for (let i = 0; i < kugel.length; i++) {
    gc.fillRect(kugel[i].x, kugel[i].y, kugel[i].w + 10, kugel[i].h + 10);
  }
}

function f_mousedown(e) {
  console.log('CLICK : x=' + e.offsetX + ',y=' + e.offsetY);
  console.log('Canvas: w=' + canvas.width + ',h=' + canvas.height);
}

// 坦克移动与射击逻辑
function f_keypress(e) {
  console.log('key press:' + e.keyCode);
  if (e.keyCode == 97) { // A键
    panzer_sp = panzer_sp - 7;
    player_health = player_health - 20;
    console.log(`Health: ${player_health} `);
    if (player_health <= 0) {
      console.log(`Player one...its over`);
      document.getElementById("backgroundmusic").play();
      clearInterval(gameInterval); // 游戏结束停止定时器
    }
  }
  if (e.keyCode == 100) { // D键
    panzer_sp = panzer_sp + 7;
    music.play();
  }
  if (e.keyCode == 52) { // 小键盘4键
    panzer_sp2 = panzer_sp2 - 6;
  }
  if (e.keyCode == 54) { // 小键盘6键
    panzer_sp2 = panzer_sp2 + 6;
  }
  if (e.keyCode == 32) { // 空格键
    let t = {
      x: panzer_sp + 60,
      y: 660,
      w: 3,
      h: 10
    };
    kugel.push(t);
  }
  if (e.keyCode == 53) { // 小键盘5键
    let t = {
      x: panzer_sp2 + 60,
      y: 660,
      w: 3,
      h: 10
    };
    kugel.push(t);
  }
  f_draw();
}

function f_timer() {
  for (let i = 0; i < kugel.length; i++) {
    kugel[i].x += 5;
    if (kugel[i].x > 1640) {
      kugel.splice(i, 1);
      i--; // 删除元素后索引回退，避免跳过下一个子弹
    }
  }
  f_draw();
}

关键修改说明 #

1. 菜单位置：菜单div放在body内、canvas之前，通过绝对定位+z-index实现覆盖在游戏画布上方的效果。
2. 启动逻辑调整：原load函数改名为loadGame，不再通过body onload直接执行，而是点击「Start Game」按钮后触发，同时隐藏菜单。
3. 功能绑定：为三个菜单按钮分别绑定点击事件，实现隐藏菜单启动游戏、弹出设置提示、弹出 credits 信息的基础功能。
4. 代码优化：修复原CSS中font-size:40x的笔误，添加定时器清理逻辑，避免游戏结束后定时器继续运行。

内容的提问来源于stack exchange，提问作者SPORT DIGITAL