用canvas制作酷炫射击游戏 |
您所在的位置:网站首页 › flash制作射击游戏过程 › 用canvas制作酷炫射击游戏 |
好久没写博客了,因为过年后一直在学游戏制作方面的知识。学得差不多后又花了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······)。
简单的介绍完文件构成,下一篇将会介绍制作游戏的基本原理。
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |