用canvas制作酷炫射击游戏--part1

好久没写博客了，因为过年后一直在学游戏制作方面的知识。学得差不多后又花了3个月时间做了个作品出来，现在正拿着这个作品找工作。

作品地址：https://betasu.github.io/Crimonland/new/

这个游戏差不多有3000行代码，实现了基本的游戏引擎、碰撞检测并基于canvas绘制。等回过头来看自己前面写的很多东西已经记不清了，为了巩固一下学过的知识并给有需要的朋友一些帮助，在此记录下整个游戏的制作过程。

接下来的讲解将围绕源码进行，需要的朋友可以自行下载并跟着我的步骤一步步来。今天开篇主要介绍下源码文件的构成，下一篇将结合文件讲讲游戏的实现原理

游戏源码：https://github.com/BetaSu/Crimonland/tree/master/new

整个程序一共包括4个文件夹和一个页面。

images 文件夹用于存储游戏过程中要用到的图片，值得一提的是其中的sprite.png文件，这个文件储存了所有人物以及怪物的每一帧动作（术语叫“精灵表”），也就是说怪物每走一步的动作都来源于这个文件。然后每个动作相对于sprite.png的位置坐标保存在js文件夹下的data.js文件。

　　　　　　　　　　　 　这就是精灵表

sounds 文件夹用于存储游戏的音效。

css 文件夹存储所有样式。

index.html不用多说。

js文件夹重点说一下，这其中data.js主要存储游戏的一些信息以及动画的坐标。

dom.js主要处理dom操作。

game-loop.js 用一个函数封装了游戏循环，也就是说每次调用这个函数就会重启一次新游戏。为什么要把整个游戏过程封装到一个函数里？这是因为你必须保证每次开始新的游戏所有东西都是新的（玩家的血量得是满的，不能游戏刚开始玩家就残血是吧）。

game-engine.js 是整个游戏的心脏----引擎。他构建了整个游戏的底层架构以及所有游戏都可以复用的部分。也就是说这个js文件配合不同种类的game-loop.js可以实现不同类型的游戏（射击类，棋牌类，rpg······）。

简单的介绍完文件构成，下一篇将会介绍制作游戏的基本原理。