-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
151 lines (140 loc) · 6.94 KB
/
Copy pathindex.html
File metadata and controls
151 lines (140 loc) · 6.94 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>迷你游戏合集</title>
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- 头部标题 -->
<header class="header">
<h1 class="main-title">🎮 迷你游戏合集</h1>
<p class="subtitle">精彩小游戏，随时随地畅玩</p>
</header>
<!-- 游戏展示区域 -->
<main class="games-container">
<div class="games-grid">
<!-- 示例游戏卡片 -->
<div class="game-card" data-game="snake">
<div class="game-image">
<img src="assets/images/snake-game.svg" alt="贪吃蛇" onerror="this.src='assets/images/placeholder.svg'">
<div class="play-overlay">
<div class="play-button">▶</div>
</div>
</div>
<div class="game-info">
<h3 class="game-title">贪吃蛇</h3>
<p class="game-description">经典街机游戏，控制小蛇吃食物</p>
</div>
</div>
<div class="game-card" data-game="tetris">
<div class="game-image">
<img src="assets/images/tetris-game.svg" alt="俄罗斯方块" onerror="this.src='assets/images/placeholder.svg'">
<div class="play-overlay">
<div class="play-button">▶</div>
</div>
</div>
<div class="game-info">
<h3 class="game-title">俄罗斯方块</h3>
<p class="game-description">消除方块，挑战高分</p>
</div>
</div>
<div class="game-card" data-game="2048">
<div class="game-image">
<img src="assets/images/2048-game.svg" alt="2048" onerror="this.src='assets/images/placeholder.svg'">
<div class="play-overlay">
<div class="play-button">▶</div>
</div>
</div>
<div class="game-info">
<h3 class="game-title">2048</h3>
<p class="game-description">数字合并，达到2048</p>
</div>
</div>
<div class="game-card" data-game="sudoku">
<div class="game-image">
<img src="assets/images/sudoku-game.svg" alt="数独" onerror="this.src='assets/images/placeholder.svg'">
<div class="play-overlay">
<div class="play-button">▶</div>
</div>
</div>
<div class="game-info">
<h3 class="game-title">数独</h3>
<p class="game-description">逻辑推理，填满9x9网格</p>
</div>
</div>
<div class="game-card" data-game="solitaire">
<div class="game-image">
<img src="assets/images/solitaire-game.svg" alt="纸牌接龙" onerror="this.src='assets/images/placeholder.svg'">
<div class="play-overlay">
<div class="play-button">▶</div>
</div>
</div>
<div class="game-info">
<h3 class="game-title">纸牌接龙</h3>
<p class="game-description">经典纸牌游戏，按花色整理牌面</p>
</div>
</div>
<div class="game-card" data-game="flappy">
<div class="game-image">
<img src="assets/images/flappy-bird.svg" alt="飞翔小鸟" onerror="this.src='assets/images/placeholder.svg'">
<div class="play-overlay">
<div class="play-button">▶</div>
</div>
</div>
<div class="game-info">
<h3 class="game-title">飞翔小鸟</h3>
<p class="game-description">点击屏幕，避开障碍物</p>
</div>
</div>
<div class="game-card" data-game="puzzle">
<div class="game-image">
<img src="assets/images/puzzle-game.svg" alt="拼图游戏" onerror="this.src='assets/images/placeholder.svg'">
<div class="play-overlay">
<div class="play-button">▶</div>
</div>
</div>
<div class="game-info">
<h3 class="game-title">拼图游戏</h3>
<p class="game-description">移动拼图块，还原图片</p>
</div>
</div>
<div class="game-card" data-game="memory">
<div class="game-image">
<img src="assets/images/memory-game.svg" alt="记忆卡片" onerror="this.src='assets/images/placeholder.svg'">
<div class="play-overlay">
<div class="play-button">▶</div>
</div>
</div>
<div class="game-info">
<h3 class="game-title">记忆卡片</h3>
<p class="game-description">翻开卡片，找到相同图案</p>
</div>
</div>
<div class="game-card" data-game="click-speed">
<div class="game-image">
<img src="assets/images/click-speed-game.svg" alt="点击速度测试" onerror="this.src='assets/images/placeholder.svg'">
<div class="play-overlay">
<div class="play-button">▶</div>
</div>
</div>
<div class="game-info">
<h3 class="game-title">点击速度测试</h3>
<p class="game-description">测试反应速度和点击能力</p>
</div>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="footer">
<p>© 2024 迷你游戏合集. 所有游戏仅供娱乐</p>
</footer>
</div>
<script src="js/main.js"></script>
</body>
</html>