飞机大战（微信小游戏）

Dear 丶 2022-03-20 11:53 320阅读 0赞

依旧是熟悉的期末作业，是微信小游戏官网的Demo来着，然后我边百度边对它做了一些改动

说起来好久没更新博客了......最近在用unity做游戏准备参加计算机设计大赛，花了好久终于做完初稿了哈哈哈哈嗝

顺祝看到这篇博客的各位新年快乐~

PS：完整工程下载及相关说明：[https://download.csdn.net/download/weixin\_41918712/10954323][https_download.csdn.net_download_weixin_41918712_10954323]

--------------------

# **用例图** #

![20190212183354296.png][]

--------------------

# **效果图** #

![20190212214056161.png][] ![20190212214107343.png][] ![20190212214112595.png][] ![20190212214115830.png][]

--------------------

# **步骤** #

> PS：图片/音频的素材下载：https://pan.baidu.com/s/1NrSonSJnSjm3VxiEUD4iVw 提取码: q7ya

1.  打开微信开发者工具，新建一个微信小游戏Demo，然后进入编辑界面。
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxODcxMg_size_16_color_FFFFFF_t_70][]
2.  打开项目文件夹，将素材中的两个文件夹复制进项目文件夹里（替换）。
3.  我们先把runtime里的3个脚本做些改动 ![2019021222101415.png][]，分别是背景、文字UI显示和音乐控制。脚本详见下面【源码】。
4.  player文件夹里的index.js需要做些改动，主要是添加双发子弹的相关方法。 ![20190212222541648.png][]
5.  npc文件夹需要增加的内容就有些多了，主要是增加了血包、双发子弹的生成方法，以及分数达到88时会开始产生能够发射子弹的敌人。这些新加的脚本就在npc文件夹 右键 - 新建JS 就行。 ![20190212223040314.png][]
6.  弄完上述这些，就可以改main.js、databus.js以及添加菜单脚本menu.js ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxODcxMg_size_16_color_FFFFFF_t_70 1][]
7.  设置游戏默认入口为菜单页 ![20190212224552409.png][]
8.  版本号 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxODcxMg_size_16_color_FFFFFF_t_70 2][]

--------------------

# **源码** #

