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

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

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

或者

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

這個項目里面有phaser的腳本和需要的圖像文件

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

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

那么現(xiàn)在,我們需要干什么呢?
我們現(xiàn)在需要在頁面加載時加載一個游戲實例,代碼如下:

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游戲的構建函數(shù),定義了實例的類型,寬高,背景顏色,場景等信息,大家可以console.log(Phaser)看一下定義.
playGame是接下來的場景.
gameConfig 是游戲的參數(shù),方便修改

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

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

      preload(){

      }

      create(){

      }

      update(){

      }
    }

場景在游戲中相當于戲曲中的每一幕,通過Phaser.Scene.start來進行調用.

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

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

在preload中加入以上代碼,把圖片注冊進來.

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類型的對象(和原生的不一樣!),
對象的原型鏈上的setScale(x,y)函數(shù)可以調整圖像的縮放.
knifeGroup 是空的group對象,用來存放之后的飛刀集合

修改update函數(shù):

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

好的,至此我們的項目基礎就結束了,接下來來做飛刀的邏輯吧

我們首先需要監(jiān)聽用戶的鼠標事件,可以使用Phaser內(nèi)置的函數(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){
        
      },
    })
  }

我們在用戶按下鼠標左鍵時,檢測是否可扔,如果可扔的話就讓我們的飛刀做一個tweens動畫,this.tweens是一個tweens管理器,官方文檔比較殘廢,部分參數(shù)如下:

target : tweens動畫目標
y : 目標的y坐標,
duration: 動畫時間
callbackScope: 回調函數(shù)的this值
onComplete: 完成時的回調函數(shù)

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

我們在上面的onComplete函數(shù)里面寫下代碼:

let isLegal = true
let children = this.knifeGroup.getChildren()
for(var i=0;i
我們判斷之前所有飛刀的impactAngle值,如果沒有和當前角度相差10度的,我們就插入新的飛刀,否則播放動畫以后重啟游戲.
更新每一把飛刀的位置
好的,我們?nèi)语w刀的邏輯已經(jīng)完成了,接下來我們只需要遍歷每一個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
    }
  }
我們在飛刀移動時計算每一步偏移的角度,從而判斷出子飛刀child的x,y位移.

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