phaser游戏开发入门3（接金币1）

前面两篇就是告诉大家phaser构建游戏的基本方式，下面具体讲phaser搭建游戏实例，讲个什么好呢？算法不能太复杂了，你们不能看懂，就讲接金币游戏吧，天上不断掉下金币，主人公左右移动接住金币就得分，金币掉落个数超越10的时候游戏结束。

提示：各位看的弱弱，如果你看了觉得文章不错，可以留言，文章会继续写下去，如果没弱弱看的话，那我就看电视去喽！

准备工作：

素材   1金币图 2移动人物  3背景   4开始按钮   5重新开始按钮    6结束画面

编辑器 ：editplus 或是webstorm ,   IDEA ,eclipse   记事本也行 但是记住文本格式必须保存为UTF-8哦，没有为什么

依赖库： phaser.min.js

思想准备: 你能行！

开工：

 

图片放在根目录下的res中

 

有了图片了，我们该思考了，一个完整游戏需要那些东西？

                                开始

                                   |

计分器开始工作，金币开始产生，人物出现在屏幕下方

                                   |

                   操作键盘，移动人物

                                   |

人物移动，接触到金币，金币消失，加一分，没接住金币，失落的金币加一分。

                                   |

        失落的金币数大于等于10的话，游戏结束

                                   |

            游戏结束画面，重新开始按钮

                                  |

                        别看啦，没啦

脑中建立其这个模型后，可以开工了

加载图片素材

function preload(){

///加载玩家

game.load.image("player","./res/player.png");

//金币

game.load.image("coin","./res/coin.png");

//开始

game.load.image("ks","./res/ks.png");

//重新开始

game.load.image("restart","./res/restart.png");

//背景

game.load.image("bg","./res/bg.png")；

}

 

图片素材加载完成后，我们按照上面的流程开始构建游戏

1）创建全局变量

var score=0；//记录分数

var lost_score=0;//记录失去的金币

var start_kg=false;//游戏循环更新开关 反复加载金币

var jb_group=null;//储存金币的容器

var player=null;//玩家

var ks_bt=null;//开始按钮

var gds_bg=null;//背景

var h=game.world.height;//舞台高 

var w=game.world.width;//舞台宽

 

//注意点：为了节省内存开销，当变量使用完了之后记得的将变量赋值为null;尽量做到不反复创建变量。

2）构建开始界面吧

  开始界面由两部分组成  开始按钮+高大上的背景

当然按钮要放在背景上面

所以先要创建背景后创建按钮

 gds_bg=game.add.sprite(0,0,'bg');
 gds_bg.width=w;
 gds_bg.height=h;
 //创建开始按钮
 ks_bt=game.add.button(w/2,h/2,'ks',function(){
 
 //这里写一些点击按钮后的逻辑
 ks_bt.destroy();//点击后销毁按钮
 game_start();//游戏开始
 });

下面把构建游戏基本框架的代码贴一下

下节会继续优化接金币的游戏

//构建游戏  第一第二个参数是游戏屏幕的宽高，这里设置的是自适应屏幕宽高，第三个参数是渲染的方式，这里采用基础的canvas，可以无需服务器就能直接查看结果。如果换成WEBGL，渲染效率高，但是需要设备支持WEBGL，不布置到服务器上无法查看结果
//第四个参数是指定canvas附着的div  这里可以设置为null，第五个参数游戏开始时三个阶段。第一个阶段是预载静态资源。第二初始化游戏 第三游戏渲染更新。
var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'jjb', { preload:preload,create: create,update:update });
var w=null;
var h=null;
var score=0;//记录分数

var lost_score=0;//记录失去的金币

var start_kg=false;//游戏循环更新开关 反复加载金币

var jb_group=null;//储存金币的容器

var player=null;//玩家

var ks_bt=null;//开始按钮

var gds_bg=null;//背景

function preload(){

///加载玩家

game.load.image("player","./res/player.png");

//金币

game.load.image("jb","./res/coin.png");

//开始

game.load.image("ks","./res/ks.png");

//重新开始

game.load.image("restart","./res/restart.png");

//背景

game.load.image("bg","./res/bg.jpg");

}

function create() {

 //game.add.text(100,100,"点击开始",{font: "65px Arial", fill: "#ff0044", align: "center" });
 w=game.world.width;
 h=game.world.height;
 //先创建背景
 gds_bg=game.add.sprite(0,0,'bg');
 gds_bg.width=w;
 gds_bg.height=h;
 //创建开始按钮
 ks_bt=game.add.button(w/2,h/2,'ks',function(){
 
 //这里写一些点击按钮后的逻辑
 ks_bt.destroy();//点击后销毁按钮
 game_start();//游戏开始
 });

 ks_bt.width=0.25*w;
 ks_bt.height=0.25*w;
 ks_bt.anchor.set(0.5,0.5);//设置中心点在图片中心;


}

function game_start(){

	game.physics.startSystem(Phaser.Physics.ARCADE);

	//创建金币群
	jb_group=game.add.physicsGroup();
	//创建玩家
	player=game.add.sprite(w/2,h*0.9,'player');
	player.width=w*0.2;
	player.height=w*0.2;
	player.anchor.set(0.5,0.5);
	game.physics.arcade.enable(player);

	
	//游戏循环开关打开
	start_kg=true;

   //鼠标 指针移动时调用
	game.input.addMoveCallback(function(e){
		//鼠标或指针移动时调用
	if(start_kg){
		player.x=e.x
	}
		
	});
	

}
//创建金币
function create_jb(){
	if(jb_group){
		if(jb_group.children.length<5){
		//var k=jb_group.create(Math.random()*w,-(Math.random()*300),'jb');
var k=jb_group.create(game.rnd.between(0, w), game.rnd.between(-300, 0),"jb");

		k.width=w*0.1;
		k.height=w*0.1;
		k.anchor.set(0.5,0.5);

		}
	}

}


//移动金币
function move_jb(){

 

	 for(var i=0;i<jb_group.children.length;i++){
          jb_group.children[i].y+=5;//金币移动
           if(jb_group.children[i].y>h){
			    jb_group.children[i].x=(Math.random()*w)
				jb_group.children[i].y=-(Math.random()*300)
		   }

        //金币复活
				if(!jb_group.children[i].alive){
				 jb_group.children[i].x=(Math.random()*w);
				 jb_group.children[i].y=-(Math.random()*300);
				    jb_group.children[i].revive();
				}


				

	 }

	

}

//碰撞检测

function  hitTest (){


if (game.physics.arcade.collide(player, jb_group, collisionHandler, processHandler, this))
    {
     //可添加 碰撞后需要回调的东西
	
    }

}




function processHandler (pla, jb) {

    return true;

}

function collisionHandler (pla, jb) {
      
      
	  jb.kill();//金币消失
		
  
    
}

function update(){
	if(start_kg){
	create_jb();
	move_jb();
	hitTest();

	}

}

 

运行后的笑果图如下

 

本节游戏源码地址https://download.csdn.net/download/tx101q/10849152