-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
252 lines (241 loc) · 11.9 KB
/
index.html
File metadata and controls
252 lines (241 loc) · 11.9 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="zh">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YK7K680C30"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-YK7K680C30');
</script>
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {"siteId":3906082,"cookiePolicyId":49975947,"lang":"en","storage":{"useSiteId":true}};
</script>
<script type="text/javascript" src="https://cs.iubenda.com/autoblocking/3906082.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/gpp/stub.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapleByte Studios - 休闲游戏开发工作室</title>
<link rel="stylesheet" href="styles.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4294347372205007"
crossorigin="anonymous"></script>
</head>
<body>
<!-- 导航栏 -->
<nav>
<div class="logo">
<img src="images/logo-s.png" alt="MapleByte Studios">
<div class="logo-text">
<span class="studio-name">MapleByte</span>
<span class="studios">Studios</span>
</div>
</div>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#games">游戏</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系我们</a></li>
<li class="lang-switch"><a href="index_en.html">English</a></li>
</ul>
</nav>
<!-- 首页主视觉 -->
<header id="home" class="hero">
<div class="hero-content">
<h1>欢迎来到 MapleByte Studios</h1>
<p class="tagline">创造有趣的休闲游戏体验</p>
<div class="hero-features">
<div class="feature">
<span class="feature-icon">🎮</span>
<p>休闲游戏开发</p>
</div>
<div class="feature">
<span class="feature-icon">🌟</span>
<p>创新游戏玩法</p>
</div>
<div class="feature">
<span class="feature-icon">🤝</span>
<p>优质用户体验</p>
</div>
</div>
<div class="hero-buttons">
<a href="#games" class="cta-button primary">查看我们的游戏</a>
<a href="#contact" class="cta-button secondary">联系我们</a>
</div>
</div>
<div class="hero-image">
<img src="images/index-top.png" alt="游戏展示" class="floating">
</div>
</header>
<main>
<!-- 游戏展示区 -->
<section id="games" class="games-section">
<h2>我们的游戏</h2>
<div class="games-grid">
<article class="game-card">
<div class="game-image">
<img src="images/game1.jpg" alt="游戏1名称">
</div>
<div class="game-info">
<h3>砖块世界</h3>
<p>《砖块世界》是一款3D俄罗斯方块的消除类休闲游戏，真正的3D视角俄罗斯方块，拥有独特的旋转视角与多样化道具。经典模式、挑战模式等多种玩法让你百玩不厌，无论是不断探索高难度关卡、收集金币、收集皮肤，还是佛系的经典模式，都能带来无限乐趣。
</p>
<div class="game-platforms">
<span class="platform">微信小游戏</span>
<span class="platform">HTML5</span>
</div>
<div class="qr-code-container">
<img src="images/wx_code.jpg" alt="扫码体验" class="qr-code">
<p class="qr-tip">扫码立即体验</p>
</div>
<!-- <a href="#" class="play-button">立即体验</a> -->
</div>
</article>
<article class="game-card">
<div class="game-image">
<img src="images/game1.jpg" alt="游戏1名称">
</div>
<div class="game-info">
<h3>砖块世界</h3>
<p>《砖块世界》是一款3D俄罗斯方块的消除类休闲游戏，真正的3D视角俄罗斯方块，拥有独特的旋转视角与多样化道具。经典模式、挑战模式等多种玩法让你百玩不厌，无论是不断探索高难度关卡、收集金币、收集皮肤，还是佛系的经典模式，都能带来无限乐趣。
</p>
<div class="game-platforms">
<span class="platform">微信小游戏</span>
<span class="platform">HTML5</span>
</div>
<div class="qr-code-container">
<img src="images/wx_code.jpg" alt="扫码体验" class="qr-code">
<p class="qr-tip">扫码立即体验</p>
</div>
<!-- <a href="#" class="play-button">立即体验</a> -->
</div>
</article>
<article class="game-card">
<div class="game-image">
<img src="images/snake.jpg" alt="豆豆蛇">
</div>
<div class="game-info">
<h3>豆豆蛇</h3>
<p>《豆蛇》是对经典贪吃蛇游戏的现代演绎。引导你可爱的小蛇收集食物，同时避开障碍物，每咬一口就变得更长。这款游戏具有流畅的动画、不同的难度级别和充满活力的视觉效果，为各个年龄段的玩家提供有趣且引人入胜的体验。你能帮助豆蛇在不撞毁的情况下达到目标分数吗？挑战自我，享受这个旅程！
</p>
<div class="game-platforms">
<span class="platform">HTML5</span>
<span class="platform">Web Browser</span>
</div>
<a href="#" class="play-button"
data-game-url="https://maplezzzzzz.github.io/game/snake/">立即试玩</a>
</div>
</article>
<!-- 可以添加更多游戏卡片 -->
</div>
</section>
<!-- 关于我们 -->
<section id="about" class="about-section">
<div class="about-content">
<h2>关于 MapleByte Studios</h2>
<div class="about-grid">
<div class="about-text">
<p>MapleByte
工作室是一个规模虽小但充满激情的团队。我们对游戏充满热情。我们的目标是创造出人人喜爱的游戏。我们专注于游戏制作的每一个细节，探索各种风格，并致力于在游戏行业中留下自己的印记。</p>
<div class="stats">
<div class="stat-item">
<span class="stat-number">2</span>
<span class="stat-label">发布游戏</span>
</div>
<div class="stat-item">
<span class="stat-number">15000+</span>
<span class="stat-label">活跃玩家</span>
</div>
</div>
</div>
<div class="team-photos">
<!-- 团队照片展示 -->
</div>
</div>
</div>
</section>
<!-- 新闻动态 -->
<section id="news" class="news-section">
<h2>最新动态</h2>
<div class="news-grid">
<article class="news-card">
<div class="news-header">
<div class="news-icon">
<img src="images/new-game.png" alt="新游戏图标">
</div>
<div class="news-meta">
<div class="news-date">2025-03-20</div>
<h3>新游戏预告</h3>
</div>
</div>
<div class="news-content">
<p class="news-description">一款充满创意的三消类游戏，融合了经典玩法与创新元素。还在创作阶段，敬请期待！如果你有什么好的想法，欢迎联系我们！</p>
<p class="news-release">预计发布时间：2025年4月</p>
</div>
<a href="#" class="read-more">了解更多 <span class="arrow">→</span></a>
</article>
</div>
</section>
<!-- 联系方式 -->
<section id="contact" class="contact-section">
<h2>联系我们</h2>
<div class="contact-container">
<div class="contact-info">
<h3>商务合作</h3>
<p>邮箱：<a href="mailto:442301032@qq.com">442301032@qq.com</a></p>
</div>
<div class="contact-info">
<h3>关注我</h3>
<div class="social-links">
<div class="social-item">
<a href="#" class="social-link">
<span class="social-name">微信公众号</span>
<div class="social-qr">
<img src="images/qrcode_gzh.jpg" alt="微博二维码">
<span class="qr-tip">扫码关注微信公众号</span>
</div>
</a>
</div>
<div class="social-item">
<a href="#" class="social-link">
<span class="social-name">小红书</span>
<div class="social-qr">
<img src="images/qrcode_xhs.png" alt="微信二维码">
<span class="qr-tip">扫码关注小红书</span>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer-content">
<div class="footer-logo">
<img src="images/logo-l.png" alt="MapleByte Studios">
</div>
<div class="footer-links">
<a href="#home">首页</a>
<a href="#games">游戏</a>
<a href="#about">关于</a>
<a href="#news">新闻</a>
<a href="#contact">联系我们</a>
</div>
<div class="footer-bottom">
<p>© 2025 MapleByte Studios. All rights reserved.</p>
</div>
</div>
</footer>
<script src="scripts.js"></script>
<div class="game-modal">
<div class="game-container">
<iframe class="game-iframe" src="" frameborder="0" scrolling="no" allowfullscreen></iframe>
<button class="close-game">×</button>
</div>
</div>
</body>
</html>