phaser.js的源码可以到它在github上的托管里去下载，游戏要用到的图片声音等素材资源请点击这里下载。Phaser的使用非常简单，只需要引入它的主文件，然后在页面中指定一个用来放置canvas的元素，然后实例化一个 Game 对象就可以了。

复制代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>game</title>

<script src="http://pic1.codesec.net/app_attach/20141022/20141022_32_50760_0.js"></script>

</head>

<body>

<div id="game"></div>

<script>

var game = new Phaser.Game(288,505,Phaser.AUTO,'game'); //实例化一个Phaser的游戏实例

</script>

</body>

</html>

复制代码

我们来看看Phaser.Game这个函数都有哪些参数：

Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)

width: 游戏的宽度,也就是用来渲染游戏的canvas的宽度，单位为px

height: 游戏的高度，也就是用来渲染游戏的canvas的高度，单位为px

renderer: 使用哪种渲染方式，Phaser.CANVAS 为使用html5画布，Phaser.WEBGL 为使用性能更加好的WebGL来渲染，Phaser.AUTO为自动侦测，如果浏览器支持WebGL则使用WebGL,否则使用Canvas

parent: 用来放置canvas元素的父元素，可以是一个元素id，也可以是dom元素本身，phaser会自动创建一个canvas并插入到这个元素中。

state: state可以理解为场景，在这里指定state表示让游戏首先加载这个场景，但也可以不在这里指定state，而在之后的代码中决定首先加载哪个state。关于state我后面还会有详细的说明。

transparent: 是否使用透明的canvas背景

antialias: 是否启用抗锯齿

physicsConfig: 游戏物理系统配置参数

以上所有参数都是可选的，它们的默认值以及更详细的信息可以看这里，一般我们只需指定前面那4到5个参数就行了。

实例化Game对象后，接下来要做的就是创建游戏会用到的各种场景了，也就是上面说的state，那么怎么才能创建一个state呢？state可以是一个js自定义对象，也可以是一个函数，只要它们存在preload、create、update这三个方法中的任意一个，就是一个合法的state。

复制代码

//state可以是一个自定义对象

var state1 = {

preload : function(){ },

create : function(){ },

update : function(){ }

}

//state也可以是一个构造函数

var state2 = function(){

this.preload = function(){ };

this.create = function(){ };

this.update = function(){ };

}

//只要存在preload、create、update三个方法中的一个就可以了

var state3 = function(){

this.update = function(){ };

}

//当然state里也可以存在其他属性或方法

var state4 = function(){

this.create = function(){ };

this.aaa = function(){ }; //其他方法

this.bbb = 'hello'; //其他属性

}

复制代码

其中的preload方法，是用来加载资源的，它会最先执行。create方法是用来初始化以及构建场景的，它要等到在preload里加载的资源全部加载完成后才执行。最后update方法是更新函数，它会在游戏的每一帧都执行，以此来创造一个动态的游戏。

在这个游戏中，我们会用到4个state，我们可以通过game.state.add(2881064151)方法来给游戏添加state，然后用game.state.start()方法来调用state,详细信息请看state的文档

复制代码

var game = new Phaser.Game(288,505,Phaser.AUTO,'game');

game.States = {}; //创建一个对象来存放要用到的state

game.State.boot = function(){ ... } //boot场景，用来做一些游戏启动前的准备

game.State.prelaod = function(){ ... } //prelaod场景，用来显示资源加载进度

game.State.menu = function(){ ... } //menu场景，游戏菜单

game.State.play = function(){ ... } //play场景，正式的游戏部分

//把定义好的场景添加到游戏中

game.state.add('boot',game.States.boot);

game.state.add('preload',game.States.preload);

game.state.add('menu',game.States.menu);

game.state.add('play',game.States.play);

//调用boot场景来启动游戏

game.state.start('boot');

复制代码

