表情包收集苹果

<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
   <title>表情包收集苹果</title>
   <style>
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
     body {
       overflow: hidden;
       touch-action: none;
       background: #000;
     }
     canvas {
       display: block;
     }
     /* 胜利弹窗 */
     .win-popup {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.75);
       display: none;
       align-items: center;
       justify-content: center;
       z-index: 100;
     }
     .box {
       background: #222;
       padding: 32px 40px;
       border-radius: 16px;
       text-align: center;
       color: white;
       font-size: 26px;
     }
     button {
       margin-top: 24px;
       padding: 12px 28px;
       font-size: 20px;
       border: none;
       border-radius: 10px;
       background: #3498db;
       color: white;
     }
   </style>
 </head>
 <body>
   <canvas id="game"></canvas>
   <div class="win-popup" id="popup">
     <div class="box">
       🎉 游戏胜利！
       <br>
       <button id="restartBtn">重新开始</button>
     </div>
   </div>
   <script>
     const canvas = document.getElementById("game");
     const ctx = canvas.getContext("2d");
     const popup = document.getElementById("popup");
     const restartBtn = document.getElementById("restartBtn");
     function resize() {
       canvas.width = window.innerWidth;
       canvas.height = window.innerHeight;
     }
     resize();
     window.addEventListener("resize", resize);
     // 地图设置
     const MAP_SIZE = 1600;
     const PLAYER_SPEED = 4;
     const PICKUP_RADIUS = 36;
     let player = {
       x: MAP_SIZE / 2,
       y: MAP_SIZE / 2,
       moving: false
     };
     let apples = [];
     let trees = [];
     let collectedCount = 0;
     const TOTAL_APPLES = 10;
     // 摇杆
     let joystick = {
       baseX: 120,
       baseY: canvas.height - 140,
       radius: 55,
       knobRadius: 26,
       knobX: 120,
       knobY: canvas.height - 140,
       active: false,
       dx: 0,
       dy: 0
     };
     // 生成地图物体
     function initLevel() {
       apples = [];
       trees = [];
       collectedCount = 0;
       player.x = MAP_SIZE / 2;
       player.y = MAP_SIZE / 2;
       // 生成树木
       for (let i = 0; i < 70; i++) {
         let tx, ty;
         let ok = false;
         while (!ok) {
           tx = 80 + Math.random() * (MAP_SIZE - 160);
           ty = 80 + Math.random() * (MAP_SIZE - 160);
           const distToPlayer = Math.hypot(tx - player.x, ty - player.y);
           if (distToPlayer > 130) {
             ok = true;
           }
         }
         trees.push({ x: tx, y: ty });
       }
       // 生成苹果
       for (let i = 0; i < TOTAL_APPLES; i++) {
         let ax, ay;
         let ok = false;
         while (!ok) {
           ax = 60 + Math.random() * (MAP_SIZE - 120);
           ay = 60 + Math.random() * (MAP_SIZE - 120);
           const distToPlayer = Math.hypot(ax - player.x, ay - player.y);
           if (distToPlayer > 100) {
             ok = true;
           }
         }
         apples.push({ x: ax, y: ay, got: false });
       }
     }
     // 摇杆触摸
     function getTouchPos(e) {
       const touch = e.touches[0];
       return { x: touch.clientX, y: touch.clientY };
     }
     canvas.addEventListener("touchstart", (e) => {
       e.preventDefault();
       const pos = getTouchPos(e);
       const dist = Math.hypot(pos.x - joystick.baseX, pos.y - joystick.baseY);
       if (dist < joystick.radius + 40) {
         joystick.active = true;
         moveJoystick(pos);
       }
     });
     canvas.addEventListener("touchmove", (e) => {
       e.preventDefault();
       if (!joystick.active) return;
       const pos = getTouchPos(e);
       moveJoystick(pos);
     });
     canvas.addEventListener("touchend", (e) => {
       e.preventDefault();
       joystick.active = false;
       joystick.knobX = joystick.baseX;
       joystick.knobY = joystick.baseY;
       joystick.dx = 0;
       joystick.dy = 0;
     });
     function moveJoystick(pos) {
       const jx = joystick.baseX;
       const jy = joystick.baseY;
       let dx = pos.x - jx;
       let dy = pos.y - jy;
       const length = Math.hypot(dx, dy);
       const max = joystick.radius;
       if (length > max) {
         dx = (dx / length) * max;
         dy = (dy / length) * max;
       }
       joystick.knobX = jx + dx;
       joystick.knobY = jy + dy;
       joystick.dx = dx;
       joystick.dy = dy;
     }
     function update() {
       player.moving = false;
       if (joystick.active) {
         const len = Math.hypot(joystick.dx, joystick.dy);
         if (len > 4) {
           player.moving = true;
           const nx = joystick.dx