前端练手项目 HTML 游戏叠高塔（包含源码）

叠高塔游戏通过点击【屏幕】或按【空格键】来放置积木。

这个游戏的灵感来源于iPhone上的游戏 Stack： https://itunes.apple.com/us/app/stack/id1080487957?mt=8。

游戏演示视频：

【HTML 游戏】叠高塔 游戏演示

🎮️ 你为什么需要这个项目？

1. 学习网页游戏开发技术：这个游戏采用最新的网页开发技术进行开发，无论你是新手还是有经验的工程师都可以从中获得新的知识。
2. 自定义游戏内容，制作属于自己的游戏：你可以非常容易的修改源代码，定制游戏内容和参数。
3. 和朋友一起游玩：这个游戏可以直接在自己的电脑上游玩，和你的小伙伴一起挑战更高的分数吧！
4. 训练强化学习模型：使用这个游戏训练教会你的电脑如何获取更高的分数。

🎮️ 下载

源码链接

🎮️ 安装

首要确保你安装了最新版本的 node，npm 或者 yarn。

下面所有的命令请在和 package.json 同级目录下运行。你可以根据你的喜好用 npm 或yarn。

安装所有需要的包：

npm install

🎮️ 构建

构建分发版本：

npm run build

构建之后的文件会放置在/dist文件夹中。

🎮️ 运行

运行一个本地服务器，它将自动编译你的代码，并在你保存更改时进行刷新!

npm run serve

---

🎮️ 目录结构

/叠高塔/
|-- /build/ - Build scripts
|  |-- gulpfile.js - 主要构建过程的任务
|  |-- util.js - 构建任务使用的辅助方法
|
|-- /src/ - 源代码
|  |-- index.template.html - 模板文件
|  |-- index.partial.(html|pug|haml|...) - 源HTML文件
|  |-- style.(css|scss|less|...) - 源CSS文件
|  |-- script.(js|ts|coffee|...) - 源JavaScript文件
|
|-- /dist/ - 运行 `npm run build` 之后生成的文件
|  |-- index.html
|  |-- script.js
|  |-- style.css
|
|-- /backup/ - 备份源代码
|  |-- /dist/
|  |-- /src/

src/ 目录包含了项目所有的源代码, /backup/dist 里面包含了项目原始代码和编译之后的项目文件，这个目录用于备份源代码，在修改代码出现无法回复的问题的时候，可以复制这个目录里的源代码进行恢复。