摘要：前言作為一款流行的游戲動(dòng)畫框架受到很多開發(fā)者的青睞最近筆者在逛意大利開發(fā)者論壇的時(shí)候發(fā)現(xiàn)了這款小游戲所以就照著說明做了一下在這里記錄下來開發(fā)準(zhǔn)備插件腳本飛刀和靶子的圖像或者這個(gè)項(xiàng)目里面有的腳本和需要的圖像文件開始制作搭建基本的項(xiàng)目創(chuàng)建一個(gè)

phaser作為一款流行的游戲/動(dòng)畫框架,受到很多web開發(fā)者的青睞,最近筆者在逛意大利開發(fā)者:emanueleferonato論壇的時(shí)候發(fā)現(xiàn)了這款小游戲,所以就照著說明做了一下,在這里記錄下來.

nodejs+npm
http-server插件
phaser腳本
飛刀和靶子的圖像

或者

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

這個(gè)項(xiàng)目里面有phaser的腳本和需要的圖像文件

創(chuàng)建一個(gè)基本的html文件,引入phaser文件

別忘了在當(dāng)前目錄下啟動(dòng)http-server,啟動(dòng)服務(wù)器.打開localhost:8080(或其他端口)來查看項(xiàng)目

那么現(xiàn)在,我們需要干什么呢?
我們現(xiàn)在需要在頁面加載時(shí)加載一個(gè)游戲?qū)嵗?代碼如下:

let game,knifeGroup
let gameConfig = {
  rotateSpeed : 5,
  throwSpeed : 150,
  minAngle : 10
}
window.onload = function(){
    game = new Phaser.Game({
        type: Phaser.CANVAS,
        width: 600,
        height: 700,
        backgroundColor: 0xffffdffffd,
        scene: [playGame]
    })
}

Phaser.Game 是phaser游戲的構(gòu)建函數(shù),定義了實(shí)例的類型,寬高,背景顏色,場景等信息,大家可以console.log(Phaser)看一下定義.
playGame是接下來的場景.
gameConfig 是游戲的參數(shù),方便修改

接下來我們定義一下我們的場景:

class playGame extends Phaser.Scene{
      constructor(){
        super("playGame")
      }

      preload(){

      }

      create(){

      }

      update(){

      }
    }

場景在游戲中相當(dāng)于戲曲中的每一幕,通過Phaser.Scene.start來進(jìn)行調(diào)用.

在Phaser游戲中,場景創(chuàng)建時(shí)會(huì)先運(yùn)行preload函數(shù),用來預(yù)加載圖片模型.然后運(yùn)行create函數(shù),執(zhí)行初始化代碼,最后在每一步中調(diào)用update函數(shù)更新

preload(){
        this.load.image("target","image/target.png")
        this.load.image("knife","image/knife.png")
}

在preload中加入以上代碼,把圖片注冊(cè)進(jìn)來.

create(){
    this.target = this.add.image(game.config.width/2,game.config.height/5 *2,"target").setScale(0.5,0.5)
    this.target.depth = 1
    this.knife = this.add.image(game.config.width/2,game.config.height/5*4,"knife").setScale(0.5,0.5)
    this.knifeGroup = this.add.group()
    console.log(this)
}

this.add.image通過提供的寬高和上一步中提供的url來生成Image類型的對(duì)象(和原生的不一樣!),
對(duì)象的原型鏈上的setScale(x,y)函數(shù)可以調(diào)整圖像的縮放.
knifeGroup 是空的group對(duì)象,用來存放之后的飛刀集合

修改update函數(shù):

update(){
        this.target.angle += gameOptions.rotateSpeed
}

好的,至此我們的項(xiàng)目基礎(chǔ)就結(jié)束了,接下來來做飛刀的邏輯吧

我們首先需要監(jiān)聽用戶的鼠標(biāo)事件,可以使用Phaser內(nèi)置的函數(shù)來實(shí)現(xiàn),在created中加入:

    this.canThrow = true
    this.input.on("pointerdown",this.throwKnife,this)

throwKnife 是我們?nèi)语w刀的處理函數(shù),我們寫在update后面:

throwKnife(){
    if(!this.canThrow){
      return
    }
    this.canThrow = false
    this.tweens.add({
      targets: [this.knife],
      y: this.target.y+this.knife.height/8 * 3,
      duration: gameOptions.throwSpeed,
      callbackScope: this,
      onComplete: function(tween){
        
      },
    })
  }

我們?cè)谟脩舭聪率髽?biāo)左鍵時(shí),檢測是否可扔,如果可扔的話就讓我們的飛刀做一個(gè)tweens動(dòng)畫,this.tweens是一個(gè)tweens管理器,官方文檔比較殘廢,部分參數(shù)如下:

target : tweens動(dòng)畫目標(biāo)
y : 目標(biāo)的y坐標(biāo),
duration: 動(dòng)畫時(shí)間
callbackScope: 回調(diào)函數(shù)的this值
onComplete: 完成時(shí)的回調(diào)函數(shù)

飛刀插上去以后,我們要判斷這個(gè)飛刀是不是和其它飛刀的重合,筆者這里的判斷方式是在每一個(gè)飛刀插到盤面上時(shí)把當(dāng)前輪盤的角度保存下來,當(dāng)下一次投擲的時(shí)候判斷當(dāng)前盤面旋轉(zhuǎn)度和以往的旋轉(zhuǎn)度距離是否小于最小值,如果小于最小值就游戲結(jié)束,否則就插一次飛刀.

我們?cè)谏厦娴膐nComplete函數(shù)里面寫下代碼:

let isLegal = true
let children = this.knifeGroup.getChildren()
for(var i=0;i
我們判斷之前所有飛刀的impactAngle值,如果沒有和當(dāng)前角度相差10度的,我們就插入新的飛刀,否則播放動(dòng)畫以后重啟游戲.
更新每一把飛刀的位置
好的,我們?nèi)语w刀的邏輯已經(jīng)完成了,接下來我們只需要遍歷每一個(gè)knifeGroup里面的子飛刀的位置,并在update更新函數(shù)里面更新他們的位置,游戲就算做完了.
在update函數(shù)里面添加:
update(){
    this.target.angle += gameOptions.rotateSpeed
    let children = this.knifeGroup.getChildren()
    for(var i=0;i< children.length;i++){
      let child = children[i]
      child.angle += gameOptions.rotateSpeed
      let ang = Phaser.Math.DegToRad(child.angle)
      child.x = this.target.x - Math.sin(ang) * this.target.width/4
      child.y = this.target.y + Math.cos(ang) * this.target.width/4
    }
  }
我們?cè)陲w刀移動(dòng)時(shí)計(jì)算每一步偏移的角度,從而判斷出子飛刀child的x,y位移.

我們的小游戲就做完了,完整代碼如下,順便做了下記分牌: