SoundGame/web/escape/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <!-- viewport 锁缩放，viewport-fit=cover 适配刘海屏 -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <title>暗室 · SoundGame Web</title>
  <link rel="stylesheet" href="../engine/style.css">
</head>
<body>
  <!-- 全屏根元素：手势全屏捕获层，封面图放里面 -->
  <div id="game-root">
    <img class="cover" src="cover.png" alt="">
  </div>

  <script type="module">
    import { WebAudioEngine } from '../engine/audio.js';
    import { attachGestures } from '../engine/gesture.js';
    import { EscapeGame } from './game.js';

    async function main() {
      const root = document.getElementById('game-root');
      const audio = new WebAudioEngine('audio/');
      const game = new EscapeGame(audio, root);

      await audio.showStartOverlay({ cover: 'cover.png' });
      // 走到这里 AudioContext 已解锁，可以出声了
      game.start();
      attachGestures(root, (g) => game.onGesture(g));
    }

    main();
  </script>
</body>
</html>