JOJO
559e70fac5
- #wrap 去除外框限制，竖屏/方形屏占满全屏（逻辑分辨率动态：宽240、高按屏比 clamp[280,640]） - 横屏 letterbox：中间 3:4 竖屏显示区域居中，UI 收紧压缩 - viewport-fit=cover + safe-area-inset 适配刘海屏/底部横条 - 星星背景按视口面积重建，保持星空密度 - resize/orientationchange 自动重新适配，对局中旋转位置自动修正
206 lines
9.7 KiB
HTML
206 lines
9.7 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,viewport-fit=cover">
|
||
<link rel="icon" href="data:,">
|
||
<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-auth">
|
||
<div class="tag">PIXEL ROGUELIKE SHMUP</div>
|
||
<h1 class="logo">STAR<br>RAID</h1>
|
||
<div class="logo-cn">星尘突击队</div>
|
||
<div class="panel" style="width:min(92%,340px)">
|
||
<div class="row" style="gap:6px">
|
||
<button class="btn primary" id="tab-login" style="min-width:0;flex:1">登 陆</button>
|
||
<button class="btn" id="tab-reg" style="min-width:0;flex:1">注 册</button>
|
||
</div>
|
||
<form class="auth-f" id="f-login">
|
||
<input id="li-id" placeholder="用户名 / 邮箱" maxlength="64" autocomplete="username" required>
|
||
<input id="li-pw" type="password" placeholder="密码" maxlength="72" autocomplete="current-password" required>
|
||
<button class="btn primary" type="submit">进入星域 ▶</button>
|
||
</form>
|
||
<form class="auth-f hide" id="f-reg">
|
||
<input id="rg-name" placeholder="用户名（2-16位）" maxlength="16" autocomplete="off" required>
|
||
<input id="rg-email" type="email" placeholder="邮箱" maxlength="64" autocomplete="off" required>
|
||
<input id="rg-pw" type="password" placeholder="密码（至少8位）" maxlength="72" autocomplete="new-password" required>
|
||
<input id="rg-pw2" type="password" placeholder="确认密码" maxlength="72" autocomplete="new-password" required>
|
||
<button class="btn primary" type="submit">创建飞行员档案</button>
|
||
</form>
|
||
<div class="h3" id="auth-err" style="color:var(--red)"> </div>
|
||
</div>
|
||
<div class="small">账号数据保存在服务器 · 排行榜与全服飞行员同台竞技</div>
|
||
</div>
|
||
|
||
<!-- 飞行员大厅（排行榜主页） -->
|
||
<div class="ovl hide" id="o-home">
|
||
<div class="h2" style="margin-top:2%">— 飞行员大厅 —</div>
|
||
<div class="h3" id="home-stats"> </div>
|
||
<div class="lb">
|
||
<div class="h3" style="color:var(--cyan);letter-spacing:3px">— 全服排行榜 TOP 100 —</div>
|
||
<div class="lb-tabs">
|
||
<button data-s="endless" class="on">无尽最高分</button>
|
||
<button data-s="boss">击坠Boss</button>
|
||
<button data-s="codex">图鉴收集</button>
|
||
</div>
|
||
<div class="lb-row lb-head"><span>#</span><span>飞行员</span><span>击坠</span><span>图鉴</span><span>无尽最高</span></div>
|
||
<div class="lb-list" id="lb-list"></div>
|
||
</div>
|
||
<div class="row" style="margin-bottom:2%">
|
||
<button class="btn primary" id="b-base" style="min-width:min(56vw,200px)">▶ 进入基地</button>
|
||
<button class="btn" id="b-logout" style="min-width:0">登出</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 标题 -->
|
||
<div class="ovl hide" id="o-title">
|
||
<button id="b-mute" title="静音开关（跟随账号云端保存）"><canvas id="b-mute-icon" width="36" height="26"></canvas></button>
|
||
<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="h3" id="pilot-line" style="color:var(--cyan)"> </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>
|
||
<button class="btn" id="b-lobby" style="min-width:min(48vw,180px)">⌂ 飞行员大厅</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 id="resume-slot"></div>
|
||
<div class="h3">选择模式</div>
|
||
<div class="pick" id="mode-pick">
|
||
<div class="pcard" data-m="stage"><div class="nm" style="margin-top:2px">闯关模式</div><div class="ds">6 大关卡<br>击破母巢核心<br>即获胜利</div></div>
|
||
<div class="pcard sel" 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="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="h3">机体（选择 / 解锁）· 左右滑动</div>
|
||
<div class="pick" id="ship-pick"></div>
|
||
<div class="h3">永久强化</div>
|
||
<div class="shop" id="shop" style="overflow-y:auto;max-height:42%"></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">— <span id="cx-secret" style="user-select:none">军</span>械图鉴 —</div>
|
||
<div class="h3">已收集 <span id="codex-n">0</span>/<span id="codex-t">0</span> · 点击可实时演示<span id="codex-test" title="临时解锁全部军械查看/演示，不写入后端，刷新页面即失效" style="display:none;color:var(--gold)"> · ⚠ 测试模式</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="margin:0 auto;white-space:nowrap"></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>
|
||
|
||
<!-- 结算未完成对局确认 -->
|
||
<div class="ovl hide" id="o-unsaved">
|
||
<div class="h2" style="color:var(--gold)">⚠ 存在未完成的对局</div>
|
||
<div class="panel" style="width:min(92%,320px)"><div class="stat-grid" id="unsaved-info"></div></div>
|
||
<div class="h3" style="color:var(--red)">开始新的无尽对局将直接结算该对局</div>
|
||
<div class="col">
|
||
<button class="btn danger" id="b-settle-go">结算旧局 · 开始新对局</button>
|
||
<button class="btn primary" id="b-unsaved-resume">▶ 继续旧对局</button>
|
||
<button class="btn" id="b-unsaved-cancel">取消</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/net.js"></script>
|
||
<script src="js/ui.js"></script>
|
||
<script src="js/auth.js"></script>
|
||
<script src="js/home.js"></script>
|
||
</body>
|
||
</html>
|