Skip to content

Commit 492642f

Browse files
CommandstoneCommandstone
authored
Create game.html
1 parent 8979c8e commit 492642f

File tree

1 file changed

+203
-0
lines changed

1 file changed

+203
-0
lines changed

‎game/game.html‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CST协会小游戏</title>
7+
<style>
8+
:root {
9+
--gold: #FFD700;
10+
--green: #7CFC00;
11+
--transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
12+
}
13+
14+
body {
15+
margin: 0;
16+
padding: 2rem;
17+
min-height: 100vh;
18+
background: linear-gradient(135deg, var(--gold) 0%, var(--green) 100%);
19+
font-family: 'Segoe UI', system-ui, sans-serif;
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
}
24+
25+
.header {
26+
text-align: center;
27+
margin-bottom: 3rem;
28+
color: #2c3e50;
29+
animation: fadeIn 1s ease;
30+
}
31+
32+
.tool-grid {
33+
display: grid;
34+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
35+
gap: 2rem;
36+
width: 100%;
37+
max-width: 1200px;
38+
}
39+
40+
.tool-card {
41+
background: rgba(255, 255, 255, 0.95);
42+
padding: 2rem;
43+
border-radius: 20px;
44+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
45+
transition: var(--transition);
46+
cursor: pointer;
47+
transform-style: preserve-3d;
48+
position: relative;
49+
overflow: hidden;
50+
}
51+
52+
.tool-card:hover {
53+
transform: translateY(-10px) rotateX(5deg) rotateY(-5deg);
54+
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
55+
}
56+
57+
.tool-card::before {
58+
content: '';
59+
position: absolute;
60+
top: 0;
61+
left: -100%;
62+
width: 200%;
63+
height: 100%;
64+
background: linear-gradient(
65+
90deg,
66+
transparent,
67+
rgba(255, 255, 255, 0.4),
68+
transparent
69+
);
70+
transition: var(--transition);
71+
}
72+
73+
.tool-card:hover::before {
74+
left: 100%;
75+
}
76+
77+
.card-icon {
78+
font-size: 3rem;
79+
margin-bottom: 1rem;
80+
color: var(--green);
81+
transition: var(--transition);
82+
}
83+
84+
.card-title {
85+
color: #2c3e50;
86+
margin: 0 0 1rem;
87+
font-size: 1.5rem;
88+
}
89+
90+
.card-description {
91+
color: #666;
92+
line-height: 1.6;
93+
margin-bottom: 1.5rem;
94+
}
95+
96+
.launch-button {
97+
background: var(--green);
98+
color: white;
99+
border: none;
100+
padding: 12px 24px;
101+
border-radius: 30px;
102+
cursor: pointer;
103+
transition: var(--transition);
104+
display: inline-flex;
105+
align-items: center;
106+
gap: 8px;
107+
}
108+
109+
.launch-button:hover {
110+
background: var(--gold);
111+
transform: translateX(10px);
112+
}
113+
114+
@keyframes fadeIn {
115+
from { opacity: 0; transform: translateY(20px); }
116+
to { opacity: 1; transform: translateY(0); }
117+
}
118+
119+
@media (max-width: 768px) {
120+
body {
121+
padding: 1rem;
122+
}
123+
124+
.tool-card {
125+
padding: 1.5rem;
126+
}
127+
}
128+
</style>
129+
</head>
130+
<body>
131+
<div class="header">
132+
<h1>🎮游戏库</h1>
133+
<p>选择您需要的Game</p>
134+
</div>
135+
136+
<div class="tool-grid">
137+
<div class="tool-card" onclick="opengame('tcs')">
138+
<div class="card-icon">🐍</div>
139+
<h3 class="card-title">贪吃蛇</h3>
140+
<p class="card-description">无尽模式贪吃蛇</p>
141+
<button class="launch-button">立即游玩 →</button>
142+
</div>
143+
144+
<div class="tool-grid">
145+
<div class="tool-card" onclick="opengame('pd')">
146+
<div class="card-icon">🧠</div>
147+
<h3 class="card-title">记忆配对小游戏</h3>
148+
<p class="card-description">考验你的记忆了，60分是满分💯，40-50分的人较为聪明</p>
149+
<button class="launch-button">立即游玩 →</button>
150+
</div>
151+
<div class="tool-grid">
152+
<div class="tool-card" onclick="opengame('lrs')">
153+
<div class="card-icon">🐺</div>
154+
<h3 class="card-title">狼人杀</h3>
155+
<p class="card-description">本站n年前的bug.无法游玩</p>
156+
<button class="launch-button">立即游玩 →</button>
157+
</div>
158+
<div class="tool-grid">
159+
<div class="tool-card" onclick="opengame('404')">
160+
<div class="card-icon">🌍</div>
161+
<h3 class="card-title">无</h3>
162+
<p class="card-description">点击有惊喜</p>
163+
<button class="launch-button">立即游玩 →</button>
164+
</div>
165+
166+
<div class="tool-grid">
167+
<div class="tool-card" onclick="opengame('404')">
168+
<div class="card-icon">🌍</div>
169+
<h3 class="card-title">无</h3>
170+
<p class="card-description">点击有惊喜</p>
171+
<button class="launch-button">立即游玩 →</button>
172+
</div>
173+
<div class="tool-grid">
174+
<div class="tool-card" onclick="opengame('404')">
175+
<div class="card-icon">🌍</div>
176+
<h3 class="card-title">无</h3>
177+
<p class="card-description">点击有惊喜玩</p>
178+
<button class="launch-button">立即游玩 →</button>
179+
</div>
180+
181+
182+
<script>
183+
function opengame(gamelName) {
184+
// 此处可添加实际跳转逻辑
185+
const toolTitles = {
186+
tcs: "🐍贪吃蛇[有bug]",
187+
pd: "🎮记忆配对小游戏",
188+
lrs: "🐺狼人杀[不能游玩,bug*114514]",
189+
404: "神秘的页面",
190+
};
191+
192+
alert(`正在加载 ${toolTitles[gameName]}...感谢Command_star提供的代码.`);
193+
window.location.href = `/game/${gameName}.html`;
194+
}
195+
196+
// 添加卡片入场动画
197+
document.querySelectorAll('.tool-card').forEach((card, index) => {
198+
card.style.animation = `fadeIn 0.5s ease ${index * 0.1}s forwards`;
199+
card.style.opacity = 0;
200+
});
201+
</script>
202+
</body>
203+
</html>

0 commit comments

Comments
 (0)