shiyue/DFJ
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

统一样式

Browse Source
This commit is contained in:
史悦
2025-09-11 13:17:27 +08:00
parent 483ab26505
commit adbd205b7e
7 changed files with 942 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
01_文档/原型设计/01_入口页面.html
View File

@@ -8,6 +8,32 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 引入统一样式文件 -->
<link rel="stylesheet" href="common-styles.css">
<style>
/* 页面特有的样式补充 */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
padding: var(--safe-area-padding);
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
.game-modes {
width: 100%;
max-width: 350px;
display: flex;
flex-direction: column;
gap: 16px;
}
</style>
<!-- 保留原有的所有样式定义 -->
<style>
/* 设计变量 */
:root {
@@ -687,6 +713,9 @@
</main>
</div>
<!-- 引入导航功能 -->
<script src="navigation.js"></script>
<script>
// 创建动态星空背景
function createStarField() {
@@ -716,37 +745,25 @@
});
}
// 游戏模式按钮点击事件
// 游戏模式按钮点击事件 - 使用导航功能
document.getElementById('quickStart').addEventListener('click', () => {
console.log('快速开始 - 和AI对战');
if ('vibrate' in navigator) {
navigator.vibrate(15);
}
// 这里可以添加跳转到AI对战页面的逻辑
handleGameModeSelection('quickStart');
});
document.getElementById('onlineMatch').addEventListener('click', () => {
console.log('自动匹配 - 在线匹配对战');
if ('vibrate' in navigator) {
navigator.vibrate(15);
}
// 这里可以添加跳转到匹配页面的逻辑
handleGameModeSelection('onlineMatch');
});
document.getElementById('createRoom').addEventListener('click', () => {
console.log('创建房间');
if ('vibrate' in navigator) {
navigator.vibrate(10);
}
// 这里可以添加跳转到创建房间页面的逻辑
handleGameModeSelection('createRoom');
});
document.getElementById('joinGame').addEventListener('click', () => {
console.log('加入游戏');
if ('vibrate' in navigator) {
navigator.vibrate(10);
}
// 这里可以添加跳转到加入游戏页面的逻辑
handleGameModeSelection('joinGame');
});
// 设置按钮点击事件

25
01_文档/原型设计/02_房间等待[房主].html
View File

@@ -4,6 +4,13 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>房间等待 - 打飞机对战</title>
<!-- 引入通用样式 -->
<link rel="stylesheet" href="common-styles.css">
<!-- 引入导航功能 -->
<script src="navigation.js"></script>
<style>
/* 基础CSS变量 */
:root {
@@ -434,7 +441,12 @@
console.log('返回上一页');
// 添加触觉反馈
vibrate();
// 实际项目中这里应该调用路由返回或页面跳转
// 使用导航功能返回入口页面
if (typeof navigateTo === 'function') {
navigateTo('entry');
} else {
window.location.href = '01_入口页面.html';
}
}
@@ -456,8 +468,15 @@
vibrate();
// 检查是否所有玩家都准备
alert('游戏即将开始...');
// 实际项目中这里应该跳转到游戏页面
showToast('游戏即将开始...');
// 跳转到准备页面
setTimeout(() => {
if (typeof navigateTo === 'function') {
navigateTo('preparation');
} else {
window.location.href = '04_准备页面.html';
}
}, 1000);
}
// 分享房间码

167
01_文档/原型设计/03_加入房间列表.html
View File