> ### **runtime文件夹** ###
> 
> **background.js**
> 
>     import Sprite from '../base/sprite'
>     
>     const screenWidth  = window.innerWidth
>     const screenHeight = window.innerHeight
>     
>     const BG_IMG_SRC   = 'images/bg.jpg'
>     const BG_WIDTH     = 512
>     const BG_HEIGHT    = 768
>     
>     /**
>      * 游戏背景类
>      * 提供update和render函数实现无限滚动的背景功能
>      */
>     export default class BackGround extends Sprite {
>       constructor(ctx) {
>         super(BG_IMG_SRC, BG_WIDTH, BG_HEIGHT)
>     
>         this.render(ctx)
>     
>         this.top = 0
>       }
>     
>       update() {
>         this.top += 2
>     
>         if ( this.top >= screenHeight )
>           this.top = 0
>       }
>     
>       /**
>        * 背景图重绘函数
>        * 绘制两张图片，两张图片大小和屏幕一致
>        * 第一张漏出高度为top部分，其余的隐藏在屏幕上面
>        * 第二张补全除了top高度之外的部分，其余的隐藏在屏幕下面
>        */
>       render(ctx) {
>         ctx.drawImage(
>           this.img,
>           0,
>           0,
>           this.width,
>           this.height,
>           0,
>           -screenHeight + this.top,
>           screenWidth,
>           screenHeight
>         )
>     
>         ctx.drawImage(
>           this.img,
>           0,
>           0,
>           this.width,
>           this.height,
>           0,
>           this.top,
>           screenWidth,
>           screenHeight
>         )
>       }
>     }
> 
> **gameinfo.js**
> 
>     const screenWidth  = window.innerWidth
>     const screenHeight = window.innerHeight
>     
>     let atlas = new Image()
>     atlas.src = 'images/Common.png' /*面板组件构成*/
>     let menupic = new Image()
>     menupic.src = 'images/menu.jpg' /*菜单构成*/
>     
>     export default class GameInfo {
>       renderGameScore(ctx, score) {
>         ctx.fillStyle = "#ffffff"
>         ctx.font      = "20px Arial"
>         ctx.fillText(
>           '? ',
>           10,
>           30
>         )
>         ctx.fillText(
>           score,
>           40,
>           30
>         )
>       }
>       //画出血量
>       renderGameHp(ctx, hp) {
>         ctx.fillStyle = "#ff0000"
>         ctx.font = "20px Arial"
>         ctx.fillText(
>           '❤  ',
>           13,
>           70
>         )
>         ctx.fillText(
>           hp,
>           40,
>           70
>         )
>         ctx.fillText(
>           ' / 3',
>           50,
>           70
>         )
>       }
>       renderGameOver(ctx, score) //游戏结束
>       {
>         ctx.drawImage(atlas, 0, 0, 119, 108, screenWidth / 2 - 150, screenHeight / 2 - 100, 300, 300)
>     
>         ctx.fillStyle = "#ffffff"
>         ctx.font    = "20px Arial"
>     
>         ctx.fillText(
>           '游戏结束',
>           screenWidth / 2 - 40,
>           screenHeight / 2 - 100 + 50
>         )
>     
>         ctx.fillText(
>           '歼敌数:  ' + score,
>           screenWidth / 2 - 40,
>           screenHeight / 2 - 100 + 130
>         )
>     
>         /*面板绘制---红火火恍恍惚惚*/
>         ctx.drawImage( 
>           atlas,
>           120, 6, 39, 24,
>           screenWidth / 2 - 60,
>           screenHeight / 2 - 100 + 150,
>           120, 40
>         )
>     
>         ctx.fillText  (
>           '重新开始',
>           screenWidth / 2 - 40,
>           screenHeight / 2 - 100 + 175
>         )
>     
>         ctx.drawImage(
>           atlas,
>           120, 6, 39, 24,
>           screenWidth / 2 - 60,
>           screenHeight / 2 - 100 + 200,
>           120, 40
>         )
>         //返回菜单的ui布局
>         ctx.fillText(
>           '返回菜单',
>           screenWidth / 2 - 40,
>           screenHeight / 2 - 100 + 225
>         )
>     
>         /**
>          * 重新开始按钮区域
>          * 方便简易判断按钮点击
>          */
>         this.btnArea_restart = {
>           startX: screenWidth / 2 - 40,
>           startY: screenHeight / 2 - 100 + 150,
>           endX  : screenWidth / 2  + 50,
>           endY  : screenHeight / 2 - 100 + 175
>         }
>         //返回菜单的按钮区域判断
>         this.btnArea_remean = {
>           startX: screenWidth / 2 - 40,
>           startY: screenHeight / 2 - 100 + 200,
>           endX: screenWidth / 2 + 50,
>           endY: screenHeight / 2 - 100 + 225
>         }
>       }
>       renderMenu(ctx) //k开始菜单
>       {
>         ctx.drawImage(menupic, 0, 0, screenWidth, screenHeight)
>         /* *
>          * 重新开始按钮区域
>          * 方便简易判断按钮点击
>          */
>         this.btnArea_start = {
>           startX: screenWidth / 2 - 100,
>           startY: screenHeight / 2 - 100 + 225,
>           endX: screenWidth / 2 + 100,
>           endY: screenHeight / 2 - 100 + 400
>         }
>       }
>     }
> 
> **music.js**
> 
>     let instance //变量定义
>     
>     /**
>      * 统一的音效管理器
>      */
>     export default class Music {
>       constructor() {
>         if ( instance )
>           return instance
>     
>         instance = this
>     /**音效 */
>         this.bgmAudio = new Audio()
>         this.bgmAudio.loop = true
>         this.bgmAudio.src  = 'audio/bgm.mp3'
>     
>         this.shootAudio     = new Audio()
>         this.shootAudio.src = 'audio/bullet.mp3'
>     
>         this.boomAudio     = new Audio()
>         this.boomAudio.src = 'audio/boom.mp3'
>     
>         this.dieAudio = new Audio()
>         this.dieAudio.src = 'audio/die.mp3'
>     
>         this.menuAudio = new Audio()
>         this.menuAudio.loop = true
>         this.menuAudio.src = 'audio/menu.mp3'
>     
>         this.bossAudio = new Audio()
>         this.bossAudio.src = 'audio/bossbuttle.mp3'
>     
>         this.playBgm()
>       }
>     
>       playBgm() 
>       {
>         this.bgmAudio.currentTime = 0
>         this.bgmAudio.play()
>         this.dieAudio.pause()
>         this.menuAudio.pause()
>       }
>       playmenu() //播放菜单音乐
>       {
>         this.menuAudio.currentTime = 0
>         this.menuAudio.play()
>         this.bgmAudio.pause()
>         this.dieAudio.pause()
>       }
>       stopBgm()
>       {
>         this.bgmAudio.pause()
>       }
>     
>       playShoot() {
>         this.shootAudio.currentTime = 0
>         this.shootAudio.play()
>       }
>       playboss()
>       {
>         this.bossAudio.currentTime = 0
>         this.bossAudio.play()
>       }
>     
>       playExplosion() {
>         this.boomAudio.currentTime = 0
>         this.boomAudio.play()
>       }
>     
>       playDie() {
>         this.dieAudio.currentTime = 0
>         this.dieAudio.play()
>       }
>     }

