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

最新推荐文章于 2025-07-03 13:49:59 发布

101tx

最新推荐文章于 2025-07-03 13:49:59 发布

阅读量906

点赞数

CC 4.0 BY-SA版权

分类专栏： H5游戏开发

本文链接：https://blog.youkuaiyun.com/tx101q/article/details/84992411

H5游戏开发专栏收录该内容

5 篇文章

订阅专栏

本文介绍使用Phaser框架构建接金币游戏的过程，包括游戏资源加载、角色控制、金币生成及碰撞检测等核心功能实现。通过逐步构建游戏框架，读者可以了解Phaser游戏开发的基本流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

	}

}

运行后的笑果图如下