微信小程序——飛機大戰（軟工第一次作業）

頭部信息

博客班級	https://edu.cnblogs.com/campus/zjcsxy/SE2020
小程序作業要求	編寫一個小程序，可以全新編寫，也可以學習別人的小程序進行修改 熟悉git代碼管理流程，將源代碼上傳到到github 在博客園班級中寫一篇相應的博文
作業源代碼	https://github.com/1xu1/wechat_app
學號	31801115
院系	浙大城市學院計算系

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第一次接觸微信小程序開發，所以就用了微信開發者工具創建小游戲項目創建出來的默認demo來練手，在觀察學習的基礎上添加了一些新的要素和特色。

（因為是第一次接觸，所以難免會有些不足之處和不了解，望諒解）

我在此demo的基礎上增添了玩家生命值系統，讓敵機也有能力發射子彈，並使撞機的傷害比子彈更高，新增了新的回血掉落物以及切換三連發掉落物（拾取后玩家在一段時間內加快子彈發射速度，切換為三連發模式），掉落物刷新有自己的冷卻時間，修改了飛機子彈刷新速率等等。

默認小程序創建步驟：

 

 點擊紅框部分

 

 

 

 點擊新建

我們就可以得到一份原始demo

原始demo在網上已經有了分析博客，所以我就不在此贅述了，貼上網上找到的分析博客地址：

https://www.cnblogs.com/Phoenix-blog/p/10948630.html

目前我的項目的文件結構：

 

 

該demo中已經幫我們實現了游戲里最基礎的sprite（精靈）以及簡單的碰撞檢測機制，因此我們可以在繼承這個類的基礎上做出很多游戲內的實體（如敵機，掉落物，子彈等等）

/**
 * 游戲基礎的精靈類
 */
export default class Sprite {
  constructor(imgSrc = '', width=  0, height = 0, x = 0, y = 0) {
    this.img     = new Image()
    this.img.src = imgSrc

    this.width  = width
    this.height = height

    this.x = x
    this.y = y

    this.visible = true
  }

  /**
   * 將精靈圖繪制在canvas上
   */
  drawToCanvas(ctx) {
    if ( !this.visible )
      return

    ctx.drawImage(
      this.img,
      this.x,
      this.y,
      this.width,
      this.height
    )
  }

  /**
   * 簡單的碰撞檢測定義：
   * 另一個精靈的中心點處於本精靈所在的矩形內即可
   * @param{Sprite} sp: Sptite的實例
   */
  isCollideWith(sp) {
    let spX = sp.x + sp.width / 2
    let spY = sp.y + sp.height / 2

    if ( !this.visible || !sp.visible )
      return false

    return !!(   spX >= this.x
              && spX <= this.x + this.width
              && spY >= this.y
              && spY <= this.y + this.height  )
  }
}

為此我在databus.js文件中添加了更多的數據類型，以兼容我新增的幾個實體（值得一提的是這個文件中的代碼也實現了簡單的對象池，以提高游戲運行效率，為此我也為回收新增的幾個實體寫了幾個方法）

constructor() {
    if ( instance )
      return instance

    instance = this
    this.hp_re = new Hp_re(20,0,2)
    this.shoot_mode3=new Shoot_mode3(20,0,2)
    this.pool = new Pool()

    this.reset()
  }

  reset() {
    this.frame      = 0
    this.score      = 0
    this.bullets    = []
    this.enemy_bullets=[]
    this.enemys     = []
    this.animations = []
    this.gameOver   = false
   
  }

 

 通過修改增添index.js文件中的代碼，我實現了玩家飛機的射擊模式切換以及新的射擊模式，未來可以在此添加更多的射擊模式，以及增加了一個新的hp變量，來實現生命值系統。

shoot() {
    if(this.shoot_mode==0){
      let bullet = databus.pool.getItemByClass('bullet', Bullet)
      bullet.init(
        this.x + this.width / 2 - bullet.width / 2,
        this.y - 10,
        10
      )
    databus.bullets.push(bullet)
    }
    else if(this.shoot_mode==3){
        this.shoot_3()
    }
  }
  //新增三發連射 
  shoot_3() {
    let bullet_1 = databus.pool.getItemByClass('bullet_1', Bullet)

    bullet_1.init(
      this.x + this.width / 2 - bullet_1.width / 2,
      this.y - 10,
      10
    )

    databus.bullets.push(bullet_1)

    let bullet_2 = databus.pool.getItemByClass('bullet_2', Bullet)

    bullet_2.init(
      this.x + this.width / 2 - bullet_2.width / 2+20,
      this.y - 10,
      10
    )

    databus.bullets.push(bullet_2)

    let bullet_3 = databus.pool.getItemByClass('bullet_3', Bullet)

    bullet_3.init(
      this.x + this.width / 2 - bullet_3.width / 2-20,
      this.y - 10,
      10
    )

    databus.bullets.push(bullet_3)
  }

最主要的還是main.js這個文件，游戲的主循環和更新：update(),循環：loop(),渲染：render()，全局碰撞檢測collisionDetection()等幾個重要的函數都在這里面，為了增添我在上面說的一些變動，這個文件里的代碼也改動了不少。

最后的總結：

　　這次作業的大部分時間都花在看這份原始demo的代碼上了，為了搞懂這份demo的框架與運行機制花了不少時間，最主要的困難還是在於對JavaScript這門語言的不熟悉上，在編寫代碼的過程中犯了不少語法錯誤。