8a59a35133
- 审计报告 HJ-AUDIT-001 入库 + W1 文档回填波（技术决策版/Doc B/开发团队版废止横幅/AGENTS.md/两规则档/tech-decisions） - 创始人拍板波（2026-06-10 晚，回填铁律逐项执行）： · R4=维持 D2 按 D2 改建（M-c 建 merge→idle→tycoon，动作类降 P1 留契约）→ D2 复审注+tech-decisions #6 · 鉴权七项全拍（§9.1：C 验证码+邀请码旁路/受限激活/开放注册/创作限白名单/一键登录/实名提现前/纯客户端 anonId）→ glossary+events.schema.json 同步 · A1 闸门看板建账（12+1 项含短信报备+大模型登记/算法备案/分账选型，主体已确认）+ 律所合规咨询 brief · 奇绩 ★1/2/3 定稿 + 品牌造梦→绘境清扫（4 档正文+文件名、demo 改名 huijing-ai-demo.html、禁投/禁外发横幅、内部引用 5 处） · M-c 四细节（两批 merge 先行/idle 纯前端+storage/10 校准+20 正式/拖拽为主） · R3 收口（叠加规则=IP 从创作者份额出·净额基数·平台恒 20%，eCPM 档 15/30/60）→ D3 复审注+glossary+BP:299 勘误 - W2 对外清洗收口：BP 改造版红线清洗（20 处锁风系红线词清零/独家→非独家/绝对化清零/06-10 实证+三线排序入文，留 3★ 待创始人） - 三件产出：鉴权 execution 版（V11/system 内扩展/14 @PermitAll 端点/NOT NULL 硬边界）+ Mc 模板波 review 版（已拍）+ 单位经济敏感性模型（基准 324 元/月/千DAU，覆盖基建需 1.33 万 DAU→实证 B 端现金线优先） - 两本账同步：作战清单（五件拍板项清零）+ 进度总账（三行执行记录） Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1254 lines
48 KiB
HTML
1254 lines
48 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>绘境AI - 移动端可交互版</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: system-ui, -apple-system, sans-serif;
|
||
}
|
||
:root {
|
||
--primary: #5B5FFF;
|
||
--dark: #0F1123;
|
||
--gray-400: #9ca3af;
|
||
--gray-700: #374151;
|
||
--success: #22C55E;
|
||
--warn: #FF9500;
|
||
--white: #ffffff;
|
||
}
|
||
body {
|
||
background: var(--dark);
|
||
color: var(--white);
|
||
overflow: hidden;
|
||
}
|
||
.app-wrap {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.page {
|
||
width: 100%;
|
||
height: calc(100vh - 60px);
|
||
overflow-y: auto;
|
||
display: none;
|
||
padding-bottom: 20px;
|
||
}
|
||
.page.active {
|
||
display: block;
|
||
}
|
||
/* 底部导航栏 */
|
||
.tab-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 60px;
|
||
background: #17192d;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
border-top: 1px solid rgba(255,255,255,0.1);
|
||
z-index: 99;
|
||
}
|
||
.tab-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--gray-400);
|
||
font-size: 10px;
|
||
gap: 4px;
|
||
}
|
||
.tab-item.active {
|
||
color: var(--primary);
|
||
}
|
||
.tab-icon {
|
||
font-size: 20px;
|
||
}
|
||
/* 首页-三列作品布局 */
|
||
.home-page {
|
||
padding: 15px;
|
||
}
|
||
.home-title {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
}
|
||
.game-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 10px;
|
||
}
|
||
.game-card {
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
background: #1f2937;
|
||
aspect-ratio: 9/12;
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
.game-card-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
/* 游戏钩子亮点 - 封面下半部分 */
|
||
.game-hook {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 40%;
|
||
background: linear-gradient(transparent, rgba(0,0,0,0.85));
|
||
padding: 30px 6px 6px 6px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
gap: 2px;
|
||
text-align: center;
|
||
}
|
||
.game-name {
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
line-height: 1.2;
|
||
text-align: center;
|
||
}
|
||
.game-desc {
|
||
font-size: 9px;
|
||
color: #FFE160;
|
||
font-weight: 500;
|
||
line-height: 1.2;
|
||
text-align: center;
|
||
}
|
||
/* 游玩页-抖音滑动流 */
|
||
.play-page {
|
||
height: calc(100vh - 120px);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.play-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
}
|
||
.play-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
.play-bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
object-position: center;
|
||
background: #000;
|
||
}
|
||
.play-btn {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%,-50%);
|
||
width: 70px;
|
||
height: 70px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,0.2);
|
||
backdrop-filter: blur(4px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30px;
|
||
color: #fff;
|
||
}
|
||
/* 游玩页大字号居中钩子 */
|
||
.play-item .game-hook {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: auto;
|
||
background: linear-gradient(transparent, rgba(0,0,0,0.9));
|
||
padding: 40px 10px 20px 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
text-align: center;
|
||
}
|
||
.play-item .game-name {
|
||
font-size: 22px; /* 放大2倍 */
|
||
font-weight: bold;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
.play-item .game-desc {
|
||
font-size: 18px; /* 放大2倍 */
|
||
color: #FFE160;
|
||
text-align: center;
|
||
}
|
||
/* 底部工具栏 均匀一横排 */
|
||
.play-bottom-toolbar {
|
||
position: fixed;
|
||
bottom: 60px;
|
||
left: 0;
|
||
right: 0;
|
||
height: 80px;
|
||
background: #17192d;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
padding: 0 10px;
|
||
z-index: 100;
|
||
border-top: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
.toolbar-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
color: #fff;
|
||
min-width: 50px;
|
||
}
|
||
.toolbar-btn-icon {
|
||
font-size: 22px;
|
||
line-height: 1;
|
||
}
|
||
.toolbar-num {
|
||
font-size: 12px;
|
||
color: #e5e7eb;
|
||
}
|
||
.author-follow-wrap {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.toolbar-avatar {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
background: #333;
|
||
}
|
||
.toolbar-follow-btn {
|
||
position: absolute;
|
||
bottom: -4px;
|
||
right: -4px;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
border: 1px solid #fff;
|
||
}
|
||
|
||
/* ========== 创作页面 - 主界面 ========== */
|
||
.create-main-page {
|
||
padding: 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
.create-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
.create-add-btn {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
}
|
||
.create-tabs {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 15px;
|
||
}
|
||
.create-tab-btn {
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
background: #1f2937;
|
||
color: var(--gray-400);
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
.create-tab-btn.active {
|
||
background: var(--primary);
|
||
color: #fff;
|
||
}
|
||
.my-games-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 15px;
|
||
}
|
||
.my-game-card {
|
||
background: #1f2937;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.my-game-img {
|
||
width: 100%;
|
||
aspect-ratio: 9/12;
|
||
object-fit: cover;
|
||
}
|
||
.my-game-actions {
|
||
position: absolute;
|
||
bottom: 10px;
|
||
right: 10px;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
background: rgba(0,0,0,0.6);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* ========== 游戏制作页面 ========== */
|
||
.create-make-page {
|
||
display: none;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
.make-header {
|
||
text-align: center;
|
||
padding: 15px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
border-bottom: 1px solid #27293d;
|
||
}
|
||
.make-history {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 15px;
|
||
}
|
||
.chat-item {
|
||
margin-bottom: 12px;
|
||
max-width: 85%;
|
||
}
|
||
.chat-user {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
.chat-ai {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
.chat-content {
|
||
padding: 10px 14px;
|
||
border-radius: 16px;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
.chat-user .chat-content {
|
||
background: var(--primary);
|
||
}
|
||
.chat-ai .chat-content {
|
||
background: #27293d;
|
||
}
|
||
.progress-bar-wrap {
|
||
padding: 15px;
|
||
background: #17192d;
|
||
}
|
||
.progress-text {
|
||
margin-bottom: 8px;
|
||
font-size: 14px;
|
||
}
|
||
.progress-bar {
|
||
width: 100%;
|
||
height: 20px;
|
||
border-radius: 10px;
|
||
background: #27293d;
|
||
overflow: hidden;
|
||
}
|
||
.progress-fill {
|
||
height: 100%;
|
||
width: 0%;
|
||
background: linear-gradient(90deg, #00c6ff, #0072ff);
|
||
transition: width 0.5s;
|
||
}
|
||
.progress-pause-btn {
|
||
float: right;
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
background: #ff3333;
|
||
color: #fff;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
.make-tabs {
|
||
display: flex;
|
||
border-top: 1px solid #27293d;
|
||
}
|
||
.make-tab-btn {
|
||
flex: 1;
|
||
padding: 12px;
|
||
background: #17192d;
|
||
color: var(--gray-400);
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
.make-tab-btn.active {
|
||
background: #27293d;
|
||
color: #fff;
|
||
}
|
||
.make-tab-content {
|
||
display: none;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
}
|
||
.make-tab-content.active {
|
||
display: flex;
|
||
}
|
||
.preview-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 15px;
|
||
}
|
||
.preview-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
.preview-action-btn {
|
||
padding: 6px 12px;
|
||
border-radius: 6px;
|
||
background: #27293d;
|
||
color: #fff;
|
||
border: none;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
}
|
||
.preview-game-card {
|
||
padding: 15px;
|
||
}
|
||
.preview-game-img {
|
||
width: 100%;
|
||
border-radius: 12px;
|
||
aspect-ratio: 9/12;
|
||
object-fit: cover;
|
||
}
|
||
.input-box {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
padding: 10px;
|
||
background: #17192d;
|
||
border-radius: 30px;
|
||
margin: 15px;
|
||
}
|
||
.input-box .upload-btn {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
background: #27293d;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
.input-box input {
|
||
flex: 1;
|
||
background: transparent;
|
||
border: none;
|
||
outline: none;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
.input-box button {
|
||
padding: 8px 16px;
|
||
background: var(--primary);
|
||
border: none;
|
||
border-radius: 20px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* ========== 弹窗样式 ========== */
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0,0,0,0.7);
|
||
display: none;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
}
|
||
.modal-content {
|
||
background: #17192d;
|
||
width: 100%;
|
||
max-height: 70vh;
|
||
border-radius: 16px 16px 0 0;
|
||
padding: 20px;
|
||
}
|
||
.modal-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
text-align: center;
|
||
}
|
||
.modal-item {
|
||
padding: 15px 0;
|
||
border-bottom: 1px solid #27293d;
|
||
cursor: pointer;
|
||
}
|
||
.modal-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.modal-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
}
|
||
.modal-btn {
|
||
flex: 1;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
border: none;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
.modal-btn-primary {
|
||
background: var(--primary);
|
||
color: #fff;
|
||
}
|
||
.modal-btn-secondary {
|
||
background: #27293d;
|
||
color: #fff;
|
||
}
|
||
.checkbox-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.checkbox-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.checkbox-item input {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
.modal-tabs {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 15px;
|
||
}
|
||
.modal-tab-btn {
|
||
flex: 1;
|
||
padding: 8px;
|
||
border-radius: 8px;
|
||
background: #27293d;
|
||
color: var(--gray-400);
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
.modal-tab-btn.active {
|
||
background: var(--primary);
|
||
color: #fff;
|
||
}
|
||
.modal-tab-content {
|
||
display: none;
|
||
}
|
||
.modal-tab-content.active {
|
||
display: block;
|
||
}
|
||
|
||
/* 消息、我的页面基础样式 */
|
||
.msg-page, .mine-page {
|
||
padding: 15px;
|
||
}
|
||
.common-card {
|
||
background: #17192d;
|
||
border-radius: 12px;
|
||
padding: 15px;
|
||
margin-bottom: 12px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app-wrap">
|
||
<!-- 首页 - 全部带钩子亮点 -->
|
||
<div class="page home-page active" id="homePage">
|
||
<h2 class="home-title">IP孵化游戏作品广场</h2>
|
||
<div class="game-grid">
|
||
<div class="game-card">
|
||
<img class="game-card-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%8E%8B%E8%93%9D%E8%8E%93.png">
|
||
<div class="game-hook">
|
||
<div class="game-name">王蓝莓的怀旧小卖部</div>
|
||
<div class="game-desc">(经营模拟)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="game-card">
|
||
<img class="game-card-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%281%29.png">
|
||
<div class="game-hook">
|
||
<div class="game-name">佩奇家园农场经营</div>
|
||
<div class="game-desc">(经营模拟)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="game-card">
|
||
<img class="game-card-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%282%29.png">
|
||
<div class="game-hook">
|
||
<div class="game-name">仙剑AI剧情互动传</div>
|
||
<div class="game-desc">(剧情互动)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="game-card">
|
||
<img class="game-card-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%283%29.png">
|
||
<div class="game-hook">
|
||
<div class="game-name">熊出没森林营地经营</div>
|
||
<div class="game-desc">(经营模拟)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="game-card">
|
||
<img class="game-card-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%284%29.png">
|
||
<div class="game-hook">
|
||
<div class="game-name">数码宝贝AI秘境解谜</div>
|
||
<div class="game-desc">(解谜闯关)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="game-card">
|
||
<img class="game-card-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%285%29.png">
|
||
<div class="game-hook">
|
||
<div class="game-name">布鲁伊亲子小镇经营</div>
|
||
<div class="game-desc">(经营模拟)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="game-card">
|
||
<img class="game-card-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%286%29.png">
|
||
<div class="game-hook">
|
||
<div class="game-name">超级飞侠空港经营站</div>
|
||
<div class="game-desc">(经营模拟)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="game-card">
|
||
<img class="game-card-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%287%29.png">
|
||
<div class="game-hook">
|
||
<div class="game-name">秦时明月AI江湖剧情</div>
|
||
<div class="game-desc">(剧情互动)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="game-card">
|
||
<img class="game-card-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%288%29.png">
|
||
<div class="game-hook">
|
||
<div class="game-name">加菲猫宠物庄园经营</div>
|
||
<div class="game-desc">(经营模拟)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="game-card">
|
||
<img class="game-card-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%289%29.png">
|
||
<div class="game-hook">
|
||
<div class="game-name">洛克王国AI魔法解谜</div>
|
||
<div class="game-desc">(解谜闯关)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="game-card">
|
||
<img class="game-card-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%2810%29.png">
|
||
<div class="game-hook">
|
||
<div class="game-name">小蓝AI奇幻剧情社</div>
|
||
<div class="game-desc">(经营模拟)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 游玩页面 -->
|
||
<div class="page play-page" id="playPage">
|
||
<div class="play-container" id="playContainer">
|
||
<div class="play-item">
|
||
<img class="play-bg" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%8E%8B%E8%93%9D%E8%8E%93.png">
|
||
<div class="play-btn">▶</div>
|
||
<div class="game-hook active">
|
||
<div class="game-name">王蓝莓的怀旧小卖部</div>
|
||
<div class="game-desc">8090怀旧回忆｜免费开店领红包</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="play-item">
|
||
<img class="play-bg" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%281%29.png">
|
||
<div class="play-btn">▶</div>
|
||
<div class="game-hook">
|
||
<div class="game-name">佩奇家园农场经营</div>
|
||
<div class="game-desc">亲子治愈乐园｜种菜养殖超解压</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="play-item">
|
||
<img class="play-bg" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%282%29.png">
|
||
<div class="play-btn">▶</div>
|
||
<div class="game-hook">
|
||
<div class="game-name">仙剑AI剧情互动传</div>
|
||
<div class="game-desc">仙侠沉浸式剧情｜你的选择决定结局</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="play-item">
|
||
<img class="play-bg" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%283%29.png">
|
||
<div class="play-btn">▶</div>
|
||
<div class="game-hook">
|
||
<div class="game-name">熊出没森林营地经营</div>
|
||
<div class="game-desc">森林大冒险｜建造专属欢乐营地</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="play-item">
|
||
<img class="play-bg" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%284%29.png">
|
||
<div class="play-btn">▶</div>
|
||
<div class="game-hook">
|
||
<div class="game-name">数码宝贝AI秘境解谜</div>
|
||
<div class="game-desc">收集神兽｜烧脑解谜赢稀有道具</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="play-item">
|
||
<img class="play-bg" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%285%29.png">
|
||
<div class="play-btn">▶</div>
|
||
<div class="game-hook">
|
||
<div class="game-name">布鲁伊亲子小镇经营</div>
|
||
<div class="game-desc">温馨亲子风｜打绘境幻小镇</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="play-item">
|
||
<img class="play-bg" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%286%29.png">
|
||
<div class="play-btn">▶</div>
|
||
<div class="game-hook">
|
||
<div class="game-name">超级飞侠空港经营站</div>
|
||
<div class="game-desc">全球飞行派送｜完成任务领奖励</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="play-item">
|
||
<img class="play-bg" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%287%29.png">
|
||
<div class="play-btn">▶</div>
|
||
<div class="game-hook">
|
||
<div class="game-name">秦时明月AI江湖剧情</div>
|
||
<div class="game-desc">武侠江湖｜自由抉择逆天改命</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="play-item">
|
||
<img class="play-bg" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%288%29.png">
|
||
<div class="play-btn">▶</div>
|
||
<div class="game-hook">
|
||
<div class="game-name">加菲猫宠物庄园经营</div>
|
||
<div class="game-desc">萌宠治愈系｜装扮豪华庄园</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="play-item">
|
||
<img class="play-bg" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%289%29.png">
|
||
<div class="play-btn">▶</div>
|
||
<div class="game-hook">
|
||
<div class="game-name">洛克王国AI魔法解谜</div>
|
||
<div class="game-desc">魔法世界探险｜解锁超强魔法</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="play-item">
|
||
<img class="play-bg" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%2810%29.png">
|
||
<div class="play-btn">▶</div>
|
||
<div class="game-hook">
|
||
<div class="game-name">小蓝AI奇幻剧情社</div>
|
||
<div class="game-desc">奇幻故事｜沉浸式互动超上瘾</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="play-item">
|
||
<img class="play-bg" src="https://picsum.photos/750/1334?random=102">
|
||
<div class="play-btn">▶</div>
|
||
<div class="game-hook">
|
||
<div class="game-name">喜羊羊奇幻草原童话</div>
|
||
<div class="game-desc">草原大冒险｜趣味闯关欢乐不停</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部工具栏 -->
|
||
<div class="play-bottom-toolbar" id="toolbar">
|
||
<div class="toolbar-btn">
|
||
<div class="author-follow-wrap">
|
||
<div class="toolbar-avatar"></div>
|
||
<div class="toolbar-follow-btn">+</div>
|
||
</div>
|
||
</div>
|
||
<div class="toolbar-btn">
|
||
<span class="toolbar-btn-icon">🕹️</span>
|
||
<span class="toolbar-num" id="playCount">18.6万</span>
|
||
</div>
|
||
<div class="toolbar-btn">
|
||
<span class="toolbar-btn-icon">❤️</span>
|
||
<span class="toolbar-num" id="likeCount">3.2万</span>
|
||
</div>
|
||
<div class="toolbar-btn">
|
||
<span class="toolbar-btn-icon">💬</span>
|
||
<span class="toolbar-num" id="commentCount">5126</span>
|
||
</div>
|
||
<div class="toolbar-btn">
|
||
<span class="toolbar-btn-icon">⭐</span>
|
||
<span class="toolbar-num" id="collectCount">8963</span>
|
||
</div>
|
||
<div class="toolbar-btn">
|
||
<span class="toolbar-btn-icon">🔁</span>
|
||
<span class="toolbar-num" id="shareCount">2415</span>
|
||
</div>
|
||
<div class="toolbar-btn">
|
||
<span class="toolbar-btn-icon">🔥</span>
|
||
<span class="toolbar-num" id="favCount">7689</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 创作页面 -->
|
||
<div class="page create-page" id="createPage">
|
||
<!-- 创作主界面 -->
|
||
<div class="create-main-page" id="createMainPage">
|
||
<div class="create-header">
|
||
<div style="font-size: 18px; font-weight: bold;">我的创作</div>
|
||
<div class="create-add-btn" onclick="openCreateMakePage()">+</div>
|
||
</div>
|
||
<div class="create-tabs">
|
||
<button class="create-tab-btn active" onclick="switchCreateTab(this, 'myGames')">我的游戏</button>
|
||
</div>
|
||
<div class="my-games-grid" id="myGamesGrid">
|
||
<div class="my-game-card">
|
||
<img class="my-game-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%8E%8B%E8%93%9D%E8%8E%93.png">
|
||
<div class="my-game-actions" onclick="openGameActionsModal()">⋮</div>
|
||
</div>
|
||
<div class="my-game-card">
|
||
<img class="my-game-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%281%29.png">
|
||
<div class="my-game-actions" onclick="openGameActionsModal()">⋮</div>
|
||
</div>
|
||
<div class="my-game-card">
|
||
<img class="my-game-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%282%29.png">
|
||
<div class="my-game-actions" onclick="openGameActionsModal()">⋮</div>
|
||
</div>
|
||
<div class="my-game-card">
|
||
<img class="my-game-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%BB%98%E5%A2%83AI%E7%94%9F%E6%80%81%E5%B9%B3%E5%8F%B0PRD%20%283%29.png">
|
||
<div class="my-game-actions" onclick="openGameActionsModal()">⋮</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 游戏制作界面 -->
|
||
<div class="create-make-page" id="createMakePage">
|
||
<div class="make-header">元宇宙游戏厅</div>
|
||
<div class="make-tabs">
|
||
<button class="make-tab-btn active" onclick="switchMakeTab(this, 'agent')">游戏智能体</button>
|
||
<button class="make-tab-btn" onclick="switchMakeTab(this, 'preview')">预览</button>
|
||
</div>
|
||
|
||
<!-- 游戏智能体页 -->
|
||
<div class="make-tab-content active" id="agentTab">
|
||
<div class="make-history" id="makeChatHistory">
|
||
<div class="chat-item chat-ai">
|
||
<div class="chat-content">你好！我是绘境AI游戏创作助手，支持IP孵化定制，可一键生成AI剧情、AI解谜、IP经营模拟类商业小游戏，60秒快速落地可上架作品。</div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-bar-wrap" id="progressBarWrap" style="display: none;">
|
||
<div class="progress-text">
|
||
Granting your wish
|
||
<button class="progress-pause-btn" onclick="toggleProgress()">■</button>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="progressFill"></div>
|
||
</div>
|
||
<div style="font-size: 14px; margin-top: 8px;">Wish will be granted in <span id="progressTime">8:54</span></div>
|
||
</div>
|
||
<div class="input-box">
|
||
<div class="upload-btn">📎</div>
|
||
<input type="text" id="makeInput" placeholder="输入IP+玩法，如：王蓝莓IP怀旧经营小游戏...">
|
||
<button onclick="sendMakeCreate()">发送</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 预览页 -->
|
||
<div class="make-tab-content" id="previewTab">
|
||
<div class="preview-header">
|
||
<div style="font-size: 16px; font-weight: bold;">龙穴大亨</div>
|
||
<div class="preview-actions">
|
||
<button class="preview-action-btn" onclick="openPublishModal()">一键发布</button>
|
||
<button class="preview-action-btn" onclick="openSettingsModal()">⚙️</button>
|
||
</div>
|
||
</div>
|
||
<div class="preview-game-card">
|
||
<img class="preview-game-img" src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%8E%8B%E8%93%9D%E8%8E%93.png">
|
||
<div class="result-btn-group" style="margin-top:15px;">
|
||
<button class="result-btn btn-audit" onclick="openAuditModal()">审核</button>
|
||
<button class="result-btn btn-publish" onclick="openPublishModal()">一键发布</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 消息页面 -->
|
||
<div class="page msg-page" id="msgPage">
|
||
<h2 class="home-title">消息中心</h2>
|
||
<div class="common-card">
|
||
<div style="font-weight:bold;margin-bottom:5px">系统通知</div>
|
||
<div style="font-size:12px;color:#999">欢迎使用绘境AI IP游戏孵化平台！</div>
|
||
</div>
|
||
<div class="common-card">
|
||
<div style="font-weight:bold;margin-bottom:5px">创作通知</div>
|
||
<div style="font-size:12px;color:#999">你的IP游戏作品可正常提审发布</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的页面 -->
|
||
<div class="page mine-page" id="minePage">
|
||
<h2 class="home-title">个人中心</h2>
|
||
<div class="common-card" style="text-align:center">
|
||
<div style="width:80px;height:80px;border-radius:50%;background:#333;margin:0 auto 10px"></div>
|
||
<div style="font-size:18px;font-weight:bold">IP创作者用户</div>
|
||
<div style="font-size:12px;color:#999;margin-top:5px">IP孵化创作者 | 分成80%</div>
|
||
</div>
|
||
<div class="common-card">
|
||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #222"><span>我的IP作品</span><span style="color:#999">12部</span></div>
|
||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #222"><span>收益中心</span><span style="color:#999">查看明细</span></div>
|
||
<div style="display:flex;justify-content:space-between;padding:8px 0"><span>创作设置</span><span style="color:#999">></span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部导航 -->
|
||
<div class="tab-bar">
|
||
<div class="tab-item active" onclick="switchTab(0)"><div class="tab-icon">🏠</div><div>首页</div></div>
|
||
<div class="tab-item" onclick="switchTab(1)"><div class="tab-icon">🎮</div><div>游玩</div></div>
|
||
<div class="tab-item" onclick="switchTab(2)"><div class="tab-icon">✦</div><div>创作</div></div>
|
||
<div class="tab-item" onclick="switchTab(3)"><div class="tab-icon">💬</div><div>消息</div></div>
|
||
<div class="tab-item" onclick="switchTab(4)"><div class="tab-icon">👤</div><div>我的</div></div>
|
||
</div>
|
||
|
||
<!-- 游戏操作弹窗 -->
|
||
<div class="modal-overlay" id="gameActionsModal">
|
||
<div class="modal-content">
|
||
<div class="modal-item" onclick="gameAction('play')">试玩</div>
|
||
<div class="modal-item" onclick="gameAction('edit')">编辑</div>
|
||
<div class="modal-item" onclick="gameAction('share')">分享</div>
|
||
<div class="modal-item" onclick="gameAction('copy')">复制</div>
|
||
<div class="modal-item" onclick="gameAction('delete')">删除</div>
|
||
<div class="modal-item" onclick="closeModal('gameActionsModal')" style="text-align:center;color:#999">取消</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 发布弹窗 -->
|
||
<div class="modal-overlay" id="publishModal">
|
||
<div class="modal-content">
|
||
<div class="modal-title">发布游戏</div>
|
||
<div style="text-align:center;margin-bottom:15px;">
|
||
<img src="https://wuyumin.oss-cn-beijing.aliyuncs.com/%E7%8E%8B%E8%93%9D%E8%8E%93.png" style="width:80px;border-radius:8px;">
|
||
<div style="margin-top:8px;">王蓝莓的怀旧小卖部</div>
|
||
</div>
|
||
<div class="checkbox-group">
|
||
<div class="checkbox-item">
|
||
<input type="checkbox" checked disabled>
|
||
<label>自有游戏流（必选）</label>
|
||
</div>
|
||
<div class="checkbox-item">
|
||
<input type="checkbox">
|
||
<label>抖音小游戏</label>
|
||
</div>
|
||
<div class="checkbox-item">
|
||
<input type="checkbox">
|
||
<label>微信小程序</label>
|
||
</div>
|
||
<div class="checkbox-item">
|
||
<input type="checkbox">
|
||
<label>快手小游戏</label>
|
||
</div>
|
||
<div class="checkbox-item">
|
||
<input type="checkbox">
|
||
<label>TapTap</label>
|
||
</div>
|
||
</div>
|
||
<div class="modal-buttons">
|
||
<button class="modal-btn modal-btn-secondary" onclick="openAuditModal()">审核</button>
|
||
<button class="modal-btn modal-btn-primary" onclick="closeModal('publishModal')">一键发布</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 设置弹窗 -->
|
||
<div class="modal-overlay" id="settingsModal">
|
||
<div class="modal-content">
|
||
<div class="modal-title">设置</div>
|
||
<div class="modal-tabs">
|
||
<button class="modal-tab-btn active" onclick="switchModalTab(this, 'gameSet')">游戏设置</button>
|
||
<button class="modal-tab-btn" onclick="switchModalTab(this, 'homeSet')">主页设置</button>
|
||
<button class="modal-tab-btn" onclick="switchModalTab(this, 'props')">道具</button>
|
||
</div>
|
||
<div class="modal-tab-content active" id="gameSet">
|
||
<div class="modal-item">游戏名称修改</div>
|
||
<div class="modal-item">游戏描述修改</div>
|
||
<div class="modal-item">游戏封面修改</div>
|
||
</div>
|
||
<div class="modal-tab-content" id="homeSet">
|
||
<div class="modal-item">主页展示设置</div>
|
||
<div class="modal-item">作品可见性设置</div>
|
||
</div>
|
||
<div class="modal-tab-content" id="props">
|
||
<div class="modal-item">道具列表（生成游戏内道具）</div>
|
||
</div>
|
||
<div class="modal-item" onclick="closeModal('settingsModal')" style="text-align:center;color:#999;margin-top:15px">关闭</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 审核弹窗 -->
|
||
<div class="modal-overlay" id="auditModal">
|
||
<div class="modal-content">
|
||
<div class="modal-title">提交审核</div>
|
||
<div style="margin-bottom:15px;">游戏将提交至平台审核，审核通过后即可发布上线。</div>
|
||
<div class="modal-buttons">
|
||
<button class="modal-btn modal-btn-secondary" onclick="closeModal('auditModal')">取消</button>
|
||
<button class="modal-btn modal-btn-primary" onclick="closeModal('auditModal')">提交审核</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 游戏数据
|
||
const gameStats = [
|
||
{ play: "18.6万", like: "3.2万", comment: "5126", collect: "8963", share: "2415", fav: "7689" },
|
||
{ play: "12.3万", like: "2.8万", comment: "3892", collect: "6231", share: "1864", fav: "5217" },
|
||
{ play: "25.1万", like: "5.7万", comment: "7210", collect: "12560", share: "3698", fav: "9842" },
|
||
{ play: "9.8万", like: "1.9万", comment: "2678", collect: "4125", share: "1206", fav: "3568" },
|
||
{ play: "32.4万", like: "8.1万", comment: "9543", collect: "15892", share: "4721", fav: "12653" },
|
||
{ play: "15.7万", like: "3.4万", comment: "4120", collect: "7569", share: "2136", fav: "6428" },
|
||
{ play: "21.0万", like: "4.5万", comment: "6031", collect: "10235", share: "2987", fav: "8156" },
|
||
{ play: "7.5万", like: "1.2万", comment: "1890", collect: "3012", share: "954", fav: "2871" },
|
||
{ play: "19.2万", like: "3.9万", comment: "5347", collect: "9147", share: "2653", fav: "7239" },
|
||
{ play: "11.6万", like: "2.3万", comment: "3105", collect: "5684", share: "1592", fav: "4685" },
|
||
{ play: "28.9万", like: "6.3万", comment: "8762", collect: "13698", share: "4105", fav: "10927" },
|
||
{ play: "14.5万", like: "3.1万", comment: "4876", collect: "8251", share: "2348", fav: "6914" }
|
||
];
|
||
|
||
// 更新数据
|
||
function updateToolbar(index) {
|
||
const s = gameStats[index];
|
||
document.getElementById('playCount').textContent = s.play;
|
||
document.getElementById('likeCount').textContent = s.like;
|
||
document.getElementById('commentCount').textContent = s.comment;
|
||
document.getElementById('collectCount').textContent = s.collect;
|
||
document.getElementById('shareCount').textContent = s.share;
|
||
document.getElementById('favCount').textContent = s.fav;
|
||
}
|
||
|
||
// 页面切换
|
||
const pages = document.querySelectorAll('.page');
|
||
const tabItems = document.querySelectorAll('.tab-item');
|
||
const toolbar = document.getElementById('toolbar');
|
||
|
||
function switchTab(index){
|
||
pages.forEach(p=>p.classList.remove('active'));
|
||
tabItems.forEach(t=>t.classList.remove('active'));
|
||
pages[index].classList.add('active');
|
||
tabItems[index].classList.add('active');
|
||
toolbar.style.display = index === 1 ? 'flex' : 'none';
|
||
// 切换到创作页时，默认显示主界面
|
||
if(index === 2) {
|
||
document.getElementById('createMainPage').style.display = 'flex';
|
||
document.getElementById('createMakePage').style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// AI创作 - 主页面
|
||
function sendCreate(){
|
||
const input = document.getElementById('createInput');
|
||
const history = document.getElementById('chatHistory');
|
||
const result = document.getElementById('createResult');
|
||
const val = input.value.trim();
|
||
if(!val) return;
|
||
|
||
const userItem = document.createElement('div');
|
||
userItem.className = 'chat-item chat-user';
|
||
userItem.innerHTML = `<div class="chat-content">${val}</div>`;
|
||
history.appendChild(userItem);
|
||
|
||
setTimeout(()=>{
|
||
const aiItem = document.createElement('div');
|
||
aiItem.className = 'chat-item chat-ai';
|
||
aiItem.innerHTML = `<div class="chat-content">已解析你的IP创作需求，自动适配对应IP美术风格、玩法逻辑，生成可直接上架的AI剧情/解谜/经营模拟小游戏，支持合规审核与多平台一键发布。</div>`;
|
||
history.appendChild(aiItem);
|
||
result.classList.add('show');
|
||
history.scrollTop = history.scrollHeight;
|
||
},1000)
|
||
input.value = '';
|
||
}
|
||
|
||
// 滑动逻辑
|
||
let startY = 0, moveY = 0, currentIndex = 0;
|
||
const container = document.getElementById('playContainer');
|
||
const itemLen = document.querySelectorAll('.play-item').length;
|
||
const moveThreshold = 80;
|
||
|
||
document.getElementById('playPage').addEventListener('touchstart',e=>{ startY = e.touches[0].clientY; moveY=0; })
|
||
document.getElementById('playPage').addEventListener('touchmove',e=>{
|
||
moveY = e.touches[0].clientY - startY;
|
||
container.style.transform = `translateY(calc(-${currentIndex*100}% + ${moveY}px))`;
|
||
})
|
||
document.getElementById('playPage').addEventListener('touchend',()=>{
|
||
if(moveY < -moveThreshold && currentIndex < itemLen-1) currentIndex++;
|
||
else if(moveY > moveThreshold && currentIndex > 0) currentIndex--;
|
||
container.style.transform = `translateY(-${currentIndex*100}%)`;
|
||
updateToolbar(currentIndex);
|
||
moveY=0;
|
||
})
|
||
|
||
// ========== 创作页新功能 ==========
|
||
// 打开游戏制作页面
|
||
function openCreateMakePage() {
|
||
document.getElementById('createMainPage').style.display = 'none';
|
||
document.getElementById('createMakePage').style.display = 'flex';
|
||
}
|
||
|
||
// 发送制作请求
|
||
function sendMakeCreate() {
|
||
const input = document.getElementById('makeInput');
|
||
const history = document.getElementById('makeChatHistory');
|
||
const val = input.value.trim();
|
||
if(!val) return;
|
||
|
||
const userItem = document.createElement('div');
|
||
userItem.className = 'chat-item chat-user';
|
||
userItem.innerHTML = `<div class="chat-content">${val}</div>`;
|
||
history.appendChild(userItem);
|
||
|
||
document.getElementById('progressBarWrap').style.display = 'block';
|
||
startProgress();
|
||
|
||
setTimeout(()=>{
|
||
const aiItem = document.createElement('div');
|
||
aiItem.className = 'chat-item chat-ai';
|
||
aiItem.innerHTML = `<div class="chat-content">已解析你的IP创作需求，开始制作游戏...</div>`;
|
||
history.appendChild(aiItem);
|
||
history.scrollTop = history.scrollHeight;
|
||
},1000)
|
||
input.value = '';
|
||
}
|
||
|
||
// 进度条逻辑
|
||
let progressInterval;
|
||
function startProgress() {
|
||
let progress = 0;
|
||
const fill = document.getElementById('progressFill');
|
||
const timeEl = document.getElementById('progressTime');
|
||
let seconds = 8*60 + 54;
|
||
|
||
progressInterval = setInterval(() => {
|
||
if(progress >= 100) {
|
||
clearInterval(progressInterval);
|
||
document.getElementById('progressBarWrap').style.display = 'none';
|
||
// 制作完成后自动切换到预览页
|
||
switchMakeTab(document.querySelector('.make-tab-btn:nth-child(2)'), 'preview');
|
||
return;
|
||
}
|
||
progress += 0.1;
|
||
fill.style.width = progress + '%';
|
||
seconds--;
|
||
const min = Math.floor(seconds / 60);
|
||
const sec = seconds % 60;
|
||
timeEl.textContent = `${min}:${sec.toString().padStart(2,'0')}`;
|
||
}, 100);
|
||
}
|
||
|
||
function toggleProgress() {
|
||
if(progressInterval) {
|
||
clearInterval(progressInterval);
|
||
progressInterval = null;
|
||
document.querySelector('.progress-pause-btn').textContent = '▶';
|
||
} else {
|
||
startProgress();
|
||
document.querySelector('.progress-pause-btn').textContent = '■';
|
||
}
|
||
}
|
||
|
||
// 切换制作页tab
|
||
function switchMakeTab(btn, tabId) {
|
||
document.querySelectorAll('.make-tab-btn').forEach(b => b.classList.remove('active'));
|
||
document.querySelectorAll('.make-tab-content').forEach(c => c.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
document.getElementById(tabId + 'Tab').classList.add('active');
|
||
}
|
||
|
||
// 弹窗控制
|
||
function openGameActionsModal() {
|
||
document.getElementById('gameActionsModal').style.display = 'flex';
|
||
}
|
||
function openPublishModal() {
|
||
document.getElementById('publishModal').style.display = 'flex';
|
||
}
|
||
function openSettingsModal() {
|
||
document.getElementById('settingsModal').style.display = 'flex';
|
||
}
|
||
function openAuditModal() {
|
||
document.getElementById('auditModal').style.display = 'flex';
|
||
}
|
||
function closeModal(id) {
|
||
document.getElementById(id).style.display = 'none';
|
||
}
|
||
|
||
// 游戏操作
|
||
function gameAction(action) {
|
||
closeModal('gameActionsModal');
|
||
if(action === 'edit') {
|
||
openCreateMakePage();
|
||
}
|
||
}
|
||
|
||
// 设置弹窗tab切换
|
||
function switchModalTab(btn, tabId) {
|
||
document.querySelectorAll('.modal-tab-btn').forEach(b => b.classList.remove('active'));
|
||
document.querySelectorAll('.modal-tab-content').forEach(c => c.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
document.getElementById(tabId).classList.add('active');
|
||
}
|
||
|
||
// 初始化
|
||
updateToolbar(0);
|
||
toolbar.style.display = 'none';
|
||
</script>
|
||
</body>
|
||
</html> |