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. Objective-C 和 C++中指针的格式和.方法 和内存分配

    最近在看cocos2d-x,于是打算复习一下C++,在这里简单对比下,留个念想. 先看看oc中指针的用法 @interface ViewController : UIViewController { ...

  2. Netbeans快捷键

    一.常用快捷键:1.在文件中查找指定内容 Ctrl+F2.在文件中替换指定内容 Ctrl+H3.在整个项目中查找指定内容 Ctrl+Shift+f4.自动复制整行代码 Ctrl+Shift+上/下方向 ...

  3. [MAC] mac系统如何显示和隐藏文件

    转载地址: http://www.cnblogs.com/lm3515/archive/2010/12/08/1900271.html 显示Mac隐藏文件的命令:defaults write com. ...

  4. cf50A(水题)

    题意:m*n的地板最多能铺多少2*1的地板砖,不能重复... 水题.. 上代码... #include <iostream> #include <stdio.h> using ...

  5. Eclipse快捷键及各种设置（转载）

    1.提示键配置一般默认情况下,Eclipse ,MyEclipse 的代码提示功能是比Microsoft Visual Studio的差很多的,主要是Eclipse ,MyEclipse本身有很多选项 ...

  6. phpcms分页使用

    #pages { padding: 14px 10px; font-family: 宋体; } .text-c { text-align: center; } #pages span { displa ...

  7. 如何在多模型的情况下进行EF6的结构迁移

    所谓多模型就是在一个数据库中包含两个不同模型,或者换句话说就是两个不同DbContext的数据都放到同一个数据库中.这里的多模型不是指多租户的数据库(有谁知道EF很好处理多租户数据库的方案,可以联系我 ...

  8. 实现Activity刷新(转)

    目前刷新Acitivity,只想到几种方法.仅供参考,如果您有更好的方法,请赐教. 程序界面: 点击refresh view可以刷新界面,点击write content可以在EditText中自动写入 ...

  9. Linux下配置java的环境变量，So Easy!!

    首先,在cd /usr ,mkdir java. 将java安装包放到/usr/java,并解压. 验证java. $ java -version 如果提示有如下安装包包含它,但是没有安装.是环境变量 ...

  10. 空函数有参函数调用参数的注意事项Swift 1.1语言

    空函数有参函数调用参数的注意事项Swift 1.1语言 7.2.3  空函数 空函数有参函数调用参数的注意事项Swift 1.1语言空函数是函数中最简单的形式.在空函数中,函数只有一个空壳,里面是没有 ...