网页小游戏源码：八向消消乐，烟花特效版

八向开心消消乐 · 烟花特效版 · 网页休闲小游戏源码下载

一款基于 Three.js 的 3D 消除游戏模板：立体几何棋盘、烟花爆破动效、可切换棋盘形状与难度，已本地化所有依赖（Three.js、Tween.js、样式与脚本），开箱即用。适合做前端 3D 互动 Demo、小游戏页、活动引导或炫酷首屏。

亮点特色

• 立体炫酷：六种几何形体 + 烟花式爆破动画，光影质感拉满。
• 多形态棋盘：矩形、菱形、十字、圆形、随机形状可选，行列数、最小连消数可调。
• 动效丰富：开场 3D 漂浮背景、旋转/浮动动画、收集奖品飞升效果，交互顺滑。
• 全本地依赖：三方库（Three.js r128、Tween.js）、样式、脚本均在本地，离线可演示。
• 移动端友好：适配触控输入，界面按钮大号布局，适合手机平板体验。

设计与体验

• 配色：深蓝太空背景 + 高饱和霓虹色几何体，搭配半透明 UI 面板。
• UI 结构：品牌徽标 + 开场界面、设置页、游戏页三屏切换，覆盖状态弹窗（失败/过关）。
• 交互细节：旋转棋盘、悬停高亮连线、奖品收集、烟花爆破动画，始终保持动感。

玩法与功能

• 核心玩法：点击相连同色几何体即可连消并触发烟花爆破，收集随机生成的奖品道具。
• 八向连消：支持八个方向（上下左右与四个对角）寻找相邻；一键高亮连线，所见即所得。
• 旋转棋盘：左右旋转按钮，改变棋盘朝向，寻找新连线机会。
• 奖品机制：棋盘随机掉落奖品，收集后完成关卡；奖品有独立旋转/飞升动画。
• 多场景三屏：开场动画 → 玩法设置 → 游戏主界面，状态弹窗（失败/过关）便于快速重开/下一关。

设置项

• 行/列数：7/9/11/13/15 可选，决定棋盘规模。
• 棋盘形状：矩形、菱形、十字、圆形、随机。
• 最小连消数：2/3/4/5 可选，决定消除难度。 （上述设置均在 UI 中可视化下拉选择，默认 11×11，最小连消 2。）

使用方式

1. 打开 index.html 即可运行（需本地服务器以避免文件权限问题）。
2. 自定义品牌：修改 index.html 顶部 .brand-pill 文案/链接。
3. 调整难度：在设置页选择行列数、棋盘形状、最小连消数；默认 11×11、最小连消 2。
4. 资源说明：外部库位于 libs/three.min.js、libs/tween.min.js；样式在 style.css，脚本在 script.js。
5. 嵌入使用：将上述文件放入你的项目，保持相对路径或按需调整引用。

适用场景

• 3D 互动 Demo、小游戏集合页、活动引导页、炫酷首屏展示。
• 想快速搭建“连消 + 特效”类玩法的开发者或设计师。
• 用于教学/分享 Three.js 与动画编排的示例素材。

技术栈

• 纯 HTML + CSS + 原生 JS，使用 Three.js（r128）和 Tween.js（18.6.4）驱动 3D 与动画。
• 非 ES6 Module，直接通过 <script> 引用运行。