88 lines
4.9 KiB
HTML
88 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>元景 · 游戏展示</title>
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html, body { width: 100%; height: 100%; overflow: hidden; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #0F172A; color: #E2E8F0; }
|
||
#game_wrap { position: fixed; inset: 0; display: flex; flex-direction: column; }
|
||
#hud_bar { height: 48px; background: #1E293B; display: flex; align-items: center; padding: 0 14px; gap: 12px; border-bottom: 1px solid #334155; flex-shrink: 0; }
|
||
#hud_bar .title { font-weight: bold; font-size: 15px; }
|
||
.hud-item { font-size: 13px; color: #94A3B8; }
|
||
.hud-item b { color: #FBBF24; font-size: 15px; }
|
||
#hud_status { margin-left: auto; font-size: 13px; padding: 4px 10px; border-radius: 12px; background: #334155; color: #CBD5E1; }
|
||
#hud_status.ok { background: #14532D; color: #4ADE80; }
|
||
#hud_btns { display: flex; gap: 8px; }
|
||
#hud_btns button { padding: 5px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; background: #2563EB; color: #FFF; }
|
||
#hud_btns button:disabled { opacity: .45; cursor: not-allowed; }
|
||
#hud_btns button.warn { background: #DC2626; }
|
||
#hud_btns button.ghost { background: #475569; }
|
||
#stage { flex: 1; position: relative; display: flex; }
|
||
#game_canvas { flex: 1; background: #F8FAFC; cursor: pointer; }
|
||
#side_panel { width: 300px; background: #1E293B; border-left: 1px solid #334155; display: flex; flex-direction: column; padding: 10px; gap: 8px; }
|
||
#game_log { flex: 1; overflow-y: auto; font-size: 12px; color: #94A3B8; line-height: 1.7; background: #0F172A; border-radius: 6px; padding: 8px; }
|
||
#share_box { display: none; }
|
||
#share_box input { width: 100%; padding: 6px; font-size: 12px; border-radius: 4px; border: 1px solid #475569; background: #0F172A; color: #E2E8F0; }
|
||
#share_box button { margin-top: 4px; padding: 4px 10px; font-size: 12px; border: none; border-radius: 4px; background: #059669; color: #FFF; cursor: pointer; }
|
||
#panel_result { position: absolute; inset: 0; display: none; background: rgba(15,23,42,.88); z-index: 10; }
|
||
#panel_hud { display: none; }
|
||
.result-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; background: #1E293B; border: 1px solid #334155; border-radius: 12px; padding: 28px; text-align: center; }
|
||
.result-card h2 { margin-bottom: 18px; color: #FBBF24; }
|
||
.result-card .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #334155; font-size: 14px; }
|
||
.result-card .row b { color: #F8FAFC; }
|
||
.result-card .btns { margin-top: 20px; display: flex; gap: 10px; justify-content: center; }
|
||
.result-card .btns button { padding: 8px 22px; border: none; border-radius: 6px; cursor: pointer; background: #2563EB; color: #FFF; font-size: 14px; }
|
||
.result-card .btns button.ghost { background: #475569; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="game_wrap">
|
||
<div id="hud_bar">
|
||
<span class="title" id="page_title">🎮 世界探索 Demo</span>
|
||
<span class="hud-item">分数 <b id="hud_score">0</b></span>
|
||
<span class="hud-item">关卡 Lv.<b id="hud_level">1</b></span>
|
||
<span class="hud-item">时长 <b id="hud_time">00:00</b></span>
|
||
<span id="hud_status">加载中…</span>
|
||
<div id="hud_btns">
|
||
<button id="btn_pause" class="ghost" disabled>⏸ 暂停</button>
|
||
<button id="btn_resume" class="ghost" style="display:none" disabled>▶ 继续</button>
|
||
<button id="btn_share" class="ghost" disabled>🔗 分享</button>
|
||
<button id="btn_save" class="ghost" disabled>💾 保存</button>
|
||
<button id="btn_end" class="warn" disabled>🏁 结束</button>
|
||
<button id="btn_restart" class="ghost" disabled>🔄 重开</button>
|
||
<button id="btn_exit" class="ghost" disabled>✖ 退出</button>
|
||
</div>
|
||
</div>
|
||
<div id="stage">
|
||
<canvas id="game_canvas" width="900" height="560"></canvas>
|
||
<div id="side_panel">
|
||
<div id="share_box">
|
||
<input id="share_url" readonly>
|
||
<button id="btn_copy">复制链接</button>
|
||
</div>
|
||
<div id="game_log"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="panel_hud"></div>
|
||
<div id="panel_result">
|
||
<div class="result-card">
|
||
<h2>🏁 游戏结算</h2>
|
||
<div class="row"><span>最终得分</span><b id="result_score">0</b></div>
|
||
<div class="row"><span>到达关卡</span><b id="result_level">1</b></div>
|
||
<div class="row"><span>游戏时长</span><b id="result_duration">0 秒</b></div>
|
||
<div class="row"><span>结算时间</span><b id="result_time">-</b></div>
|
||
<div class="btns">
|
||
<button id="btn_result_again">🔄 再来一局</button>
|
||
<button id="btn_result_back" class="ghost">✖ 退出</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- W-10 运行时引擎（runtime 模块，any 权限自动服务） -->
|
||
<script src="/runtime/runtime.js" defer></script>
|
||
<script src="game.js" defer></script>
|
||
</body>
|
||
</html>
|