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

feat: 优化入口页面并新增房主等待房间原型在入口页面入口页面.html中，将单个“开始游戏”按钮替换为“快速开始”、“自动匹配”、“创建房间”和“加入游戏”四个游戏模式选项，并重构按钮样式。新增房主视角的房间等待页面原型房间等待[房主].html及其线框图方案。

Browse Source
This commit is contained in:
史悦
2025-09-11 09:33:00 +08:00
parent 40f3e2dedb
commit a94f318818
6 changed files with 965 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -364,32 +364,39 @@
margin-top: 2px;
}
/* 开始按钮 */
.start-button {
/* 游戏模式按钮容器 */
.game-modes {
width: 100%;
max-width: 300px;
max-width: 350px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* 主要按钮样式 */
.btn-primary {
min-height: var(--touch-target-min);
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: 700;
font-size: 16px;
font-weight: 600;
cursor: pointer;
padding: 16px 32px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
padding: 14px 24px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: #ffffff;
box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
gap: 8px;
user-select: none;
-webkit-tap-highlight-color: transparent;
position: relative;
overflow: hidden;
}
.start-button::before {
.btn-primary::before {
content: '';
position: absolute;
top: 50%;
@@ -402,23 +409,131 @@
transition: width 0.3s, height 0.3s;
}
.start-button:hover {
.btn-primary:hover, .btn-primary:focus {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(99, 102, 241, 0.5);
box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}
.start-button:active {
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}
.start-button:active::before {
.btn-primary:active::before {
width: 100%;
height: 100%;
}
/* 成功按钮样式 */
.btn-success {
min-height: var(--touch-target-min);
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
padding: 14px 24px;
background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
color: #1a1a2e;
box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3);
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-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 {
min-height: var(--touch-target-min);
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
padding: 14px 24px;
background: rgba(99, 102, 241, 0.15);
color: var(--primary-color);
border: 1px solid var(--primary-color);
backdrop-filter: blur(10px);
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-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%;
}
.button-icon {
font-size: 20px;
font-size: 18px;
}
.button-subtitle {
font-size: 12px;
opacity: 0.8;
font-weight: 400;
}
/* 响应式设计 */
@@ -508,11 +623,7 @@
<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>
<div class="plane-decoration">✈️</div>
<h1 class="game-title">打飞机对战</h1>
<p class="game-subtitle">经典策略游戏，智慧与技巧的较量</p>
</div>
@@ -539,11 +650,40 @@
</div>
</div>
<!-- 开始按钮 -->
<button class="start-button" id="startGame">
<span class="button-icon">🚀</span>
开始游戏
</button>
<!-- 游戏模式选择 -->
<div class="game-modes">
<button class="btn-primary" id="quickStart">
<span class="button-icon">🤖</span>
<div>
<div>快速开始</div>
<div class="button-subtitle">和AI对战</div>
</div>
</button>
<button class="btn-success" id="onlineMatch">
<span class="button-icon">🌐</span>
<div>
<div>自动匹配</div>
<div class="button-subtitle">在线匹配对战</div>
</div>
</button>
<button class="btn-secondary" id="createRoom">
<span class="button-icon">🏠</span>
<div>
<div>创建房间</div>
<div class="button-subtitle">邀请好友对战</div>
</div>
</button>
<button class="btn-secondary" id="joinGame">
<span class="button-icon">🎯</span>
<div>
<div>加入游戏</div>
<div class="button-subtitle">输入房间号</div>
</div>
</button>
</div>
</main>
</div>
@@ -576,13 +716,37 @@
});
}
// 开始游戏按钮点击事件
document.getElementById('startGame').addEventListener('click', () => {
// 这里可以添加跳转到游戏页面的逻辑
console.log('开始游戏');
// 游戏模式按钮点击事件
document.getElementById('quickStart').addEventListener('click', () => {
console.log('快速开始 - 和AI对战');
if ('vibrate' in navigator) {
navigator.vibrate(20);
navigator.vibrate(15);
}
// 这里可以添加跳转到AI对战页面的逻辑
});
document.getElementById('onlineMatch').addEventListener('click', () => {
console.log('自动匹配 - 在线匹配对战');
if ('vibrate' in navigator) {
navigator.vibrate(15);
}
// 这里可以添加跳转到匹配页面的逻辑
});
document.getElementById('createRoom').addEventListener('click', () => {
console.log('创建房间');
if ('vibrate' in navigator) {
navigator.vibrate(10);
}
// 这里可以添加跳转到创建房间页面的逻辑
});
document.getElementById('joinGame').addEventListener('click', () => {
console.log('加入游戏');
if ('vibrate' in navigator) {
navigator.vibrate(10);
}
// 这里可以添加跳转到加入游戏页面的逻辑
});
// 设置按钮点击事件
@@ -598,7 +762,10 @@
createStarField();
// 为所有可点击元素添加触觉反馈
addHapticFeedback(document.getElementById('startGame'));
addHapticFeedback(document.getElementById('quickStart'));
addHapticFeedback(document.getElementById('onlineMatch'));
addHapticFeedback(document.getElementById('createRoom'));
addHapticFeedback(document.getElementById('joinGame'));
addHapticFeedback(document.querySelector('.settings-btn'));
});
</script>