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

一、从抄官方代码开始

    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.Symbol
let idCounter = 0

if (!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函数中执行了改事件的动作,如下:

    

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值