前面两篇就是告诉大家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