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

Initial commit

Browse Source
This commit is contained in:
史悦
2025-09-10 18:13:28 +08:00
commit 40f3e2dedb
24 changed files with 14886 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,606 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>打飞机对战小程序</title>
<meta name="theme-color" content="#0f1419">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<style>
/* 设计变量 */
: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;
/* 背景色系 - 深色渐变 */
--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-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;
}
/* 安全区域适配 */
.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 {
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;
}
.user-info {
display: flex;
align-items: center;
gap: 12px;
}
.user-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;
}
.settings-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(99, 102, 241, 0.15);
border: 1px solid var(--primary-color);
color: var(--primary-color);
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.settings-btn:hover {
background: rgba(99, 102, 241, 0.25);
transform: scale(1.05);
}
.settings-btn:active {
transform: scale(0.95);
}
/* 主内容区域 */
.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;
}
/* 游戏标题卡片 */
.title-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-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: 25px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
}
.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;
}
/* 开始按钮 */
.start-button {
width: 100%;
max-width: 300px;
min-height: var(--touch-target-min);
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
padding: 16px 32px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
color: #ffffff;
box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
user-select: none;
-webkit-tap-highlight-color: transparent;
position: relative;
overflow: hidden;
}
.start-button::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;
}
.start-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(99, 102, 241, 0.5);
}
.start-button:active {
transform: translateY(0);
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}
.start-button:active::before {
width: 100%;
height: 100%;
}
.button-icon {
font-size: 20px;
}
/* 响应式设计 */
@media (max-width: 375px) {
.user-header {
padding: 12px var(--safe-area-padding);
}
.user-avatar {
width: 36px;
height: 36px;
font-size: 16px;
}
.game-title {
font-size: 24px;
}
.start-button {
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);
}
}
</style>
</head>
<body class="safe-area">
<!-- 动态星空背景 -->
<div class="star-field" id="starField"></div>
<div class="app-container">
<!-- 顶部用户信息栏 -->
<header class="user-header">
<div class="user-info">
<div class="user-avatar">👤</div>
<div class="user-details">
<h3>玩家昵称</h3>
</div>
</div>
<button class="settings-btn">⚙️</button>
</header>
<!-- 主内容区域 -->
<main class="main-content">
<!-- 游戏标题卡片 -->
<div class="title-card">
<div class="plane-decoration top-left">✈️</div>
<div class="plane-decoration top-right">✈️</div>
<div class="plane-decoration bottom-left">✈️</div>
<div class="plane-decoration bottom-right">✈️</div>
<h1 class="game-title">打飞机对战</h1>
<p class="game-subtitle">经典策略游戏，智慧与技巧的较量</p>
</div>
<!-- 游戏规则卡片 -->
<div class="rules-card">
<div class="rules-header">
<div class="rules-icon">📖</div>
<h2 class="rules-title">游戏规则</h2>
</div>
<div class="rules-content">
<div class="rule-item">
<div class="rule-number">1</div>
<div>双人轮流攻击对方棋盘，猜测飞机位置</div>
</div>
<div class="rule-item">
<div class="rule-number">2</div>
<div>击中飞机部件获得分数，未命中则轮到对手</div>
</div>
<div class="rule-item">
<div class="rule-number">3</div>
<div>先击毁对方所有飞机的玩家获胜</div>
</div>
</div>
</div>
<!-- 开始按钮 -->
<button class="start-button" id="startGame">
<span class="button-icon">🚀</span>
开始游戏
</button>
</main>
</div>
<script>
// 创建动态星空背景
function createStarField() {
const starField = document.getElementById('starField');
const numStars = 50;
for (let i = 0; i < numStars; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.width = Math.random() * 3 + 'px';
star.style.height = star.style.width;
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.animationDelay = Math.random() * 3 + 's';
starField.appendChild(star);
}
}
// 触觉反馈
function addHapticFeedback(element) {
element.addEventListener('click', () => {
if ('vibrate' in navigator) {
navigator.vibrate(10);
}
document.body.classList.add('haptic-feedback');
setTimeout(() => document.body.classList.remove('haptic-feedback'), 100);
});
}
// 开始游戏按钮点击事件
document.getElementById('startGame').addEventListener('click', () => {
// 这里可以添加跳转到游戏页面的逻辑
console.log('开始游戏');
if ('vibrate' in navigator) {
navigator.vibrate(20);
}
});
// 设置按钮点击事件
document.querySelector('.settings-btn').addEventListener('click', () => {
console.log('打开设置');
if ('vibrate' in navigator) {
navigator.vibrate(10);
}
});
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
createStarField();
// 为所有可点击元素添加触觉反馈
addHapticFeedback(document.getElementById('startGame'));
addHapticFeedback(document.querySelector('.settings-btn'));
});
</script>
</body>
</html>