prelaod场景，用来显示资源加载进度的更多相关文章

  1. 网站顶部显示预加载进度条preload.js

    网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery. ...

  2. js 百分比显示页面加载进度

    做东西遇到显示页面百分比的加载进度,不过里面的图片较多,看了别人的代码,才想到可以通过图片的加载显示加载的百分比,做一下笔记: html: <span id="percent" ...

  3. web前端js实现资源加载进度条

    进度条核心方法,通常j不考虑判断到100,根据项目中的图片数量可能有所差异所以到95就可以了 //根据图片load进度条 function loadingAsImgLength(){ var prec ...

  4. Cocos Creator 资源加载流程剖析【六】——场景切换流程

    这里讨论场景切换的完整流程,从我们调用了loadScene开始切换场景,到场景切换完成背后发生的事情.整个流程可以分为场景加载和场景切换两部分,另外还简单讨论了场景的预加载. 加载场景的流程 load ...

  5. cocos2d-x Loading界面实现资源加载

    有时候场景中的资源加载过多的话就会引起游戏进入的时候很卡,因为那是边加载边显示.在tests例子里面有一个很好的例子叫做TextureCacheTest,里面讲解了如何写loading. #inclu ...

  6. Away3D引擎学习笔记（一）资源加载解析块

    前文:Away3D断断续续用了一段时间了,三维相关的很多算法,计算转换还是有点绕,整理些自己觉得还有点意思东西,希望大家有用. 三维开始,Away3D构架你场景那几行代码各处都有,这里就不copy了, ...

  7. High Performance Networking in Google Chrome 进程间通讯(IPC) 多进程资源加载

    小结: 1. 小文件存储于一个文件中: 在内部,磁盘缓存(disk cache)实现了它自己的一组数据结构, 它们被存储在一个单独的缓存目录里.其中有索引文件(在浏览器启动时加载到内存中),数据文件( ...

  8. 详谈 Unity3D AssetBundle 资源加载,结合实际项目开发实例

    第一次搞资源更新方面,这里只说更新,加载,AssetBundle资源加载,谈谈自己的理解,以及自己在项目中遇到的那些神坑,现在回想一下,真的是自己跪着过来的,说多了,都是泪. 我这边是安卓AssetB ...

  9. Cocos Creator 资源加载流程剖析【一】——cc.loader与加载管线

    这系列文章会对Cocos Creator的资源加载和管理进行深入的剖析.主要包含以下内容: cc.loader与加载管线 Download部分 Load部分 额外流程(MD5 Pipe) 从编辑器到运 ...

随机推荐

  1. 转载一篇ios7的新API文章

    不看不知道,一看吓一跳啊!请看看吧,http://leafduo.com/articles/2013/09/28/ios7/

  2. poj 2739 Sum of Consecutive Prime Numbers 解题报告

    题目链接:http://poj.org/problem?id=2739 预处理出所有10001以内的素数,按照递增顺序存入数组prime[1...total].然后依次处理每个测试数据.采用双重循环计 ...

  3. Linux用户名显示-bash-4.1$快速排查

    最近项目使用的的服务器有点多(100多台),很多开发同事经常问这个问题,现在整理如下: 几个可能导致的原因: 1 用户的家目录所属组被改为root,解决方法使用root执行cd /home/;chow ...

  4. RGB888->RGB565->RGB888

     转自CB的博客:http://blog.chinaaet.com/detail/28298 在我们的计算机中,图像是以RGB888显示的,24位图每个像素保存了32bit的数据,即RGB888+Al ...

  5. Linux snmp监控

    http://blog.csdn.net/apple_llb/article/details/50494787 http://www.ttlsa.com/monitor/snmp-oid/

  6. 6.原型模式(Prototype Pattern)

    using System; namespace ConsoleApplication5 { class Program { static void Main(string[] args) { // 孙 ...

  7. [转]ThreadPoolExecutor线程池的分析和使用

    1. 引言 合理利用线程池能够带来三个好处. 第一:降低资源消耗.通过重复利用已创建的线程降低线程创建和销毁造成的消耗. 第二:提高响应速度.当任务到达时,任务可以不需要等到线程创建就能立即执行. 第 ...

  8. Linux下如何设置和查看环境变量

    Linux的变量种类 按变量的生存周期来划分,Linux变量可分为两类: 1 永久的:需要修改配置文件,变量永久生效. 2 临时的:使用export命令声明即可,变量在关闭shell时失效. 按作用范 ...

  9. 在Android软按键中添加Menu键

    在Android中,有时候没有硬件Menu.于是需要软件Menu.但是默认Google想让你用ActionBar上的Menu. 但是,有时候我们确实需要在在底部的软按键上加Menu.这里提供一种方法, ...

  10. 移除IIS默认的响应头

    在IIS+ASP.NET的运行环境,默认情况下会输出以下的响应头(Response Headers): 那如何移除这些响应头呢?下面我们来一个一个移除. 1. 移除Server 借助IIS URL R ...