资讯专栏INFORMATION COLUMN

[phaser3学习]使用phaser3做一款飞刀小游戏

BothEyes1993 / 3210人阅读

摘要:前言作为一款流行的游戏动画框架受到很多开发者的青睐最近笔者在逛意大利开发者论坛的时候发现了这款小游戏所以就照着说明做了一下在这里记录下来开发准备插件脚本飞刀和靶子的图像或者这个项目里面有的脚本和需要的图像文件开始制作搭建基本的项目创建一个

前言

phaser作为一款流行的游戏/动画框架,受到很多web开发者的青睐,最近笔者在逛意大利开发者:emanueleferonato论坛的时候发现了这款小游戏,所以就照着说明做了一下,在这里记录下来.

开发准备

nodejs+npm
http-server插件
phaser脚本
飞刀和靶子的图像

或者

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

这个项目里面有phaser的脚本和需要的图像文件

开始制作 搭建基本的phaser项目

创建一个基本的html文件,引入phaser文件




  
  
  
  Document
  


  



别忘了在当前目录下启动http-server,启动服务器.打开localhost:8080(或其他端口)来查看项目

那么现在,我们需要干什么呢?
我们现在需要在页面加载时加载一个游戏实例,代码如下:

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游戏的构建函数,定义了实例的类型,宽高,背景颜色,场景等信息,大家可以console.log(Phaser)看一下定义.
playGame是接下来的场景.
gameConfig 是游戏的参数,方便修改

接下来我们定义一下我们的场景:

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

      preload(){

      }

      create(){

      }

      update(){

      }
    }

场景在游戏中相当于戏曲中的每一幕,通过Phaser.Scene.start来进行调用.

在Phaser游戏中,场景创建时会先运行preload函数,用来预加载图片模型.然后运行create函数,执行初始化代码,最后在每一步中调用update函数更新

预加载图片
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)函数可以调整图像的缩放.
knifeGroup 是空的group对象,用来存放之后的飞刀集合

让我们的图像动起来

修改update函数:

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

好的,至此我们的项目基础就结束了,接下来来做飞刀的逻辑吧

扔飞刀逻辑

我们首先需要监听用户的鼠标事件,可以使用Phaser内置的函数来实现,在created中加入:

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

throwKnife 是我们扔飞刀的处理函数,我们写在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管理器,官方文档比较残废,部分参数如下:

target : tweens动画目标
y : 目标的y坐标,
duration: 动画时间
callbackScope: 回调函数的this值
onComplete: 完成时的回调函数

飞刀插上去以后,我们要判断这个飞刀是不是和其它飞刀的重合,笔者这里的判断方式是在每一个飞刀插到盘面上时把当前轮盘的角度保存下来,当下一次投掷的时候判断当前盘面旋转度和以往的旋转度距离是否小于最小值,如果小于最小值就游戏结束,否则就插一次飞刀.

我们在上面的onComplete函数里面写下代码:

let isLegal = true
let children = this.knifeGroup.getChildren()
for(var i=0;i

我们判断之前所有飞刀的impactAngle值,如果没有和当前角度相差10度的,我们就插入新的飞刀,否则播放动画以后重启游戏.

更新每一把飞刀的位置

好的,我们扔飞刀的逻辑已经完成了,接下来我们只需要遍历每一个knifeGroup里面的子飞刀的位置,并在update更新函数里面更新他们的位置,游戏就算做完了.
在update函数里面添加:

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位移.

我们的小游戏就做完了,完整代码如下,顺便做了下记分牌:




  
  
  
  Document
  


  


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95975.html

相关文章

  • [phaser3入门探坑]使用phaser3制作山寨马里奥

    摘要:前言是一个优秀的前端库,封装了很多底层的实现,可以用来制作游戏,场景等。今年月新发布了,到今天为止已经更新到了。声明本游戏来自于小站的官方教程,加入了一些个人的注释,本文旨在帮助各位观众老爷快速上手。 前言 phaser是一个优秀的前端canvas库,封装了很多底层的实现,可以用来制作游戏,h5场景等。今年1月新发布了phaser3,到今天为止已经更新到了3.30。 声明 本游戏来自于...

    szysky 评论0 收藏0
  • Phaser3游戏三角学应用--一只跟随屏幕点击位置游动的鱼

    摘要:资源图代码中为初始化代码三角函数得出鱼要旋转的角度判断鱼是否需要反转点击的位置和鱼头相同不反转点击的位置和鱼头相同不反转判断鱼是否需要反转点击的位置和鱼头相反反转点击的位置和鱼头相反反转让鱼移动到点击的位置更多游戏教学为游戏开发 showImg(https://segmentfault.com/img/remote/1460000017023462); showImg(https://...

    wangbinke 评论0 收藏0
  • Phaser3游戏三角学应用--一只跟随屏幕点击位置游动的鱼

    摘要:资源图代码中为初始化代码三角函数得出鱼要旋转的角度判断鱼是否需要反转点击的位置和鱼头相同不反转点击的位置和鱼头相同不反转判断鱼是否需要反转点击的位置和鱼头相反反转点击的位置和鱼头相反反转让鱼移动到点击的位置更多游戏教学为游戏开发 showImg(https://segmentfault.com/img/remote/1460000017023462); showImg(https://...

    CoderDock 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<