> ### **runtime文件夹** ###
> 
> **index.js**
> 
>     import Sprite   from '../base/sprite'
>     import Bullet   from './bullet'
>     import DataBus  from '../databus'
>     //import main from '../main'
>     
>     const screenWidth    = window.innerWidth
>     const screenHeight   = window.innerHeight
>     let skill = 0;  //获取15发双弹头
>     // 玩家相关常量设置
>     const PLAYER_IMG_SRC = 'images/hero.png'
>     const PLAYER_WIDTH   = 80
>     const PLAYER_HEIGHT  = 80
>     
>     let databus = new DataBus()
>     //let main1=new main()
>     
>     
>     export default class Player extends Sprite {
>       constructor() {
>     
>         super(PLAYER_IMG_SRC, PLAYER_WIDTH, PLAYER_HEIGHT)
>     
>         // 玩家默认处于屏幕底部居中位置
>         this.x = screenWidth / 2 - this.width / 2
>         this.y = screenHeight - this.height - 30
>     
>         // 用于在手指移动的时候标识手指是否已经在飞机上了
>         this.touched = false
>     
>         this.bullets = []
>     
>         // 初始化事件监听
>         this.initEvent()
>       }
>     
>       /**
>        * 当手指触摸屏幕的时候
>        * 判断手指是否在飞机上
>        * @param {Number} x: 手指的X轴坐标
>        * @param {Number} y: 手指的Y轴坐标
>        * @return {Boolean}: 用于标识手指是否在飞机上的布尔值
>        */
>       checkIsFingerOnAir(x, y) {
>         const deviation = 30
>     
>         return !!(   x >= this.x - deviation
>                   && y >= this.y - deviation
>                   && x <= this.x + this.width + deviation
>                   && y <= this.y + this.height + deviation  )
>       }
>     
>       /**
>        * 根据手指的位置设置飞机的位置
>        * 保证手指处于飞机中间
>        * 同时限定飞机的活动范围限制在屏幕中
>        */
>       setAirPosAcrossFingerPosZ(x, y) {
>         let disX = x - this.width / 2
>         let disY = y - this.height / 2
>     
>         if ( disX < 0 )
>           disX = 0
>     
>         else if ( disX > screenWidth - this.width )
>           disX = screenWidth - this.width
>     
>         if ( disY <= 0 )
>           disY = 0
>     
>         else if ( disY > screenHeight - this.height )
>           disY = screenHeight - this.height
>     
>         this.x = disX
>         this.y = disY
>       }
>     
>       /**
>        * 玩家响应手指的触摸事件
>        * 改变战机的位置
>        */
>       initEvent() {
>         canvas.addEventListener('touchstart', ((e) => { //封装的指控方法
>           e.preventDefault() //匿名方法
>     
>           let x = e.touches[0].clientX
>           let y = e.touches[0].clientY
>     
>           //
>           if ( this.checkIsFingerOnAir(x, y) ) {
>             this.touched = true
>     
>             this.setAirPosAcrossFingerPosZ(x, y)
>           }
>     
>         }).bind(this))
>     
>         canvas.addEventListener('touchmove', ((e) => { //封装的指控方法
>           e.preventDefault() //匿名方法
>     
>           let x = e.touches[0].clientX
>           let y = e.touches[0].clientY
>     
>           if ( this.touched )
>             this.setAirPosAcrossFingerPosZ(x, y)
>     
>         }).bind(this))
>     
>         canvas.addEventListener('touchend', ((e) => { //封装的指控方法
>           e.preventDefault() //匿名方法
>     
>           this.touched = false
>         }).bind(this))
>       }
>     
>       /**
>        * 玩家射击操作
>        * 射击时机由外部决定
>        */
>       diffbuttle()  //双弹头每秒消耗一个
>       {
>         if(skill>0) skill--;
>       }
>       addbuttle() //增加双弹头
>       {
>         skill+=15;
>       }
>       defaultbuttle()
>       {
>         skill=0;
>       }
>       shoot() //射击
>       {
>         let bullets = []
>         let bulletNum;
>         if (skill > 0) {
>           bulletNum = 2; //子弹数
>         }
>         else bulletNum = 1;
>         for (let i = 0; i < bulletNum; i++)
>           bullets.push(databus.pool.getItemByClass('bullet', Bullet))
>     
>         bullets.forEach((bullet, index) => {
>           bullet.init(
>             this.x + this.width * (index + 1) / (bulletNum + 1) - bullet.width / 2,
>             this.y - 10,
>             10 
>           )
>           databus.bullets.push(bullet)
>         })
>     
>       }
>     }

