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. linux 多个文件中查找字符串

    2015年2月9日 14:36:38 # find <directory> -type f -name "*.c" | xargs grep "<str ...

  2. ****CSS各种居中方法

    水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...

  3. hive笔记（自学整理的）

    第一部分:用户管理 创建用户:CREATE DATABASE XXX 查看用户:SHOW DATABASES; 关键查看用户:show databases like 'de.*'   讲解:创建一个用 ...

  4. hdu 4165 dp

    可以用卡特兰数做 以下分析转自:http://www.cnblogs.com/kevinACMer/p/3724640.html?utm_source=tuicool 这道题之前自己做的时候并没有反应 ...

  5. 学会使用Chromium中的LOG

    转自:http://blog.csdn.net/kuerjinjin/article/details/43937345 简介 众所周知chromium项目无比巨大,想去快速的了解,调试并添加自己想要的 ...

  6. 修改Tomcat编码方式的两种方法

    转自:http://blog.sina.com.cn/s/blog_7c76d63901018lyt.html 方法一:推荐,不会影响到其它项目  见我的另一篇博客:http://www.cnblog ...

  7. 开发Android 范的错误

    1 在onCreate(Bundle savedInstanceState)方法中, 按钮单击事件的实现直接写在onCreate方法了里,这样就好导致这个按钮只能触发一次, 因为在Android体系中 ...

  8. 硬盘工具diskpart

    1.cmd 2.diskpart 3.list disk           (查看硬盘) 4.select disk n (选择硬盘,n是数字) 5.list partition   (查看分区) ...

  9. POJ 2752 Seek the Name, Seek the Fame kmp(后缀与前缀)

    题意: 给你一个串T,找出串T的子串,该串既是T的前缀也是T的后缀.从小到大输出所有符合要求的串的长度. 分析: 首先要知道KMP的next[i]数组求得的数值就是串T中的[1,i-1]的后缀与串T中 ...

  10. web应用配置

    tomcat 的 server.html 配置文件 加在</Host>之上 <Context path=”/itcast” docBase=”c:\news” /> path虚 ...