微信小游戏实战——飞机大战demo笔记完整篇（函数实现）

最新推荐文章于 2020-12-07 19:55:45 发布

Ace.三阶斗尊

最新推荐文章于 2020-12-07 19:55:45 发布

阅读量3.6k

点赞数 2

分类专栏：微信小游戏文章标签：微信小游戏

本文链接：https://blog.csdn.net/qq_42231156/article/details/104170835

版权

本文详细记录了微信小游戏《飞机大战》的开发过程，包括game.js的入口逻辑，game.json的全局配置参数解析，以及src目录下各模块如背景、英雄飞机、子弹、敌机、动画效果、得分显示和游戏结束弹窗的实现细节。同时，介绍了如何使用wx.drawImage方法在canvas中绘制图像，并提到了图片路径在真机上的正确写法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 目录结构：

2. game.js：入口文件

//game.js文件完整代码：
import Main from "./src/mian.js"
new Main()

3. game.json：全家配置参数文件，参考https://developers.weixin.qq.com/minigame/dev/reference/configuration/app.html。

{
  "deviceOrientation":"portrait",
  " showStatusBar":true
}

4. src/main.js：初始化js逻辑代码文件：

import Background from "./all/background.js"
import Audio from "./all/audio.js"
import Hero from "./all/hero.js"
import Bullet from "./all/bullet.js"
import Enemy from "./all/enemy.js"
import Animation from "./all/animation.js"
import Text from "./all/text.js"

class main{
  constructor(){
    this.canvas = wx.createCanvas()
    this.ctx = this.canvas.getContext('2d')
    
    this.ch=GameGlobal.innerHeight //屏幕的高
    this.cw = GameGlobal.innerWidth //屏幕的宽

    this.bulletObjArr=[]  //存放屏幕内可见的子弹数组
    this.enemyObjArr=[]    //存放屏幕内可见的敌机数组
    this.animationObjArr=[]  //存放屏幕内可见的爆炸效果动画的数组

    this.bangImgArr=[]  //提前缓存19张爆炸效果图数组
    for(let i=0;i<19;i++){
      let obj={
        bang:wx.createImage()
      }
      obj.bang.src = `./images/explosion${i+1}.png`
      this.bangImgArr.push(obj)
    }

    this.scoreNum=0  //得分
    this.bgMoveTop=0  //背景图片移动的上下位移
    this.initStart()   //初始化逻辑
  }
  initStart(){     
    let bgObj=n

最低0.47元/天解锁文章