> ### **npc文件夹** ###
> 
> **enemy.js**
> 
>     import Animation from '../base/animation'
>     import DataBus   from '../databus'
>     
>     const ENEMY_IMG_SRC = 'images/enemy.png'
>     const ENEMY_WIDTH   = 60
>     const ENEMY_HEIGHT  = 60
>     
>     /** 速度初始 */
>     const __ = {
>       speed: Symbol('speed')
>     }
>     
>     
>     let databus = new DataBus()
>     
>     function rnd(start, end){
>       return Math.floor(Math.random() * (end - start) + start)
>     }
>     
>     export default class Enemy extends Animation {
>       constructor() {
>         super(ENEMY_IMG_SRC, ENEMY_WIDTH, ENEMY_HEIGHT)
>         this.initExplosionAnimation()
>       }
>       
>       /** 速度值初始化 */
>       init(speed) {
>         this.x = rnd(0, window.innerWidth - ENEMY_WIDTH)
>         this.y = -this.height
>     
>         this[__.speed] = speed 
>     
>         this.visible = true
>       }
>     
>       // 预定义爆炸的帧动画
>       initExplosionAnimation() {
>         let frames = []
>     
>         const EXPLO_IMG_PREFIX  = 'images/explosion'
>         const EXPLO_FRAME_COUNT = 19
>     
>         for ( let i = 0;i < EXPLO_FRAME_COUNT;i++ ) {
>           frames.push(EXPLO_IMG_PREFIX + (i + 1) + '.png')
>         }
>     
>         this.initFrames(frames)
>       }
>     
>       // 每一帧更新敌人位置
>       update() {
>         this.y += this[__.speed]
>     
>         // 对象回收
>         if ( this.y > window.innerHeight + this.height )
>           databus.removeEnemey(this)
>       }
>     }
> 
> **getskill.js**
> 
>     import Animation from '../base/animation'
>     import DataBus from '../databus'
>     
>     const SKILL_IMG_SRC = 'images/upbull.png'
>     const SKILL_WIDTH = 30
>     const SKILL_HEIGHT = 40
>     
>     /** 速度初始 */
>     const __ = {
>       speed: Symbol('speed')
>     }
>     
>     let databus = new DataBus()
>     
>     function rnd(start, end) {
>       return Math.floor(Math.random() * (end - start) + start)
>     }
>     
>     export default class Getskill extends Animation {
>       constructor() {
>         super(SKILL_IMG_SRC, SKILL_WIDTH, SKILL_HEIGHT) //初始化技能
>       }
>     
>       /** 速度值初始化 */
>       init(speed) {
>         this.x = rnd(0, window.innerWidth - SKILL_WIDTH)
>         this.y = -this.height
>     
>         this[__.speed] = speed
>     
>         this.visible = true
>       }
>     
>       // 每一帧更新敌人位置
>       update() {
>         this.y += this[__.speed]
>     
>         // 对象回收
>         if (this.y > window.innerHeight + this.height)
>           databus.removeSkill(this)
>       }
>     }
> 
> **blood.js**
> 
>     import Animation from '../base/animation'
>     import DataBus from '../databus'
>     
>     const BLOOD_IMG_SRC = 'images/blood.png'
>     const BLOOD_WIDTH = 60
>     const BLOOD_HEIGHT = 60
>     
>     /** 速度初始 */
>     const __ = {
>       speed: Symbol('speed')
>     }
>     
>     let databus = new DataBus()
>     
>     function rnd(start, end) {
>       return Math.floor(Math.random() * (end - start) + start)
>     }
>     
>     export default class Blood extends Animation {
>       constructor() {
>         super(BLOOD_IMG_SRC, BLOOD_WIDTH, BLOOD_HEIGHT) //初始化技能
>       }
>     
>       /** 速度值初始化 */
>       init(speed) {
>         this.x = rnd(0, window.innerWidth - BLOOD_WIDTH)
>         this.y = -this.height
>     
>         this[__.speed] = speed
>     
>         this.visible = true
>       }
>     
>       // 每一帧更新敌人位置
>       update() {
>         this.y += this[__.speed]
>     
>         // 对象回收
>         if (this.y > window.innerHeight + this.height)
>           databus.removeblood(this)
>       }
>     }
> 
> **smallboss.js**
> 
>     import Animation from '../base/animation'
>     import DataBus from '../databus'
>     import BoBullet from './BoBullet'
>     
>     const SMB_IMG_SRC = 'images/boss.png'
>     const SMB_WIDTH = 80
>     const SMB_HEIGHT = 80
>     
>     /** 速度初始 */
>     const __ = {
>       speed: Symbol('speed')
>     }
>     
>     
>     let databus = new DataBus()
>     //let isdie=false
>     
>     function rnd(start, end) {
>       return Math.floor(Math.random() * (end - start) + start)
>     }
>     
>     export default class SBoss extends Animation {
>       constructor() {
>         super(SMB_IMG_SRC, SMB_WIDTH, SMB_HEIGHT)
>         this.initSMBAnimation()
>       }
>     
>       /** 速度值初始化 */
>       init(speed) {
>         this.x = rnd(0, window.innerWidth - SMB_WIDTH)
>         this.y = -this.height
>     
>         this[__.speed] = speed
>     
>         this.visible = true
>       }
>     
>       // 预定义爆炸的帧动画
>       initSMBAnimation() {
>         let frames = []
>     
>         const SMB_IMG_PREFIX = 'images/explosion'
>         const SMB_FRAME_COUNT = 19
>     
>         for (let i = 0; i < SMB_FRAME_COUNT; i++) {
>           frames.push(SMB_IMG_PREFIX + (i + 1) + '.png')
>         }
>     
>         this.initFrames(frames)
>       }
>     
>       // 每一帧更新敌人位置
>       update() {
>         this.y += this[__.speed]
>     
>         // 对象回收
>         if (this.y > window.innerHeight + this.height)
>           databus.removeSBoss(this)
>       }
>       bossshoot() //敌人攻击
>       {
>         let bullet = databus.pool.getItemByClass('bobullet', BoBullet)
>         bullet.init //初始化子弹
>           (
>           this.x + this.width / 2 - bullet.width / 2,
>           this.y + 20,
>           10
>           )
>         databus.bossbullets.push(bullet)
>       }
>     }
> 
> **BoBullet.js**
> 
>     import Sprite from '../base/sprite'
>     import DataBus from '../databus'
>     
>     const BossBULLET_IMG_SRC = 'images/bossbu.png'
>     const BossBULLET_WIDTH = 20
>     const BossBULLET_HEIGHT = 34
>     
>     const __ = {
>       speed: Symbol('speed')
>     }
>     
>     let databus = new DataBus()
>     
>     export default class BoBullet extends Sprite {
>       constructor() 
>       {
>         super(BossBULLET_IMG_SRC, BossBULLET_WIDTH, BossBULLET_HEIGHT)
>        // this.initSMBAnimation()
>       }
>     
>       init(x, y, speed) {
>         this.x = x
>         this.y = y
>     
>         this[__.speed] = speed
>     
>         this.visible = true
>       }
>       /*// 预定义爆炸的帧动画
>       initSMBAnimation() {
>         let frames = []
>     
>         const SMB_IMG_PREFIX = 'images/explosion'
>         const SMB_FRAME_COUNT = 19
>     
>         for (let i = 0; i < SMB_FRAME_COUNT; i++) {
>           frames.push(SMB_IMG_PREFIX + (i + 1) + '.png')
>         }
>     
>         this.initFrames(frames)
>       }*/
>       // 每一帧更新子弹位置
>       update() {
>         this.y += this[__.speed]
>     
>         // 超出屏幕外回收自身
>         if (this.y > window.innerHeight + this.height)
>           databus.removeBoBullets(this)
>       }
>     }

