您当前的位置:主页 > 技术探讨 >
前端游戏方案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); 就可以处理
未完待续~!