E企盈小程序营销工具技术服务商 热线:4006-838-530

微信小游戏之飞机大战解析

E企盈小程序直播系统

一、从抄官方代码开始    1.1 首先是game.js,具体代码如下:import ‘./js/libs/weapp-adapter’import ‘./js/libs/symbol’import Main from ‘./js/main’new Main()    导入了两个libs文件,weapp-adapter是为了与浏览器中DOM,BOM的概念兼容而写的,总共有1500行左右代码,抄完所有的代码之后,需要回头检查一下确保里面的代码准确无误。这里就不上代码了。    另外一个symbol.js文件内容如下,看开头的注释是方便模拟私有变量:/*对于ES6中Symbol的极简兼容 *方便模拟私有变量 */let Symbol = window.Symbollet idCounter = 0if (!Symbol) {Symbol = function Symbol(key) {return `__${key}_${Math.floor(Math.random() * 1e9)}_${++idCounter}__`}Symbol.iterator = Symbol(‘Symbol.iterator’)}window.Symbol = Symbol    接着,import了main.js 中Main类,然后new了一个Main,看一下Main的内容:这里调用了restart()函数,原project中是已经new好了所有的对象,这里,我一个一个来测试,先写上this.music = new Music(),这时候,就需要在main.js文件开头写上然后创建出runtime目录,新建music.js文件,文件内容如下:     可以看出,这块的接口就会调用weapp-adaptor.js的相关接口,比如new Audio()会最后调用wx.createInnerAudioContext()接口。    此时,保存文件之后,运行会听到bgm的音频播放。    1.2 继续!接下来我们来绘制背景图案,这里试了一下官方的代码绘制红色的矩形框,是ok的!但是我在restart()中加入绘制BackGround的render,没有背景图产生,加的代码如下,暂时还没找到原因:        然后再加了loop的循环渲染的机制代码之后,背景图出现了。继续测试,在代码中我加入了count的变量,让其loop函数执行2次(不算restart中的requestAnimationFrame),背景图会出现; 让其loop函数执行1次(不算restart中的requestAnimationFrame),背景图不会出现;对比图如下:     1.3 接下来绘制gameinfo.      看一下效果图和代码                  gameinfo类中的renderGameInfo()的代码如下:              ctx的fillStyle、font、fillText属性控制着显示的样式。      1.4 继续绘制player。效果图和代码如下显示:                 然后我们看一下Player的class内容:                 此时Main类中的render的drawToCanvas内容在Sprite.js文件中:          1.5 接着我们绘制不断生成的enemy敌机。我们需要在loop函数中循环执行update和render的代码,如下图            然后看一下update的代码:          databus中enemys的update函数,看一下内容:          很明显,y的方向是y值加上步进距离。     再看一下render函数的内容:             databus中的enemys的drawToCanvas()函数内容(注意:调用的是Sprint中的drawToCanvas()):        看一下效果图:       1.6 我们发现背景图并没有随着敌机的移动而缓慢移动,接下来我们加一下背景图的移动。    首先在main中的update函数中增加如下代码:              然后在background.js中增加update函数,代码如下:       效果图如下,可以发现两张截图的背景图发生了变化:        1.7  接下来我们加入子弹功能。在main的update中加入如下代码:         上面item.update()会执行子弹类的update和敌机类的update函数。     看一下子弹类的update内容:          跟敌机类的update函数内容很相似。    看一下player类的shoot函数内容:       效果图如下:        1.8 接着我们加入手指按住战机左右移动。在index.js文件中加入如下代码:        看一下initEvent()函数的内容:        监听了手指触摸事件,检查是否在战机上并设置位置,内容分别如下:            最终的效果如下:        1.9 接着我们加入全局碰撞检测模块。在Main类中的update函数中增加如下红框代码:        接下来看一下全局碰撞检测函数内容:        playAnimation()是播放敌机爆炸的动画,playExplosion()是播放敌机爆炸的声音,    bullet.visible = false是子弹和敌机消失,然后score加1.    播放敌机爆炸动画是需要提前初始化帧动画的,所以在之前创建enemy敌机对象的时候,执行了如下代码:       其中将19张爆炸效果图push到frames中,然后执行initFrames(),代码内容如下:      此时,imgList中就有了对应的帧动画图片。      看一下playAnimation函数的内容,setInterval设置了每隔interval事件执行frameLoop的代码,this.index初始值是-1,当是0的时候播放当前帧:      这时候Main类中的update的相关代码执行完毕,执行render中的内容:      然后看一下aniRender内容,将每一帧的动画图画了出来:        看一下效果图:         1.10 到目前为止,基本的游戏逻辑已经完成,还剩最后一个重新开始模块。     还是从全局碰撞检测开始,当战机碰到敌机的有效矩形时,设置gameOver的值为true,如下:        然后在render中执行如下代码:        通过gameinfo中的renderGameOver渲染游戏结束的画面,代码如下:        底下代码中btnArea点击之后触发事件。在main类中的touchEventHandler函数中执行了改事件的动作,如下:    小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小游戏之飞机大战解析
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