> ### **主函数** ###
> 
> **databus.js**
> 
>     import Pool from './base/pool'
>     
>     let instance
>     
>     /**
>      * 全局状态管理器
>      */
>     export default class DataBus {
>       constructor() {
>         if ( instance )
>           return instance
>     
>         instance = this
>     
>         this.pool = new Pool()
>     
>         this.reset()
>       }
>     
>       reset() {
>         this.frame      = 0
>         this.score      = 0
>         this.bullets    = []
>         this.enemys     = []
>         this.animations = []
>         this.gameOver   = false
>       }
>     
>       /**
>        * 回收敌人，进入对象池
>        * 此后不进入帧循环
>        */
>       removeEnemey(enemy) {
>         let temp = this.enemys.shift()
>     
>         temp.visible = false
>     
>         this.pool.recover('enemy', enemy)
>       }
>     
>       /**
>        * 回收子弹，进入对象池
>        * 此后不进入帧循环
>        */
>       removeBullets(bullet) {
>         let temp = this.bullets.shift()
>     
>         temp.visible = false
>     
>         this.pool.recover('bullet', bullet)
>       }
>     }
> 
> **main.js**
> 
>     import Player from './player/index'
>     import Sboss from './npc/smallboss'
>     import Enemy from './npc/enemy'
>     import GetSkill from './npc/getskill'
>     import Blood from './npc/blood'
>     import BackGround from './runtime/background'
>     import GameInfo from './runtime/gameinfo'
>     import Music from './runtime/music'
>     import DataBus from './databus'
>     import BoBullet from './npc/BoBullet'
>     import Menu from './menu'
>     
>     let ctx = canvas.getContext('2d')
>     let databus = new DataBus()
>     //let skill=0  //获取双弹头
>     /**
>      * 游戏主函数
>      */
>     export default class Main {
>       constructor() {
>         this.restart()
>       }
>     
>       /**开始ui绘制 */
>     
>       /**重新开始的初始化 */
>       restart() {
>         databus.reset()
>         canvas.removeEventListener(
>           'touchstart',
>           this.touchHandler
>         )
>         this.bg = new BackGround(ctx)
>         this.player = new Player(ctx)
>         this.gameinfo = new GameInfo()
>         this.music = new Music()
>         this.music.playBgm()
>         this.player.defaultbuttle()
>         window.requestAnimationFrame(
>           this.loop.bind(this),
>           canvas
>         )
>       }
>     
>     
>       /**
>        * 随着帧数变化的敌机生成逻辑
>        * 帧数取模定义成生成的频率
>        */
>       enemyGenerate() { //每秒30帧出现一次
>         if (databus.frame % 30 === 0)  //databus.frame % 30 === 0
>         {
>           let enemy = databus.pool.getItemByClass('enemy', Enemy)
>           enemy.init(5) //speed初始化
>           databus.enemys.push(enemy)
>         }
>       }
>       sbossGenerate() { //每秒30帧1/3概率出现一次大怪
>         if (databus.score == 88) wx.showToast({ title: '难度提高...' });
>         if (databus.score > 88) {
>           if (databus.frame % 30 === 0)  //databus.frame % 30 === 0
>           {
>             let num = Math.floor(Math.random() * 2) //0--3
>             if (num == 1) {
>               let sboss = databus.pool.getItemByClass('sboss', Sboss)
>               sboss.init(4) //speed初始化
>               databus.sboss.push(sboss)
>             }
>           }
>         }
>       }
>     
>       //技能生成
>       skillGenerate() {
>         let num = Math.floor(Math.random() * 1000) //0--10
>         if (num < 2) {
>           let skill = databus.pool.getItemByClass('skill', GetSkill)
>           skill.init(6)
>           databus.skills.push(skill)
>         }
>       }
>       //血块生成
>       bloodGenerate() {
>         let num = Math.floor(Math.random() * 1000) //0--10
>         if (num < 1) {
>           let blood = databus.pool.getItemByClass('blood', Blood)
>           blood.init(6)
>           databus.bloods.push(blood)
>         }
>       }
>     
>     
>       // 全局碰撞检测
>       collisionDetection() {
>         let that = this
>     
>         databus.bullets.forEach((bullet) => {
>           for (let i = 0, il = databus.enemys.length; i < il; i++) //子弹打小怪
>           {
>             let enemy = databus.enemys[i]
>     
>             if (!enemy.isPlaying && enemy.isCollideWith(bullet)) {
>               enemy.playAnimation()
>               that.music.playExplosion()
>     
>               bullet.visible = false
>               databus.score += 1
>               break
>             }
>           }
>           for (let i = 0, il = databus.sboss.length; i < il; i++)//子弹打大怪
>           {
>             let sboss = databus.sboss[i]
>     
>             if (!sboss.isPlaying && sboss.isCollideWith(bullet)) {
>               sboss.playAnimation()
>               that.music.playExplosion()
>               bullet.visible = false
>               databus.score += 2
>               databus.removeSBoss(sboss)
>               break
>             }
>           }
>           for (let i = 0, il = databus.bossbullets.length; i < il; i++) //子弹打子弹
>           {
>             let enemy = databus.bossbullets[i]
>             if (enemy.isCollideWith(bullet)) {
>               that.music.playExplosion()
>               bullet.visible = false
>               enemy.visible = false
>               break
>             }
>           }
>         })
>         //获得技能
>         for (let i = 0, il = databus.skills.length; i < il; i++) {
>           let skill = databus.skills[i]
>     
>           if (this.player.isCollideWith(skill)) {
>             this.player.addbuttle()
>             skill.visible = false
>             wx.showToast({ title: '获得双倍火力！' })
>             break
>           }
>         }
>         //获得血块
>         for (let i = 0, il = databus.bloods.length; i < il; i++) {
>           let blood = databus.bloods[i]
>     
>           if (this.player.isCollideWith(blood)) {
>             blood.visible = false
>             if (databus.hp < 3) {
>               wx.showToast({ title: '获得生命回复！' })
>               databus.hp += 1
>             }
>             break
>           }
>         }
>     
>         /**游戏失败 */
>         for (let i = 0, il = databus.enemys.length; i < il; i++) {
>           let enemy = databus.enemys[i]
>     
>           if (this.player.isCollideWith(enemy)) {
>             enemy.playAnimation()
>             that.music.playExplosion()
>             databus.hp -= 1
>             if (databus.hp <= 0) databus.gameOver = true
>             break
>           }
>         }
>         for (let i = 0, il = databus.bossbullets.length; i < il; i++) //被敌人子弹打到
>         {
>           let enemy = databus.bossbullets[i]
>           if (this.player.isCollideWith(enemy)) {
>             //enemy.playAnimation()
>             that.music.playExplosion()
>             databus.hp -= 1
>             enemy.visible = false;
>             if (databus.hp <= 0) databus.gameOver = true
>             break
>           }
>         }
>         for (let i = 0, il = databus.sboss.length; i < il; i++) {
>           let sboss = databus.sboss[i]
>     
>           if (this.player.isCollideWith(sboss)) {
>             sboss.playAnimation()
>             that.music.playExplosion()
>             databus.hp -= 1
>             databus.removeSBoss(sboss)
>             if (databus.hp <= 0) databus.gameOver = true
>             break
>           }
>         }
>       }
>     
>       //游戏结束后的触摸事件处理逻辑
>     
>       touchEventHandler(e) {
>         e.preventDefault()
>     
>         let x = e.touches[0].clientX
>         let y = e.touches[0].clientY
>         //获取结束时按钮面板信息
>         let area = this.gameinfo.btnArea_restart
>         let area_mean = this.gameinfo.btnArea_remean
>         //按钮事件监听
>         if (x >= area.startX
>           && x <= area.endX
>           && y >= area.startY
>           && y <= area.endY)
>           this.restart()
>         if (x >= area_mean.startX
>           && x <= area_mean.endX
>           && y >= area_mean.startY
>           && y <= area_mean.endY) {
>           canvas.removeEventListener(
>             'touchstart',
>             this.touchHandler
>           )
>           new Menu()
>         }
>     
>       }
>     
>       /**
>        * canvas重绘函数
>        * 每一帧重新绘制所有的需要展示的元素
>        */
>       render() {
>         ctx.clearRect(0, 0, canvas.width, canvas.height)
>     
>         this.bg.render(ctx)
>     
>         databus.bullets
>           .concat(databus.enemys)
>           .concat(databus.skills)
>           .concat(databus.bloods)
>           .concat(databus.sboss)
>           .concat(databus.bossbullets)
>           .forEach((item) => {
>             item.drawToCanvas(ctx)
>           })
>     
>         this.player.drawToCanvas(ctx)
>     
>         databus.animations.forEach((ani) => {
>           if (ani.isPlaying) {
>             ani.aniRender(ctx)
>           }
>         })
>     
>         this.gameinfo.renderGameScore(ctx, databus.score)
>         this.gameinfo.renderGameHp(ctx, databus.hp)
>       }
>     
>       // 游戏逻辑更新主函数
>       update() {
>         this.bg.update()
>     
>         databus.bullets
>           .concat(databus.enemys)
>           .concat(databus.skills)
>           .concat(databus.bloods)
>           .concat(databus.bossbullets)
>           .concat(databus.sboss)
>           .forEach((item) => {
>             item.update()
>           })
>     
>         this.enemyGenerate()
>         this.skillGenerate()
>         this.bloodGenerate()
>         this.collisionDetection()
>         this.sbossGenerate()
>       }
>     
>       // 实现游戏帧循环
>       loop() {
>     
>         databus.frame++
>         this.update()
>         this.render()
>         if (databus.frame % 20 === 0) {
>           this.player.shoot()
>           this.player.diffbuttle()
>           this.music.playShoot()
>           for (let i = 0, il = databus.sboss.length; i < il; i++) {
>             //if (databus.sboss[i].IsDie()) continue;
>             let num = Math.floor(Math.random() * 4) //0--3
>             if (num == 1) {
>               let sboss = databus.sboss[i]
>               sboss.bossshoot()
>               this.music.playboss()
>             }
>           }
>         }
>         // 游戏结束停止帧循环
>         if (databus.gameOver) {
>           this.gameinfo.renderGameOver(ctx, databus.score)
>           this.music.playDie()
>           this.music.stopBgm()
>           this.touchHandler = this.touchEventHandler.bind(this)
>           canvas.addEventListener('touchstart', this.touchHandler)
>           return
>         }
>     
>         window.requestAnimationFrame(
>           this.loop.bind(this),
>           canvas
>         )
>       }
>     }
> 
> **menu.js**
> 
>     import GameInfo from './runtime/gameinfo'
>     import Music from './runtime/music'
>     
>     import Main from './main'
>     let ctx = canvas.getContext('2d')
>     
>     /**
>      * 游戏主函数
>      */
>     export default class Menu
>     {
>       constructor() 
>       {
>         
>         this.remenu()
>       }
>       /**菜单绘制 */
>       remenu()
>       {
>         this.music = new Music()
>         this.gameinfo = new GameInfo()
>         this.music.playmenu()
>         this.gameinfo.renderMenu(ctx)
>         this.touchHandler = this.touchEventHandler.bind(this)
>         canvas.addEventListener('touchstart', this.touchHandler)
>       }
>       /**菜单按钮监听 */
>       //游戏结束后的触摸事件处理逻辑
>     
>       touchEventHandler(e) {
>         e.preventDefault()
>     
>         let x = e.touches[0].clientX
>         let y = e.touches[0].clientY
>         //获取结束时按钮面板信息
>         let area = this.gameinfo.btnArea_start
>         //按钮事件监听
>         if (x >= area.startX  && x <= area.endX  && y >= area.startY  && y <= area.endY)
>         {
>           canvas.removeEventListener(
>             'touchstart',
>             this.touchHandler
>           )
>           new Main()
>         }
>       }
>     }

