小游戏合集

<!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;
}
#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:10;
}
#tip{
  position:absolute;
  top:50px;left:14px;
  color:#ffd166;
  font-size:16px;
  z-index:10;
}
#back{
  position:absolute;
  top:14px;right:14px;
  padding:10px 16px;
  border:none;
  border-radius:10px;
  background:#c0392b;
  color:white;
  font-size:16px;
  z-index:10;
  cursor:pointer;
}
#canvas{
  display:block;
  background:#222;
  position:absolute;
  top:0;left:0;
  touch-action: none;
}

/* ===== 游戏4 UI：摇杆、跳跃、挖矿按钮 ===== */
#game4-ui{
  display:none;
  position:absolute;
  width:100%;height:100%;
  z-index:5;
  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;
}
.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;
}
.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;
}

/* ===== 游戏5 UI：刹车油门 ===== */
#game5-ui{
  display:none;
  position:absolute;
  width:100%;height:100%;
  z-index:5;
  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;
}
.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;
}
</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="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>
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');

let mode = 0;
let score = 0;
let gameOver = false;
let audioCtx = null;
let levelSpeed = 1;
let showGreatText = false;
let greatTimer = 0;

let W = 0, H = 0;
function resizeCanvas(){
  W = window.innerWidth;
  H = window.innerHeight;
  canvas.width = W;
  canvas.height = H;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas, {passive:true});

function initAudio(){
  if(audioCtx) return;
  audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
function playJumpSound(){
  if(!audioCtx) return;
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.connect(gain); gain.connect(a