小游戏合集

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>小游戏合集</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui, sans-serif;-webkit-tap-highlight-color: transparent;}
html,body{height:100%;background:#181818;overflow:hidden;touch-action: none;}

#hall{
  width:100%;height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.title{
  color:#fff;
  font-size:32px;
  margin-bottom:12px;
}
.gbtn{
  width:220px;
  padding:18px 0;
  border:none;
  border-radius:16px;
  font-size:20px;
  color:white;
  cursor:pointer;
  touch-action: manipulation;
  position:relative;
  z-index:999;
}
#g1{background:#2980b9;}
#g2{background:#27ae60;}
#g3{background:#e67e22;}
#g4{background:#9c27b0;}
#g5{background:#d63031;}

#gameWrap{
  display:none;
  width:100%;
  height:100%;
  position:relative;
}
#score{
  position:absolute;
  top:14px;left:14px;
  color:white;
  font-size:22px;
  z-index:999;
  pointer-events:none;
}
#tip{
  position:absolute;
  top:50px;left:14px;
  color:#ffd166;
  font-size:16px;
  z-index:999;
  pointer-events:none;
}
#back{
  position:absolute;
  top:14px;right:14px;
  padding:10px 16px;
  border:none;
  border-radius:10px;
  background:#c0392b;
  color:white;
  font-size:16px;
  z-index:999;
  cursor:pointer;
  touch-action: manipulation;
}
#canvas{
  display:block;
  background:#222;
  position:absolute;
  top:0;left:0;
  z-index:1;
  pointer-events:auto;
}
/* 上层交互遮罩：所有UI放在这一层，优先接收触摸 */
#uiOverlay {
  position:absolute;
  inset:0;
  z-index:500;
  pointer-events:none;
}

/* ===== 游戏4 UI：摇杆、跳跃、挖矿按钮 ===== */
#game4-ui{
  display:none;
  position:absolute;
  width:100%;height:100%;
  z-index:998;
  pointer-events:none;
}
.joystick-base{
  position:absolute;
  left:30px;
  bottom:30px;
  width:110px;height:110px;
  border-radius:50%;
  background:rgba(255,255,255,0.18);
  border:2px solid rgba(255,255,255,0.35);
  pointer-events:auto;
  touch-action: none;
}
.joystick-knob{
  position:absolute;
  width:46px;height:46px;
  border-radius:50%;
  background:rgba(255,255,255,0.6);
  left:32px;top:32px;
}
.btn-jump{
  position:absolute;
  right:30px;bottom:100px;
  width:70px;height:70px;
  border-radius:50%;
  border:none;
  background:#3498db;
  color:white;
  font-size:30px;
  pointer-events:auto;
  touch-action: manipulation;
  z-index:999;
}
.btn-mine{
  position:absolute;
  right:30px;bottom:20px;
  width:70px;height:70px;
  border-radius:50%;
  border:none;
  background:#27ae60;
  color:white;
  font-size:16px;
  font-weight:bold;
  pointer-events:auto;
  touch-action: manipulation;
  z-index:999;
}

/* ===== 游戏5 UI：刹车油门 ===== */
#game5-ui{
  display:none;
  position:absolute;
  width:100%;height:100%;
  z-index:998;
  pointer-events:none;
}
.btn-brake{
  position:absolute;
  left:30px;bottom:30px;
  width:100px;height:60px;
  border-radius:12px;
  border:none;
  background:#d33;
  color:white;
  font-size:18px;
  pointer-events:auto;
  touch-action: manipulation;
  z-index:999;
}
.btn-gas{
  position:absolute;
  right:30px;bottom:30px;
  width:100px;height:60px;
  border-radius:12px;
  border:none;
  background:#2a8;
  color:white;
  font-size:18px;
  pointer-events:auto;
  touch-action: manipulation;
  z-index:999;
}
</style>
</head>
<body>

<div id="hall">
  <div class="title">小游戏合集</div>
  <button class="gbtn" id="g1">游戏1：跳跃躲尖刺</button>
  <button class="gbtn" id="g2">飞碟身法挑战</button>
  <button class="gbtn" id="g3">蓝小人射红小人</button>
  <button class="gbtn" id="g4">游戏4：洞穴挖矿探险</button>
  <button class="gbtn" id="g5">游戏5：公路骑车狂奔</button>
</div>

<div id="gameWrap">
  <div id="score">分数：0</div>
  <div id="tip">按住向后拖动弹弓，松开发射蓝色小人！</div>
  <button id="back">返回大厅</button>
  <canvas id="canvas"></canvas>
  <div id="uiOverlay">
    <div id="game4-ui">
      <div class="joystick-base" id="joyBase">
        <div class="joystick-knob" id="joyKnob"></div>
      </div>
      <button class="btn-jump" id="btnJump">↑</button>
      <button class="btn-mine" id="btnMine">挖矿</button>
    </div>

    <div id="game5-ui">
      <button class="btn-brake" id="btnBrake">🛑 刹车</button>
      <button class="btn-gas" id="btnGas">🚀 油门</button>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function(){
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const hall = document.getElementById('hall');
const gameWrap = document.getElementById('gameWrap');
const scoreDom = document.getElementById('score');
const tipDom = document.getElementById('tip');
const game4UI = document.getElementById('game4-ui');
const game5UI = document.getElementById('game5-ui');
const btnBrake = document.getElementById('btnBrake');
const btnGas = document.getElementById('btnGas');
const btnJump = document.getElementById('btnJump');
const btnMine = document.getElementById('btnMine'