> ### **入口** ###
> 
> **game.js**
> 
>     import './js/libs/weapp-adapter'
>     import './js/libs/symbol'
>     
>     import Main from './js/main'
>     import Menu from './js/menu'
>     
>     
>     new Menu()

--------------------

✎﹏﹏₯㎕[《晴天》][Link 1]花落的那一天...﹍﹍﹍﹍﹍﹍

[https_download.csdn.net_download_weixin_41918712_10954323]: https://download.csdn.net/download/weixin_41918712/10954323
[20190212183354296.png]: /images/20220320/26a877b21e164834b17054e6862d9a18.png
[20190212214056161.png]: https://img-blog.csdnimg.cn/20190212214056161.png
[20190212214107343.png]: https://img-blog.csdnimg.cn/20190212214107343.png
[20190212214112595.png]: https://img-blog.csdnimg.cn/20190212214112595.png
[20190212214115830.png]: /images/20220320/271062e12b4f4ec0ae5ca726a75b66e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxODcxMg_size_16_color_FFFFFF_t_70]: /images/20220320/a8abe092eb534195a8a8ad7b4e784201.png
[2019021222101415.png]: /images/20220320/b81cfe71b7bb46bfb882ba57685522e3.png
[20190212222541648.png]: /images/20220320/d44c90fda2c3410fb30d225adc1d769e.png
[20190212223040314.png]: /images/20220320/48f17e33bc6f44ffab99ed3f692f7419.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxODcxMg_size_16_color_FFFFFF_t_70 1]: /images/20220320/e175bcc8697e4f8e8378057517bd1a36.png
[20190212224552409.png]: /images/20220320/4314d01240524fc4b0ee596fcaa39deb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxODcxMg_size_16_color_FFFFFF_t_70 2]: /images/20220320/c846d22937f64d64addaa906f5064329.png
[Link 1]: https://www.baidu.com/s?wd=%E3%80%8A%E6%99%B4%E5%A4%A9%E3%80%8B&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd