Open whxaxes opened 8 years ago
强大
现在还不可以预览
@datena 预览地址:http://whxaxes.github.io/slither/
谷歌不兼容,IE11可以预览 @whxaxes
@datena 额。。你的chrome版本是?我的chrome没问题哦
44.0.2403.157 @whxaxes
不上qq好久了,好的,有空我看一下这个版本的情况
不错哟,发现大佬和我一样喜欢搞小游戏。。哈哈哈,可惜我的游戏做得太烂了。关注canvas-test一两年了,这次继续来关注小游戏
前言
上一篇博文讲了如何造一条蛇,现在蛇有了,要让它自由的活动起来,就得有个地图啊,而且只能走也不行呀,还得有点吃的,所以还得加点食物,这一篇博文就来讲讲如何添加地图和食物。
预览效果
当前项目最新效果:http://whxaxes.github.io/slither/ (由于代码一直在更新,效果可能会比本文所述的更多)
功能分析
slither.io的地图是类似于rpg游戏的大地图,所以,我们需要两个新的类,一个是地图类:Map,一个是视窗类:Frame,地图类就是整个大地图的抽象,视窗类就是可视界面的抽象。
而怎么做成蛇动的时候,绘制位置不动,而是地图动呢。其实原理也很简单,如果看过上一篇文章的读者,应该还记得Base类里有两个参数:
paintX
以及paintY
,这两个是绘制坐标,跟蛇的坐标不同的就是,绘制坐标是蛇的实际坐标减去视窗的坐标。每次render的时候,绘制的坐标就是用的这两个参数,同时适当的调整一下视窗的坐标,就可以做成相对于视窗中蛇没移动,但是看上去蛇移动了的效果。
Base类里还有一个参数叫visible:
用于判断实例在视窗frame中是否可见,如果不可见,就不需要调用绘制接口了,从而提升游戏性能。
而食物类就比较简单了,继承Base类后,在地图中随机出一定数量,再进行一下蛇头与食物的碰撞检测即可。
接着再细讲一下各个类的实现。
视窗类
因为地图类也依赖视窗类,所以先看视窗类。代码量相当少,所以直接全部贴出:
由于视窗在整个游戏中只有一个,所以做成了单例的。视窗类就只有几个属性,x坐标,y坐标,宽度和高度。x坐标和y坐标是相对于地图左上角的值,width和height一般就是canvas的大小。
track方法是跟踪某个对象,也就是视窗跟着对象的移动而移动。在main.js中调用跟踪蛇类:
地图类
地图类跟视窗类一样也是整个游戏里只有一个,所以也做成单例的,而且由于,整个游戏的元素,都是基于地图上的,所以我也把canvas的2d绘图对象挂载到了地图类上。先看地图类的部分代码:
构造函数中,定义一下地图背景的方格块的大小,然后就是init方法,给外部初始化用的,因为地图的位置是固定的,所以不需要坐标值,只需要宽度和高度即可。clear是给外部调用用来清除画布。
再看地图类的渲染方法:
其实就是根据视窗的位置,来进行局部绘制,如果进行整个地图的绘制,会超级消耗性能。所以只绘制需要展示的那一块。
按照slither.io的功能,大地图有了,还得画个小地图:
这个也没什么难度,就是叠图层而已。不再解释
最后再export出去:
export default new Map();
即可。组合
在main.js中,直接初始化一下:
然后在动画循环中,让视窗跟随蛇的实例
snake
,然后再进行相应的render即可,render的顺序关系到元素的层级,所以小地图是最后才render :食物类
再讲一下食物类,也是非常的简单,直接继承Base类,然后做个简单的发光动画效果即可,代码量不多,也全部贴出:
然后在main.js中,进行食物生成:
然后在动画循环中进行循环并且渲染即可:
渲染的同时,也跟蛇头进行一下碰撞检测,如果产生了碰撞,则从食物列表中删掉吃掉的实物,并且调用蛇类的eat方法,然后再随机生成一个食物补充。
因为食物是圆,蛇头也是圆,所以碰撞检测就很简单了:
然后再看一下蛇的eat方法:
调用该方法后,会使蛇的分数增加,同时增加体积,以及身躯长度。
至此,地图以及食物都做好了。
照例贴出github地址:https://github.com/whxaxes/slither