@@ -4,77 +4,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>加入房间 - 打飞机对战</title>
<!-- 引入通用样式 -->
<link rel="stylesheet" href="common-styles.css">
<style>
/* 基础CSS变量 */
:root {
/* 主色调 - 深空科技蓝 */
--primary-color: #6366f1;
--primary-light: #8b5cf6;
--primary-dark: #4f46e5;
/* 辅助色 - 科技青色 */
--secondary-color: #40e0d0;
--secondary-light: #26d0ce;
/* 强调色 - 橙色 */
--accent-color: #f59e0b;
--accent-light: #fbbf24;
/* 危险色 - 红色 */
--danger-color: #ff4757;
--danger-light: #ff6b6b;
/* 成功色 - 绿色 */
--success-color: #4ade80;
--success-light: #6ee7b7;
/* 背景色系 - 深色渐变 */
--bg-primary: #0f1419;
--bg-secondary: #1a1d29;
--bg-tertiary: #252837;
--bg-elevated: #2d3142;
/* 渐变背景 */
--gradient-bg: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
/* 边框色系 */
--border-primary: #3d4159;
--border-secondary: #4a5073;
--border-highlight: #6366f1;
--border-accent: rgba(64, 224, 208, 0.3);
/* 文字色系 */
--text-primary: #ffffff;
--text-secondary: #b4b7c9;
--text-tertiary: #9ca3af;
--text-disabled: #6b7280;
/* 触摸目标尺寸 */
--touch-target-min: 44px;
--safe-area-padding: 20px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft YaHei UI", sans-serif;
background: var(--gradient-bg);
color: var(--text-primary);
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
}
/* 加入房间列表页面特定样式 */
.safe-area {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
@@ -82,51 +17,6 @@
padding-bottom: env(safe-area-inset-bottom);
}
.app-container {
flex: 1;
display: flex;
flex-direction: column;
padding: var(--safe-area-padding);
max-width: 400px;
margin: 0 auto;
width: 100%;
}
/* 头部导航 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
margin-bottom: 20px;
}
.back-btn {
width: 40px;
height: 40px;
border: none;
background: rgba(99, 102, 241, 0.15);
border-radius: 12px;
color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 18px;
}
.back-btn:active {
transform: scale(0.95);
background: rgba(99, 102, 241, 0.25);
}
.page-title {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
}
.placeholder {
width: 40px;
}
@@ -478,6 +368,9 @@
</section>
</div>
<!-- 引入导航功能 -->
<script src="navigation.js"></script>
<script>
// 房间数据模拟
const mockRooms = [
@@ -506,8 +399,17 @@
// 返回上一页
function goBack() {
console.log('返回上一页');
vibrate();
// 实际项目中这里应该调用路由返回
if (typeof window.vibrate === 'function') {
window.vibrate();
} else {
vibrate();
}
// 使用导航功能返回入口页面
if (typeof navigateTo === 'function') {
navigateTo('entry');
} else {
window.location.href = '01_入口页面.html';
}
}
// 搜索房间
@@ -525,7 +427,11 @@
}
console.log('搜索房间:', roomNumber);
vibrate();
if (typeof window.vibrate === 'function') {
window.vibrate();
} else {
vibrate();
}
showLoading();
// 模拟搜索延迟
@@ -543,16 +449,23 @@
// 加入房间
function joinRoom(roomId) {
console.log('加入房间:', roomId);
vibrate();
if (confirm('确定要加入房间 ' + roomId + ' 吗？')) {
showToast('正在加入房间...');
// 实际项目中这里应该调用加入房间的API
setTimeout(() => {
showToast('加入成功！');
// 跳转到房间等待页面
}, 1500);
if (typeof window.vibrate === 'function') {
window.vibrate();
} else {
vibrate();
}
showToast('正在加入房间...');
// 实际项目中这里应该调用加入房间的API
setTimeout(() => {
showToast('加入成功！');
// 跳转到房间等待页面
if (typeof navigateTo === 'function') {
navigateTo('roomWaiting');
} else {
window.location.href = '02_房间等待[房主].html';
}
}, 1500);
}
// 观战房间

24
01_文档/原型设计/04_准备页面.html
View File

@@ -8,7 +8,14 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 引入通用样式 -->
<link rel="stylesheet" href="common-styles.css">
<!-- 引入导航功能 -->
<script src="navigation.js"></script>
<style>
/* 页面特定样式 - 覆盖通用样式中的部分设置 */
:root {
--primary-color: #6366f1;
--primary-light: #8b5cf6;
@@ -495,12 +502,19 @@
completePlacement() {
if(this.planes.every(p => p.isPlaced)) {
this.updateStatus("准备就绪，等待对手...");
this.updateStatus("准备就绪，正在进入对战...");
localStorage.setItem('playerPlanes', JSON.stringify(this.planes));
// 禁用所有按钮
Object.values(this.dom).flat().forEach(el => {
if(el.tagName === 'BUTTON') el.disabled = true;
});
// 延迟1秒后跳转到对战页面
setTimeout(() => {
if (typeof window.completePlacementAndNavigate === 'function') {
window.completePlacementAndNavigate();
} else if (typeof navigateTo === 'function') {
navigateTo('battle');
} else {
window.location.href = '05_对战页面.html';
}
}, 1000);
} else {
this.updateStatus("请先放置所有飞机。");
}

136
01_文档/原型设计/05_对战页面.html
View File

@@ -8,73 +8,13 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 引入通用样式 -->
<link rel="stylesheet" href="common-styles.css">
<style>
/* 页面特定CSS变量 */
:root {
/* 色彩系统 */
--primary-color: #6366f1;
--primary-light: #8b5cf6;
--primary-dark: #4f46e5;
--secondary-color: #40e0d0;
--secondary-light: #26d0ce;
--accent-color: #f59e0b;
--accent-light: #fbbf24;
--danger-color: #ff4757;
--danger-light: #ff6b6b;
--success-color: #10b981;
/* 背景色系 */
--bg-primary: #0f1419;
--bg-secondary: #1a1d29;
--bg-tertiary: #252837;
--bg-elevated: #2d3142;
--gradient-bg: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
/* 边框色系 */
--border-primary: #3d4159;
--border-secondary: #4a5073;
--border-highlight: #6366f1;
--border-accent: rgba(64, 224, 208, 0.3);
/* 文字色系 */
--text-primary: #ffffff;
--text-secondary: #b4b7c9;
--text-tertiary: #9ca3af;
--text-disabled: #6b7280;
/* 移动端适配 */
--cell-size: min(8.5vw, 36px);
--safe-area-padding: 16px;
--touch-target-min: 44px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
html, body {
height: 100%;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft YaHei UI", sans-serif;
}
body {
background: var(--gradient-bg);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
touch-action: manipulation;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.app-container {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
/* 顶部状态栏 */
@@ -380,73 +320,7 @@
gap: 4px;
}
/* 按钮样式 */
.btn {
min-height: var(--touch-target-min);
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
padding: 10px 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
user-select: none;
position: relative;
overflow: hidden;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: #ffffff;
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}
.btn-primary:active {
transform: translateY(1px);
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}
.btn-success {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
color: #1a1a2e;
box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3);
}
.btn-danger {
background: linear-gradient(135deg, var(--danger-color), var(--danger-light));
color: white;
box-shadow: 0 4px 16px rgba(255, 71, 87, 0.3);
}
.btn-secondary {
background: rgba(99, 102, 241, 0.15);
color: var(--primary-color);
border: 1px solid var(--primary-color);
backdrop-filter: blur(10px);
}
.btn-secondary:active {
background: rgba(99, 102, 241, 0.25);
transform: translateY(1px);
}
.btn:disabled {
background: var(--bg-tertiary) !important;
color: var(--text-disabled) !important;
border: 1px solid var(--border-primary) !important;
opacity: 0.6;
cursor: not-allowed;
box-shadow: none !important;
}
.btn:disabled:active {
transform: none !important;
}
/* 页面特定按钮样式覆盖 */
.plane-btn.placed {
background: var(--primary-color) !important;
color: white;

755
01_文档/原型设计/common-styles.css Normal file
View File

@@ -0,0 +1,755 @@
/* 打飞机对战小程序 - 统一样式表 */
/* 从所有原型页面提取的通用样式 */
/* ========== CSS变量定义 ========== */
:root {
/* 主色调 - 深空科技蓝 */
--primary-color: #6366f1;
--primary-light: #8b5cf6;
--primary-dark: #4f46e5;
/* 辅助色 - 科技青色 */
--secondary-color: #40e0d0;
--secondary-light: #26d0ce;
/* 强调色 - 橙色 */
--accent-color: #f59e0b;
--accent-light: #fbbf24;
/* 危险色 - 红色 */
--danger-color: #ff4757;
--danger-light: #ff6b6b;
/* 成功色 - 绿色 */
--success-color: #10b981;
--success-light: #4ade80;
/* 背景色系 - 深色渐变 */
--bg-primary: #0f1419;
--bg-secondary: #1a1d29;
--bg-tertiary: #252837;
--bg-elevated: #2d3142;
/* 渐变背景 */
--gradient-bg: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
/* 边框色系 */
--border-primary: #3d4159;
--border-secondary: #4a5073;
--border-highlight: #6366f1;
--border-accent: rgba(64, 224, 208, 0.3);
/* 文字色系 */
--text-primary: #ffffff;
--text-secondary: #b4b7c9;
--text-tertiary: #9ca3af;
--text-disabled: #6b7280;
/* 移动端触摸区域尺寸 */
--touch-target-min: 44px;
--safe-area-padding: 20px;
--cell-size: min(8.5vw, 38px);
}
/* ========== 基础重置样式 ========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
html, body {
height: 100%;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft YaHei UI", sans-serif;
background: var(--gradient-bg);
color: var(--text-primary);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
touch-action: manipulation;
user-select: none;
}
/* ========== 安全区域适配 ========== */
.safe-area {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
/* ========== 动态星空背景 ========== */
.star-field {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.star {
position: absolute;
background: rgba(64, 224, 208, 0.8);
border-radius: 50%;
animation: twinkle 3s infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
/* ========== 主容器布局 ========== */
.app-container {
display: flex;
flex-direction: column;
min-height: 100vh;
position: relative;
z-index: 1;
}
/* ========== 顶部导航栏 ========== */
.user-header, .status-header, .header {
background: rgba(26, 29, 41, 0.95);
backdrop-filter: blur(20px);
padding: 15px var(--safe-area-padding);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-primary);
position: sticky;
top: 0;
z-index: 100;
}
.top-nav {
padding: 12px var(--safe-area-padding);
border-bottom: 1px solid var(--border-primary);
text-align: center;
font-weight: 600;
background: rgba(15, 20, 25, 0.8);
backdrop-filter: blur(10px);
}
/* ========== 用户信息组件 ========== */
.user-info {
display: flex;
align-items: center;
gap: 12px;
}
.user-avatar, .player-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 600;
color: white;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.user-details h3 {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.user-level {
font-size: 12px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 4px;
}
.level-badge {
background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-light) 100%);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
}
/* ========== 通用按钮样式 ========== */
.btn {
min-height: var(--touch-target-min);
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
padding: 14px 24px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
user-select: none;
-webkit-tap-highlight-color: transparent;
position: relative;
overflow: hidden;
}
/* 主要按钮样式 */
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: #ffffff;
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}
.btn-primary::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s;
}
.btn-primary:hover, .btn-primary:focus {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}
.btn-primary:active::before {
width: 100%;
height: 100%;
}
/* 成功按钮样式 */
.btn-success {
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
color: #1a1a2e;
box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3);
}
.btn-success::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s;
}
.btn-success:hover, .btn-success:focus {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(64, 224, 208, 0.4);
}
.btn-success:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(64, 224, 208, 0.4);
}
.btn-success:active::before {
width: 100%;
height: 100%;
}
/* 次要按钮样式 */
.btn-secondary {
background: rgba(99, 102, 241, 0.15);
color: var(--primary-color);
border: 1px solid var(--primary-color);
backdrop-filter: blur(10px);
}
.btn-secondary::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(99, 102, 241, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s;
}
.btn-secondary:hover, .btn-secondary:focus {
background: rgba(99, 102, 241, 0.25);
transform: translateY(-1px);
}
.btn-secondary:active {
transform: translateY(0);
}
.btn-secondary:active::before {
width: 100%;
height: 100%;
}
/* 危险按钮样式 */
.btn-danger {
background: linear-gradient(135deg, var(--danger-color), var(--danger-light));
color: white;
box-shadow: 0 4px 16px rgba(255, 71, 87, 0.3);
}
/* 按钮禁用状态 */
.btn:disabled {
background: var(--bg-tertiary) !important;
color: var(--text-disabled) !important;
border: 1px solid var(--border-primary) !important;
opacity: 0.6;
cursor: not-allowed;
box-shadow: none !important;
}
.btn:disabled:active {
transform: none !important;
}
/* 按钮图标和副标题 */
.button-icon {
font-size: 18px;
}
.button-subtitle {
font-size: 12px;
opacity: 0.8;
font-weight: 400;
}
/* ========== 设置和操作按钮 ========== */
.settings-btn, .back-btn, .share-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 20px;
}
.settings-btn {
background: rgba(99, 102, 241, 0.15);
border: 1px solid var(--primary-color);
color: var(--primary-color);
}
.back-btn {
background: rgba(99, 102, 241, 0.15);
border-radius: 12px;
color: var(--primary-color);
font-size: 18px;
}
.share-btn {
background: rgba(64, 224, 208, 0.15);
border-radius: 12px;
color: var(--secondary-color);
font-size: 16px;
}
.settings-btn:hover, .back-btn:active, .share-btn:active {
transform: scale(1.05);
}
.settings-btn:active, .back-btn:active, .share-btn:active {
transform: scale(0.95);
}
/* ========== 卡片样式 ========== */
.title-card, .rules-card {
width: 100%;
max-width: 400px;
background: rgba(22, 33, 62, 0.8);
border: 1px solid rgba(64, 224, 208, 0.3);
border-radius: 16px;
padding: 30px 20px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.title-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
}
/* 游戏标题 */
.game-title {
font-size: 28px;
font-weight: 700;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--secondary-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
position: relative;
}
.game-subtitle {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 20px;
}
/* ========== 飞机装饰 ========== */
.plane-decoration {
position: absolute;
opacity: 0.1;
font-size: 60px;
color: var(--primary-color);
}
.plane-decoration.top-left {
top: 10px;
left: 10px;
transform: rotate(-45deg);
}
.plane-decoration.top-right {
top: 10px;
right: 10px;
transform: rotate(45deg);
}
.plane-decoration.bottom-left {
bottom: 10px;
left: 10px;
transform: rotate(135deg);
}
.plane-decoration.bottom-right {
bottom: 10px;
right: 10px;
transform: rotate(-135deg);
}
/* ========== 游戏规则样式 ========== */
.rules-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.rules-icon {
width: 24px;
height: 24px;
background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #1a1a2e;
font-weight: 600;
}
.rules-title {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
.rules-content {
text-align: left;
}
.rule-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.5;
}
.rule-item:last-child {
margin-bottom: 0;
}
.rule-number {
min-width: 20px;
height: 20px;
background: rgba(99, 102, 241, 0.2);
border: 1px solid var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
color: var(--primary-color);
margin-top: 2px;
}
/* ========== 游戏棋盘样式 ========== */
.board-wrapper {
position: relative;
}
.game-board {
display: grid;
grid-template-columns: repeat(10, var(--cell-size));
grid-template-rows: repeat(10, var(--cell-size));
gap: 1px;
background: var(--border-primary);
border: 1px solid var(--border-primary);
}
.board-cell {
background: var(--bg-secondary);
transition: background-color 0.2s;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
position: relative;
cursor: pointer;
user-select: none;
font-weight: 600;
}
.board-cell:active {
background-color: var(--border-highlight);
transform: scale(0.95);
border-color: var(--secondary-color);
}
/* 棋盘飞机状态 */
.board-cell.plane-part { background-color: var(--primary-color); }
.board-cell.plane-head { background-color: var(--accent-color); }
.board-cell.plane-body { background-color: var(--primary-light); }
.board-cell.plane-wing { background-color: var(--primary-light); }
.board-cell.plane-tail { background-color: var(--primary-color); }
.board-cell.selected { box-shadow: inset 0 0 0 2px var(--success-color); z-index: 1; }
/* 坐标轴标识 */
.col-label, .row-label {
position: absolute;
font-size: 10px;
color: var(--text-tertiary);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
.col-label {
top: -20px;
height: 15px;
width: var(--cell-size);
}
.row-label {
left: -20px;
width: 15px;
height: var(--cell-size);
}
/* ========== 输入框样式 ========== */
.search-input {
flex: 1;
height: var(--touch-target-min);
padding: 0 16px;
background: rgba(22, 33, 62, 0.8);
border: 1px solid rgba(64, 224, 208, 0.3);
border-radius: 12px;
color: var(--text-primary);
font-size: 16px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.search-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.search-input::placeholder {
color: var(--text-tertiary);
}
/* ========== 状态徽章 ========== */
.status-badge {
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
}
.status-ready {
background: rgba(64, 224, 208, 0.2);
color: var(--secondary-color);
}
.status-waiting {
background: rgba(156, 163, 175, 0.2);
color: var(--text-tertiary);
}
/* ========== 网络状态和指示器 ========== */
.network-status {
display: flex;
align-items: center;
gap: 6px;
color: var(--text-tertiary);
}
.connection-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--secondary-color);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.3); }
}
.turn-indicator {
padding: 6px 16px;
border-radius: 16px;
font-size: 14px;
font-weight: 600;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.turn-indicator.my-turn {
background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%);
color: #1a1a2e;
box-shadow: 0 4px 20px rgba(64, 224, 208, 0.4);
}
.turn-indicator.opponent-turn {
background: linear-gradient(135deg, rgba(255, 71, 87, 0.9) 0%, rgba(255, 56, 56, 0.9) 100%);
color: white;
border: 1px solid rgba(255, 71, 87, 0.6);
box-shadow: 0 4px 20px rgba(255, 71, 87, 0.3);
}
/* ========== 响应式设计 ========== */
@media (max-width: 375px) {
:root {
--cell-size: min(8vw, 32px);
}
.user-header {
padding: 12px var(--safe-area-padding);
}
.user-avatar, .player-avatar {
width: 36px;
height: 36px;
font-size: 16px;
}
.game-title {
font-size: 24px;
}
.btn {
font-size: 16px;
min-height: 42px;
padding: 14px 24px;
}
}
@media (max-height: 640px) {
.main-content {
padding-top: 15px;
padding-bottom: 15px;
}
.title-card, .rules-card {
margin-bottom: 20px;
padding: 20px;
}
.game-title {
margin-bottom: 8px;
}
}
/* ========== 辅助功能支持 ========== */
@media (prefers-contrast: high) {
:root {
--text-primary: #ffffff;
--text-secondary: #e5e5e5;
--border-primary: #ffffff;
--bg-secondary: #000000;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (prefers-color-scheme: dark) {
body {
background: var(--bg-primary);
color: var(--text-primary);
}
}
/* ========== 触觉反馈动画 ========== */
.haptic-feedback {
animation: hapticVibrate 0.1s ease-out;
}
@keyframes hapticVibrate {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-1px); }
75% { transform: translateX(1px); }
}

67
01_文档/原型设计/navigation.js Normal file
View File

@@ -0,0 +1,67 @@
/* 打飞机对战小程序 - 页面导航功能 */
// 页面路径映射
const routes = {
'entry': '01_入口页面.html',
'preparation': '04_准备页面.html',
'battle': '05_对战页面.html',
'roomWaiting': '02_房间等待[房主].html',
'joinRoom': '03_加入房间列表.html'
};
// 简单的触觉反馈
function vibrate() {
if ('vibrate' in navigator) {
navigator.vibrate(10);
}
}
// 主要导航函数
function navigateTo(routeKey) {
vibrate();
const pagePath = routes[routeKey];
if (!pagePath) {
console.error('未找到路由:', routeKey);
return;
}
console.log('导航到:', pagePath);
window.location.href = pagePath;
}
// 游戏模式选择处理
function handleGameModeSelection(mode) {
vibrate();
switch(mode) {
case 'quickStart':
case 'onlineMatch':
console.log(`${mode} - 进入准备页面`);
navigateTo('preparation');
break;
case 'createRoom':
console.log('createRoom - 进入房间等待页面');
navigateTo('roomWaiting');
break;
case 'joinGame':
console.log('joinGame - 进入房间列表页面');
navigateTo('joinRoom');
break;
default:
console.warn('未知的游戏模式:', mode);
}
}
// 从准备页面完成后跳转到对战页面
function completePlacementAndNavigate() {
vibrate();
console.log('准备完成，进入对战页面');
navigateTo('battle');
}
// 全局导出，确保函数可用
window.navigateTo = navigateTo;
window.handleGameModeSelection = handleGameModeSelection;
window.completePlacementAndNavigate = completePlacementAndNavigate;
window.vibrate = vibrate;