小游戏合集【微信触摸终极修复】

<!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;
}
#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:9999;
  pointer-events:auto !important;
  cursor: pointer !important;
}
#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:9999;
  cursor:pointer;
  touch-action: manipulation;
  pointer-events:auto !important;
  cursor: pointer !important;
}
#canvas{
  display:block;
  background:#222;
  position:absolute;
  top:0;left:0;
  z-index:1;
  touch-action: none;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
}

/* ===== 游戏4 UI：摇杆、跳跃、挖矿按钮 ===== */
#game4-ui{
  display:none;
  position:absolute;
  inset:0;
  z-index:9998;
  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 !important;
  touch-action: none;
  z-index:9999;
}
.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 !important;
  touch-action: manipulation;
  z-index:9999;
  cursor: pointer !important;
}
.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 !important;
  touch-action: manipulation;
  z-index:9999;
  cursor: pointer !important;
}

/* ===== 游戏5 UI：刹车油门 ===== */
#game5-ui{
  display:none;
  position:absolute;
  inset:0;
  z-index:9998;
  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 !important;
  touch-action: manipulation;
  z-index:9999;
  cursor: pointer !important;
}
.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 !important;
  touch-action: manipulation;
  z-index:9999;
  cursor: pointer !important;
}
</style>
</head>
<body>

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

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

  <div id="game5-ui">
    <button class="btn-brake" id="btnBrake" onclick="">🛑 刹车</button>
    <button class="btn-gas" id="btnGas" onclick="">🚀 油门</button>
  </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