摘要：前言是一個(gè)優(yōu)秀的前端庫(kù)，封裝了很多底層的實(shí)現(xiàn)，可以用來(lái)制作游戲，場(chǎng)景等。今年月新發(fā)布了，到今天為止已經(jīng)更新到了。聲明本游戲來(lái)自于小站的官方教程，加入了一些個(gè)人的注釋，本文旨在幫助各位觀眾老爺快速上手。

phaser是一個(gè)優(yōu)秀的前端canvas庫(kù)，封裝了很多底層的實(shí)現(xiàn)，可以用來(lái)制作游戲，h5場(chǎng)景等。今年1月新發(fā)布了phaser3，到今天為止已經(jīng)更新到了3.30。

本游戲來(lái)自于phaser小站的官方教程，加入了一些個(gè)人的注釋，本文旨在幫助各位觀眾老爺快速上手。

各位看官也可以直接移步phaser官網(wǎng)查看教程

每一個(gè)步驟后面都貼了代碼，如果因?yàn)槲业膶?xiě)作方式讓您難以接受，可以直接到每個(gè)步驟后面復(fù)制代碼

你需要一份phaser3.js
也可能需要一份文檔
如果有一份隨時(shí)查閱的范例當(dāng)然更好
一個(gè)本地服務(wù)器
一份包含素材的空[項(xiàng)目]()

這里是為觀眾老爺們準(zhǔn)備的github倉(cāng)庫(kù),有我們需要的素材和腳本文件

git clone https://github.com/YexChen/canvas_game.git

打開(kāi)我們的項(xiàng)目文件夾，修改index.html

然后在命令行運(yùn)行http-server，打開(kāi)瀏覽器，效果是不是出來(lái)了呢？

在上面的腳本中，我們定義了三個(gè)函數(shù)，preload,create,update,分別代表游戲中的預(yù)加載，初始化函數(shù)，更新函數(shù)。

在preload函數(shù)中加入以下代碼段：

      this.load.image("sky","./img/sky.png")
      this.load.image("star","./img/star.png")
      this.load.image("ground","./img/platform.png")
      this.load.image("bomb","./img/bomb.png")
      this.load.spritesheet("dude","./img/dude.png",{frameWidth:32,frameHeight:48})

spritesheet是精靈圖的加載方式，frameWidth是每幀的寬度，frameHeight是幀的高度，有興趣的朋友們可以量一量

摸了這么久的魚(yú)，也該看點(diǎn)成果了吧，我們來(lái)制作主場(chǎng)景：
在create函數(shù)中加入：

  this.add.image(400,300,"sky")

保存，刷新，我們的界面上是不是出現(xiàn)了一片藍(lán)天呢？

this.add.image(offsetX,offSetY,imagename)
有興趣的朋友們可以調(diào)下參數(shù)，試一下(0,0,"sky")是在哪個(gè)地方的

讓我們來(lái)繼續(xù)添加場(chǎng)景吧,緊跟著上一句輸入以下代碼：

      platforms = this.physics.add.staticGroup()
      platforms.create(400,568,"ground").setScale(2,2).refreshBody()
      platforms.create(600,400,"ground")
      platforms.create(0,300,"ground")
      platforms.create(600,200,"ground")
      platforms.create(0,100,"ground")

create(x,y,imagename)
selScale(x,y):把圖片縮放x,y倍，如果不設(shè)置y的話就按x的倍數(shù)縮放
這個(gè)refreshbody大家可以去掉，后面會(huì)有驚喜的

這樣場(chǎng)景就繪制出來(lái)了，各位看官也可以自己設(shè)置參數(shù)，制作屬于自己的游戲場(chǎng)景

盡量不要做出這種反人類設(shè)計(jì)就行。。emmm，你的游戲你做主咯

可能內(nèi)容多，大家可能會(huì)打錯(cuò)地方，發(fā)一下完整的代碼段：

什么都有了，主角怎么能少呢？
緊接著上一行，寫(xiě)下代碼：

player = this.physics.add.sprite(100,450,"dude")    

刷新一下，是不是看到我們的男主角生成出來(lái)。。然后又入土為安了呢？
聰明的你應(yīng)該會(huì)想到：是缺少了碰撞函數(shù)，那么，讓我們來(lái)添加碰撞函數(shù)吧,緊接著添加：

      player.setBounce(0.2)
      player.setCollideWorldBounds(true)

刷新頁(yè)面，哇塞

我們的男主真入土為安了！

嗯，這不是我們想要的結(jié)果，至少不是我的。。我們好像忘記給障礙物添加碰撞了，我們來(lái)加一下吧：

      this.physics.add.collider(player,platforms)

大家還記得哪個(gè)refreshbody嗎？如果你當(dāng)時(shí)刪掉了它，那么碰撞就還是不會(huì)成立（話說(shuō)這種東西作者去內(nèi)置一個(gè)方法不就好了么）

這里貼出目前完整的代碼：

