这两天由于项目的需要,所以简单学了一下phaser框架. 官网:http://phaser.io/ 还有一个phaser小站,是中文的网站,但是内容不如英文文档全,大家也可以去看这个网站,需要查阅API时,再去英文网站也可以 :https://www.phaser-china.com 分享一下入门教程:http://club.phaser-china.com/topic/59899a81484a53dd723f422b demo地址:https://github.com/dreamITGirl/…

本来今天打算阅读AngularJs源代码的,但是上头下来了任务,做个小霸王上面的那种接金蛋的游戏,想象最近系统的学习了一下gulp和之前熟悉了一遍的Phaser,于是就打算用这两个东西一起来做个demo了. 虽然对白鹭比较熟悉,但是据说白鹭不支持键盘事件,所以就没有去考虑白鹭了. 以下是文件目录: dist:项目的输出路径,node服务器的静态文件服务目录,结构与src基本相同 node_module:node第三方包的安装路径 src: - assets:资源路径 - js:编写脚本的路径 -…

这篇博客主要讲一下上一篇博客的右侧和底部出现的问题.就是页面会有偏移量.说一下这个产生的原因吧. 一开始在构建html页面的时候,习惯性的在页面中加了 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> 加了这个,导致canvas画出的图在移动端上有些模糊,尤其是后面我们在画…

今天继续学习phaser.js.上周写的学习教程主要内容是创建游戏场景,游戏中的显示对象,按钮对象的使用以及如何在不同屏幕大小中完美适配.这篇博客以介绍游戏榜单的渲染更新为主. 代码地址:https://github.com/dreamITGirl/phaser,具体文件为Billboard.js. 这个学习过程是以一个类似于头脑风暴的游戏为实例,来学习phaser的框架,会有很多API讲不到,可自己去查,去学习. 由于考虑到后面的需求,所以现在将文件的文件名改了,demo01.js改为了loa…

phaser与eget, laya, pixi.js本质上没什么区别. 都是渲染引擎.  其它的都是配角.  phaser的特点是.代码容易理解 功能比较全面. 个人比较喜欢phaser的地方 tween,path,深度排序 下面来一步一步的学习phaser,以及用phaser快速移植小游戏 修改代码: 微信小游戏不支持blob, phaser加载image的方式需要修改. 添加适配器. 官网上下载最新的weapp-adapter. 其实仅需两步就可以支持微信小游戏了. 一些基本的功能点: 1.…

纯属个人兴趣, 如有兴趣可共同参与维护. git: https://gitee.com/redw1234567/phaser3_wx image的地方需要修改,代码贴上 var ImageFile = new Class({ Extends: File, initialize: function ImageFile (loader, key, url, xhrSettings, frameConfig) { this.isWX = typeof wx !== "undefined";…

phaser2小游戏基本没什么什么问题,可以下常开发游戏.如果遇到什么问题, 可以提出来共同讨论. 下面来个例子 import './lib/weapp-adapter'; import Phaser from './lib/phaser'; let systemInfo = wx.getSystemInfoSync(); let {windowWidth, windowHeight, pixelRatio} = systemInfo; var config = { width: windowW…

上一篇,水了近千字,很酸爽,同时表达了"重拾"一项旧本领并不容易,还有点题之效果.其实压缩起来就一句话:经过了一番记忆搜索,以及try..catch的尝试后,终于选定了Phaser 3.0作为我的小游戏开发引擎. 从这篇开始,我要开始拿出干货,进入实战.大家准备了好吗?一个字--干! 开发环境 首先说明一下,我的开发环境是VS Code + TypeScript.如果大家手头上没有用得比较顺手的TS开发环境,可以参考官微软方文档弄一个: https://code.visualstudi…

▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起来会遇到各种问题.比如,在最后判断游戏是否结束的时候,我写的语句语法是对的,但就是不执行.最后通过对视频源码的分析对比,发现原作者写的一个setTimeout定时器有额外的意思,本来我以为它就是简单的一个延时动画,其实他是在等待另外一个函数执行完毕.-_-||.最后还是很高兴能写出来,…

先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲剧了,出现了一些不理解的情况.这个错误比较低级,不过还是被我遇到了,就拿来记录一下. 注意: 在交换每张图片位置的时候,我对它们设置了CSS中transition属性,有了缓冲动画效果,这样一来,每次打乱图片的时候,用getComputedStyle获取计算后样式,但是,动画有时长,而获取样式在触发时就完成了…