您当前的位置：主页 > 技术探讨 >

前端游戏方案phaser3开发《捕鱼大乱斗》

时间：2025-03-11 11:50 日记人：arlen.zhou

好久没更新文章了，一直都在忙其他的事情，刷段子的时候一个网友说我好久没更新了，确实如此。其实还是有人看我的文章的嘛。
言归正传，最近我又研究了一个新的框架是做游戏的，在想做的游戏的时候，我就考虑过好几种方案，只要从学习难度，开发成本，生态完善和工具各方面考虑。

虽然市面上有各种 C  C#  Python  go  但是 我们主要是写js的  所以优先考虑的就是自己的熟悉语法js，然后就是 phaser3  laya   cocos   白鹭框架还有个pixi，
因为我想做的那个捕鱼达人游戏，我看了他的源码就是白鹭框架，本来想用白鹭的 但是公司倒了，然后我就选了个上手容易的phaser3，以前也没开发过，没法只有学习了，
先上慕课网找个免费的视频教学，然后跟着就做，再github上找点游戏源码看看，然后就开始了。

我们来了解下游戏如何开发的：  
游戏地址：http://com.arlen.top:3002/1buyu
一、搭建框架：phaser3 + jq + layui + css + SpinePlugin.js + dragonBones.js + webpack
技术框架你先搭建好， 为啥用jq呢 ，主要涉及一些登录界面和里面弹窗定位，单纯用phaser3 很麻烦，而且兼容不好做，用js操作dom会方便很多，当然肯定有其他省事的方案，
不过我不知道也没了解到。开发的时候，注意phaser3 是国外的一个框架 所以他的文档少许多，但是简单，我后面了解到他本身有个快速开发的 快速开发游戏编辑器，不过要收费 还是美元，还是算了




二、了解生命周期：

游戏开发也像开发页面一样有生命周期，进入游戏界面和离开界面  主要关注几个事件。

preload 进入页面加载资源的
preload 加载成功后使用资源开发游戏交互逻辑的
update  是随时随地都在执行刷新的事件，主要处理页面的各种碰撞和检查界面要高频发生的事情都可以用他，下图是一个简单的生态页面和搭建加载结构



操作事件：
    键盘鼠标操作监听
    this.input.keyboard.on('keydown', (event) => { console.log('Key pressed: ', event.key); });
this.input.on('pointerdown', (pointer) => { console.log('Mouse clicked at: ', pointer.x, pointer.y); });

     加载图片 资源和使用资源
    
     同样的 可以加载音乐，并控制音乐什么时候发生，什么时候暂停，控制里面的元素触发点击事件，当然在游戏的世界里面称为精灵，可以理解为每个独立的精灵元素
      
     

   网上有很多 指令的文档，随便找找都有，这里不做多介绍

   这个游戏开发主要是坐标定位，X  Y轴的计算和控制，所以留意精灵定位，做兼容处理的时候很麻烦，不知道有其他方案没，还有待寻找

   游戏界面跳转：

   两个不同游戏场景之间需要跳转也很简单，下图就是路由，根据指令   this.scene.start(url);   就可以处理




未完待续~！