要是不能操控的話，那這游戲也太佛系了，我們來(lái)添加一動(dòng)畫(huà)效果吧
Phaser類有個(gè)anims成員，用來(lái)管理所有的動(dòng)畫(huà)效果（說(shuō)白了就是改變圖片嘛），接下來(lái)我們通過(guò)代碼感受一下,添加到上述代碼后面：

      this.anims.create({
        key : "left",
        frames : this.anims.generateFrameNumbers("dude",{start : 0,end : 3}),
        frameRate : 10,
        repeat : -1
      })

      this.anims.create({
        key : "turn",
        frames : [{key : "dude",frame : 4}],
        frameRate : 20
      })

      this.anims.create({
        key : "right",
        frames : this.anims.generateFrameNumbers("dude",{
          start : 5,end : 8
        }),
        frameRate : 10,
        repeat : -1
      })

然后我們初始化遙控器吧：

      cursors = this.input.keyboard.createCursorKeys()

按下鍵盤方向鍵上下左右，誒？為什么沒(méi)反應(yīng)？
我們好像忘記在update函數(shù)中監(jiān)聽(tīng)鍵盤了，難怪沒(méi)反應(yīng),
在update函數(shù)中添加以下代碼：

if(cursors.left.isDown)
      {
        player.setVelocityX(-50)

        player.anims.play("left",true)
      }
      else if(cursors.right.isDown)
      {
        player.setVelocityX(50)

        player.anims.play("right",true)
      }
      else{
        player.setVelocityX(0)

        player.anims.play("turn")
      }
      
      if(cursors.up.isDown && player.body.touching.down){
        player.setVelocityY(-300)
      }

好，現(xiàn)在移動(dòng)我們?nèi)宋铮郏叩脑趺催@么慢！各位自己改下參數(shù)吧，每個(gè)人都有不同的游戲愛(ài)好，你一定可以找到最適合自己的配置的，當(dāng)然啦，也可以玩出滑冰模式，月球模式，鬼畜模式，神仙模式，鬼人正邪模式等等。。開(kāi)發(fā)游戲主要靠想象力對(duì)吧

貼一下我們的代碼

好了，人物有了，接下來(lái)應(yīng)該做點(diǎn)道具了吧，我們來(lái)畫(huà)點(diǎn)星星，在create函數(shù)中添加代碼:

  stars = this.physics.add.group({
        key : "star",
        repeat : 11,
        setXY : {x: 20,y: 0,stepX:70}
      })

      stars.children.iterate(function(child){
        //設(shè)置一下碰撞效果
        child.setBounceY(Phaser.Math.FloatBetween(0.4,0.8))
      })

      this.physics.add.collider(stars,platforms)
      

我們初始化了一些星星，添加了小小的碰撞效果，然而。。。

并不能吃到星星！就像一大盤香噴噴羊蝎子在你面前你卻不能吃(我這篇博客定到晚12點(diǎn)發(fā)就好了)

因?yàn)闆](méi)有寫(xiě)星星和男主的碰撞函數(shù)，我們來(lái)在后面寫(xiě)一行

this.physics.add.overlap(player,stars,collectStar,null,this)

overlap(obj1,obj2,overcallback,processcallback,回掉中的上下文(this))

然后在文件底部加一個(gè)函數(shù):

function collectStar(player,star)
    {
      //讓star實(shí)體消失
      star.disableBody(true,true)
    }

好了，現(xiàn)在可以正常的吃星星了

貼上目前的代碼段：

如果這個(gè)游戲沒(méi)有計(jì)分系統(tǒng)和炸彈的話，那么這個(gè)游戲也太過(guò)于佛系了
在preload前面加上一行：

let score = 0
let scoreText
let gameover = false

然后在create函數(shù)中尾部添加：

      bombs = this.physics.add.group()
      scoreText = this.add.text(16,16,"score : 0",{fontSize: "32px",fill: "#000"})

這是一個(gè)炸彈群組，我們?cè)谒行切潜怀怨庖院笫褂眠@個(gè)群組添加炸彈

修改collectstar函數(shù)為:

function collectStar(player,star)
    {
      //讓star實(shí)體消失
      star.disableBody(true,true)

      score += 1000
      scoreText.setText("score :"+ score)
      if(stars.countActive(true) === 0)
      {
        stars.children.iterate(function(child)
        {
          child.enableBody(true,child.x,0,true,true)
        })
        var x = (player.x<400)?Phaser.Math.Between(400,800):Phaser.Math.Between(0,400)

        var bomb = bombs.create(x,16,"bomb")
        bomb.setBounce(true)
        bomb.setCollideWorldBounds(true)
        bomb.setVelocity(Phaser.Math.Between(-200,200),20)
        bomb.allowGravity = false
      }
    }

然后在create函數(shù)中加上碰撞:

      this.physics.add.collider(bombs,platforms)
      this.physics.add.collider(player,bombs,bombbbb,null,this)

在文件尾部加上撞擊函數(shù):

  function bombbbb()
  {
    this.physics.pause()

    //涂色，我覺(jué)得綠綠的比較好看
    player.setTint(0x00ff00)

    player.anims.play("turn")

    gameover = true
  }

至此，我們的游戲就大功告成啦。。誒，好像我的人物還能動(dòng)？這個(gè)問(wèn)題就留給大家自己解決了哈哈

完整代碼：