139 lines
5.8 KiB
HTML
139 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||
<title>星尘突击队 STAR RAID</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div id="wrap">
|
||
<canvas id="game" width="240" height="320"></canvas>
|
||
<div id="scan"></div><div id="vig"></div>
|
||
|
||
<!-- 标题 -->
|
||
<div class="ovl" id="o-title">
|
||
<div class="tag">PIXEL ROGUELIKE SHMUP</div>
|
||
<h1 class="logo">STAR<br>RAID</h1>
|
||
<div class="logo-cn">星尘突击队</div>
|
||
<div class="h3" id="best-line">BEST -- </div>
|
||
<div class="col" style="margin-top:6px">
|
||
<button class="btn primary" id="b-go">▶ 出击</button>
|
||
<button class="btn gold" id="b-hangar">✦ 机库强化</button>
|
||
<button class="btn" id="b-codex">❖ 军械图鉴</button>
|
||
<button class="btn danger" id="b-rush">☠ BOSS 挑战</button>
|
||
</div>
|
||
<div class="small" style="margin-top:8px">键盘 WASD/方向键 移动 · 自动射击 · 超频充满自动暴走<br>SHIFT 精密移动 · P 暂停 · M 音乐</div>
|
||
</div>
|
||
|
||
<!-- 出击准备 -->
|
||
<div class="ovl hide" id="o-setup">
|
||
<div class="h2">— 出击准备 —</div>
|
||
<div class="h3">选择模式</div>
|
||
<div class="pick" id="mode-pick">
|
||
<div class="pcard sel" data-m="stage"><div class="nm" style="margin-top:2px">闯关模式</div><div class="ds">6 大关卡<br>击破母巢核心<br>即获胜利</div></div>
|
||
<div class="pcard" data-m="endless"><div class="nm" style="margin-top:2px">无尽模式</div><div class="ds">无限波次<br>突变词缀<br>冲击最高分</div></div>
|
||
</div>
|
||
<div class="h3">选择机体</div>
|
||
<div class="pick" id="ship-pick"></div>
|
||
<div class="h3">难度</div>
|
||
<div class="row" id="diff-pick">
|
||
<button class="btn sel-diff primary" data-d="0" style="min-width:110px;padding:8px 14px">普通</button>
|
||
<button class="btn sel-diff danger" data-d="1" style="min-width:110px;padding:8px 14px">困难</button>
|
||
</div>
|
||
<div class="row" style="margin-top:6px">
|
||
<button class="btn primary" id="b-start">开始出击 ▶</button>
|
||
<button class="btn" id="b-back1">返回</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Boss 挑战 -->
|
||
<div class="ovl hide" id="o-rush">
|
||
<div class="h2">— BOSS 挑战 —</div>
|
||
<div class="h3">随机武装：3主武Lv3 · 3副武Lv3 · 2僚机Lv2 · 击破计时</div>
|
||
<div class="togrow"><label><input type="checkbox" id="rush-anim"> 老虎机抽奖动画</label></div>
|
||
<div class="pick" id="rush-pick"></div>
|
||
<button class="btn" id="b-back6" style="margin-top:6px">返回</button>
|
||
</div>
|
||
|
||
<!-- 武装抽取（老虎机） -->
|
||
<div class="ovl hide" id="o-slot">
|
||
<div class="h2">— 武装抽取 —</div>
|
||
<div class="slotrow" id="slot-row"></div>
|
||
<div class="h3" id="slot-hint"> </div>
|
||
</div>
|
||
|
||
<!-- 机库 -->
|
||
<div class="ovl hide" id="o-hangar">
|
||
<div class="h2">— 机库 · 永久强化 —</div>
|
||
<div class="wallet">星币 ✦ <span id="wallet">0</span></div>
|
||
<div class="shop" id="shop"></div>
|
||
<button class="btn" id="b-back2" style="margin-top:6px">返回</button>
|
||
</div>
|
||
|
||
|
||
<!-- 升级三选一 -->
|
||
<div class="ovl hide" id="o-cards">
|
||
<div class="h2 blink">▲ LEVEL UP ▲</div>
|
||
<div class="h3">选择一项强化（按 1 / 2 / 3）</div>
|
||
<div id="cards"></div>
|
||
</div>
|
||
|
||
<!-- 暂停 -->
|
||
<div class="ovl hide" id="o-pause">
|
||
<div class="h2">‖ 暂停 · 军械配置</div>
|
||
<div id="loadout" style="width:100%;max-height:52%;overflow-y:auto"></div>
|
||
<div class="col">
|
||
<button class="btn primary" id="b-resume">继续战斗</button>
|
||
<button class="btn" id="b-restart">重新开始</button>
|
||
<button class="btn danger" id="b-quit">放弃任务</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图鉴 -->
|
||
<div class="ovl hide" id="o-codex">
|
||
<div class="h2">— 军械图鉴 —</div>
|
||
<div class="h3">已收集 <span id="codex-n">0</span>/<span id="codex-t">0</span> · 点击可实时演示</div>
|
||
<div id="codex" style="overflow-y:auto;max-height:72%;width:100%;display:flex;flex-direction:column;align-items:center"></div>
|
||
<button class="btn" id="b-back4">返回</button>
|
||
</div>
|
||
|
||
<!-- 武器演示（全屏实战模拟，透明覆盖层不挡画布） -->
|
||
<div class="ovl hide" id="o-demo" style="background:transparent;pointer-events:none;justify-content:space-between;overflow:hidden">
|
||
<div style="margin-top:3%">
|
||
<div class="h2" id="demo-name">演示</div>
|
||
<div class="h3" id="demo-ds" style="max-width:88%;margin:0 auto"></div>
|
||
<div class="h3" style="color:var(--dim);margin-top:4px">实战模拟 · 自动驾驶 · 触屏/方向键可接管</div>
|
||
</div>
|
||
<button class="btn" id="b-back5" style="pointer-events:auto;margin-bottom:4%">返回图鉴</button>
|
||
</div>
|
||
|
||
<!-- 结算 -->
|
||
<div class="ovl hide" id="o-over">
|
||
<div class="h2" id="over-title">任务失败</div>
|
||
<div class="panel"><div class="stat-grid" id="over-stats"></div></div>
|
||
<div class="wallet">获得星币 ✦ <span id="over-coins">0</span></div>
|
||
<div class="col">
|
||
<button class="btn primary" id="b-again">再来一局</button>
|
||
<button class="btn" id="b-home">返回基地</button>
|
||
</div>
|
||
</div>
|
||
|
||
<button id="tb-pause" style="display:none">| |</button>
|
||
</div>
|
||
|
||
<script src="js/config.js"></script>
|
||
<script src="js/audio.js"></script>
|
||
<script src="js/sprites.js"></script>
|
||
<script src="js/data.js"></script>
|
||
<script src="js/core.js"></script>
|
||
<script src="js/enemies.js"></script>
|
||
<script src="js/combat.js"></script>
|
||
<script src="js/render.js"></script>
|
||
<script src="js/boss_art.js"></script>
|
||
<script src="js/ui.js"></script>
|
||
</body>
|
||
</html>
|