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

    前端游戏方案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);   就可以处理




    未完待续~!

上一篇:开发chartGTP智能平台 下一篇:没有了