company logo
advertisement for deep fried Twinkies


PhaserJS 最终确定下来使用它

这是一个游戏制作的JS引擎，但正因为它是一个游戏引擎，所以能更好的为我所要完成的内容目标服务。学习好它的使用，完成自己的目标，努力吧！

官网：http://phaser.io/
资源：https://github.com/photonstorm/phaser/tree/v2.4.8
手册：http://www.swjxzy.com/phaserZF/docs/index.html

第一部分：JS的引入和游戏的创建

1、最初的游戏创建的理解
<head>
<meta charset="UTF-8">
<title>创建游戏</title>
<script src="js/phaser.js"></script>
</head>
<body>
<div id="container"></div>
<script>
 
var game = new Phaser.Game(300, 400, Phaser.AUTO, 'container');
这是一个新建的场景 state，每个场景都有相应的固定的方法
function state(){
this.init = function(){};
this.preload = function(){这里进行资源加载};
this.create = function(){};
this.update = function(){};
this.render = function(){};
}
 
game.state.add('state', state); //添加场景
game.state.start('state'); //启动场景
 
 
</script>
</body>
2、涉及游戏加载的游戏创建 更进一步
boot.js为第一个场景，加载资源加载进度图片，当加载完成后启动第二个场景loader,在这里进行游戏资源的加载


上面的截图中没有截启动第一个场景的代码

下面的是BOOT.JS的代码


下面为LOADER.JS的代码

3、Phaser.js 中的舞台、世界和摄像机

世界很大，如大地图，舞台就是显示给你看的那个窗口了，摄像机其实就是一个显示视角，大小为舞台大小，和它是重合的。
关于摄像机

 

<body>
<div id="container"></div>
<script>
var game = new Phaser.Game(300, 400, Phaser.AUTO, 'container', state);
 
function state(game){
 
var jiqimao;
this.preload = function(){
game.load.image('bg', 'assets/bg.jpg'); //加载背景图
game.load.image('jiqimao', 'assets/jiqimao.png'); //加载机器猫图片
}
 
this.create = function(){
game.world.setBounds(0, 0, 2000, 600);//设置世界大小
game.add.image(0, 0, 'bg'); //添加一张图片作为背景图
jiqimao = game.add.image(200, 300, 'jiqimao');//创建一个机器猫
jiqimao.anchor.set(0.5, 0.5);
 
game.input.onDown.add(function(){//鼠标点下后，一个事件了
game.camera.focusOn(jiqimao);
});
 
game.camera.follow(jiqimao); //让摄像机跟随机器猫
 
}
 
this.update = function(){
var keys = game.input.keyboard.createCursorKeys();
if(keys.right.isDown) game.camera.x += 1;
else if(keys.left.isDown) game.camera.x -= 1;
else if(keys.down.isDown) game.camera.y += 1;
else if(keys.up.isDown) game.camera.y -= 1;
 
jiqimao.x += 1; //让机器猫每一帧向右移动一个像素
}
}
 
 
</script>
</body>
4、游戏的缩放
使用：其中有居中的方法
第三种，自定义的方法