小游戏合集1‑5

<!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;
}
#gameWrap{
  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;
}
#canvas{
  display:block;
  background:#222;
  position:absolute;
  top:0;left:0;
  z-index:10;
}

#game4-ui{
  display:none;
  position:absolute;
  inset:0;
  z-index:9998;
}
.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,0.35);
  z-index:99999;
}
.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;
  z-index:99999;
}
.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;
  z-index:99999;
}

#game5-ui{
  display:none;
  position:absolute;
  inset:0;
  z-index:9998;
}
.btn-brake{
  position:absolute;
  left:30px;bottom:30px;
  width:100px;height:60px;
  border-radius:12px;
  border:none;
  background:#d33;
  color:white;
  font-size:18px;
  z-index:99999;
}
.btn-gas{
  position:absolute;
  right:30px;bottom:30px;
  width:100px;height:60px;
  border-radius:12px;
  border:none;
  background:#2a8;
  color:white;
  font-size:18px;
  z-index:99999;
}
</style>
</head>
<body>

<div id="gameWrap">
  <div id="score">分数：0</div>
  <div id="tip">选择下面的游戏开始游玩！</div>
  <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">↑</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>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
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');
const joyBase = document.getElementById("joyBase");
const joyKnob = document.getElementById("joyKnob");

let mode = 0; // 强制初始：大厅
let score = 0;
let gameOver = false;
let audioCtx = null;
let levelSpeed = 1;
let showGreatText = false;
let greatTimer = 0;

let holdingGas = false;
let holdingBrake = false;

// 大厅按钮坐标
const hallButtons = [
  { label: "游戏1：跳跃躲尖刺", color: "#2980b9", y: 80 },
  { label: "游戏2：飞碟身法挑战", color: "#27ae60", y: 140 },
  { label: "游戏3：蓝小人射红小人", color: "#e67e22", y: 200 },
  { label: "游戏4：洞穴挖矿探险", color: "#9c27b0", y: 260 },
  { label: "游戏5：公路骑车狂奔", color: "#d63031", y: 320 },
];
const btnW = 240;
const btnH = 48;
// 返回按钮
const backBtn = { w: 110, h: 42 };

function initAudio(){
  if(audioCtx) return;
  try{
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  }catch(e){}
}

function playJumpSound(){
  if(!audioCtx) return;
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.connect(gain); gain.connect(audioCtx.destination);
  osc.type="sine";
  osc.frequency.setValueAtTime(320, audioCtx.currentTime);
  osc.frequency.exponentialRampToValueAtTime(520, audioCtx.currentTime + 0.12);
  gain.gain.setValueAtTime(0.22, audioCtx.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.12);
  osc.start(); osc.stop(audioCtx.currentTime + 0.12);
}
function playFailSound(){
  if(!audioCtx) return;
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.connect(gain); gain.connect(audioCtx.destination);
  osc.type="sawtooth";
  osc.frequency.setValueAtTime(240, audioCtx.currentTime);
  osc.frequency.exponentialRampToValueAtTime(80, audioCtx.currentTime + 0.35);
  gain.gain.setValueAtTim