前言
最近公司做項目的時候正好使用到phaser,在這里做一下自己整理出來的一些心得晋柱，方便大家參考砸讳，phaser這一個游戲引擎通常是做2d游戲的琢融，入門也非常簡單，只需你會一點的javascript,但是你想做一個比較完美的游戲的話簿寂，那么光靠一點點的javascript是遠遠不夠的漾抬，本篇博客將快速帶你入門phaser。
phaser簡介
phaser是一款快速常遂，免費及開源HTML5游戲框架纳令，它支持WebGL和Canvas兩種渲染模式，可以在任何web瀏覽器環(huán)境下運行，游戲可以通過第三方工具轉為iOS平绩、Android 支持的 Native APP坤按，允許使用 JavaScript 和 TypeScript 進行開發(fā)。
phaser核心
語法：new Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)
phaser中的一切都是從Game類開始馒过，所以我們暫時將Game類當作phaser的中心吧！當你new了一個Game之后酗钞，game中的很多屬性就有了腹忽，phaser的核心可以用如下這張圖表示。
image
這里我們經(jīng)常使用的對象有l(wèi)oad,time,world,input,camera砚作。
入門教程
創(chuàng)建phaser對象
(1):創(chuàng)建phaser對象方式一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>快速入門phaser</title>
</head>
<body>
<script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var game=new Phaser.Game(800,600,Phaser.AUTO,'',{preload:preload,create:create,update:update});
function preload(){
console.log('preload');
}
function create(){
console.log('create');
}
function update(){
console.log('update');
}
</script>
</body>
</html>
(2):創(chuàng)建phaser對象方式二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>快速入門phaser<</title>
</head>
<body>
<script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var game=new Phaser.Game(800,600,Phaser.AUTO);
var main=function(game){
this.init=function(){
//游戲場景初始化
}
this.preload=function(){
//游戲資源預加載
}
this.create=function(){
//游戲場景創(chuàng)建
}
this.update=function(){
//游戲邏輯實現(xiàn)
}
this.render=function(){
//游戲自定義渲染
}
}
</script>
</body>
</html>
(3):創(chuàng)建phaser對象方式三
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>快速入門phaser</title>
</head>
<body>
<script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var game=new Phaser.Game(800,600,Phaser.AUTO);
game.state.add('state',state);
game.state.start('state');
function state(){
this.init=function(){}
this.preload=function(){}
this.create=function(){}
this.update=function(){}
this.render=function(){}
}
</script>
</body>
</html>
(4):創(chuàng)建phaser對象方式四
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>快速入門phaser</title>
</head>
<body>
<script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var game=new Phaser.Game(800,600,Phaser.AUTO,state);
function state(){
this.init=function(){
}
this.preload=function(){
}
this.create=function(){
}
this.update=function(){
}
this.render=function(){
}
}
</script>
</body>
</html>
(5):創(chuàng)建phaser對象方式五
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>快速入門phasr</title>
</head>
<body>
<script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update
}
}
var game=new Phaser.Game(config);
function preload(){
}
function create(){
}
function update(){
}
</script>
</body>
</html>
在開發(fā)中窘奏，我們經(jīng)常使用方式五創(chuàng)建phaser對象，當然你也可以根據(jù)自己的喜好選擇葫录，就看你是喜歡函數(shù)創(chuàng)建還是對象創(chuàng)建着裹。
參數(shù)詳解
(1):width
畫布寬度，數(shù)字或字符串類型可選參數(shù)米同，默認為800骇扇，如果以字符串的形式給出，該值必須在0到100之間面粮，為百分比少孝，如果沒有指定父容器，則默認為瀏覽器窗口
(2):height
畫布高度
(3):renderer
指定渲染機制熬苍，值可以是Phaser.WebGL,Phaser.Canvas,Phaser.AUTO(自動嘗試使用WebGL,如果瀏覽器或設備不支持稍走，使用canvas)或者Phaser.HEADLESS(不進行渲染)
(4):parent
想插入游戲畫布的DOM元素，畫布的父元素柴底，可選值為DOM本身或者是id,如果為空字符串婿脸，畫布將被插入到body元素中
(5):state
默認的狀態(tài)對象，對象類型柄驻，可以是null,也可以是Phaser.state函數(shù)(初始化狐树，預加載，創(chuàng)建凿歼，更新褪迟，渲染)
(6):transparent
畫布背景是否透明，布爾值答憔，默認為false
(7):antialias
是否繪制為平滑紋理味赃，布爾值，默認為true
(8):physicsConfig
一個物理配置對象虐拓，在Physics world創(chuàng)建時傳遞心俗，對象默認為null
注：renderer可選Phaser.AUTO,Phaser.Canvas,Phaser.WebGL
參考文檔：https://photonstorm.github.io/phaser-ce/Phaser.Game.html
中文網(wǎng)：http://www.phaserengine.com/
phaser小站：https://www.phaser-china.com/example-detail-422.html
社區(qū)：http://club.phaser-china.com/
實例解析
接下來我們通過phaser實現(xiàn)一個小游戲以及快速入門，見識下phaser開發(fā)游戲的功能有多么的強大，需要說明的是城榛，這個就是phaser官方入門的案例揪利，廢話不多說，直接上源碼狠持。
(1):創(chuàng)建游戲和添加場景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>phaser入門小游戲</title>
</head>
<body>
<script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
function preload(){
//加載資源
}
function create(){
//對象的創(chuàng)建及初始化
}
function update(){
//游戲主循環(huán)
}
</script>
</body>
</html>
image
在這里疟位，我們已經(jīng)創(chuàng)建了游戲場景和加載了游戲場景，但是我們看到一片黑的喘垂，接下來我們加點東西甜刻。
(2):資源加載
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>phaser入門小游戲</title>
</head>
<body>
<script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
function preload(){
//加載資源
game.load.image('sky','../../assets/sky.png');
game.load.image('ground','../../assets/star.png');
game.load.image('star','../../assets/star.png');
game.load.spritesheet('dude','../../assets/dude.png',32,48);
}
function create(){
//對象的創(chuàng)建及初始化
game.add.sprite(0,0,'star');
}
function update(){
//游戲主循環(huán)
}
</script>
</body>
</html>
image
我們看到屏幕的左上角出現(xiàn)了一顆星星，但是還是缺點什么正勒，這種效果依然不是我們想要的效果得院，接下來我們讓它更具體化。
(3):加載場地
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>phaser入門小游戲</title>
</head>
<body>
<script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
var platforms;//場地
function preload(){
//加載資源
game.load.image('sky','../../assets/sky.png');
game.load.image('ground','../../assets/platform.png');
game.load.image('star','../../assets/star.png');
game.load.spritesheet('dude','../../assets/dude.png',32,48);
}
function create(){
//對象的創(chuàng)建及初始化
game.physics.startSystem(Phaser.Physics.ARCADE);
game.add.sprite(0,0,'sky'); //將圖片添加到游戲場景中
platforms=game.add.group();
platforms.enableBody=true;
var ground=platforms.create(0,game.world.height-64,'ground');
ground.scale.setTo(2,2);
ground.body.immovable=true;
var ledge=platforms.create(400,400,'ground');
ledge.body.immovable=true;
ledge=platforms.create(-150,250,'ground');
ledge.body.immovable=true;
}
function update(){
//游戲主循環(huán)
}
</script>
</body>
</html>
image
在這里我們已經(jīng)將場景加入進來了以及開啟了物理引擎章贞，當然這只是為后面做準備祥绞，然后我們創(chuàng)建了天空，大地和兩個平板鸭限。大地和平板的位置定位蜕径，我們是通過坐標來進行的，
其中里覆，大地和兩個平板都被加到了platforms這個組中丧荐，這個組我們?yōu)樗鼏恿宋锢韺傩裕缓笪覀冊O置了大地和兩個平板是不能動的喧枷，這樣他們就不會由于撞擊被改變位置虹统。接下來，我們來加入一個小人隧甚，這個小人也是我們游戲的主角车荔。
(4):加載主角
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>phaser入門小游戲</title>
</head>
<body>
<script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
var platforms;//場地
var player;//游戲主角
function preload(){
//加載資源
game.load.image('sky','../../assets/sky.png');
game.load.image('ground','../../assets/platform.png');
game.load.image('star','../../assets/star.png');
game.load.spritesheet('dude','../../assets/dude.png',32,48);
}
function create(){
//對象的創(chuàng)建及初始化
game.physics.startSystem(Phaser.Physics.ARCADE);
game.add.sprite(0,0,'sky'); //夾圖片添加到游戲場景中
platforms=game.add.group();
platforms.enableBody=true;
var ground=platforms.create(0,game.world.height-64,'ground');
ground.scale.setTo(2,2);
ground.body.immovable=true;
var ledge=platforms.create(400,400,'ground');
ledge.body.immovable=true;
ledge=platforms.create(-150,250,'ground');
ledge.body.immovable=true;
//加載主角
player=game.add.sprite(32,game.world.height-150,'dude');
game.physics.arcade.enable(player);
player.body.bounce.y=0.2; //設置主角的彈性
player.body.gravity.y=300; //設置主角的重力
player.body.collideWorldBounds=true;
player.animations.add('left',[0,1,2,3],10,true); //設置主角向左方向的序列幀
player.animations.add('right',[5,6,7,8],10,true); //設置主角向右方向的序列幀
}
function update(){
//游戲主循環(huán)
}
</script>
</body>
</html>
image
dude.png圖片
同樣是通過game.add.sprite將精靈加入進來，但是大家仔細看看dude.png這張資源圖片戚扳，這是一個幀動畫序列忧便，里面包含了主角左移和右移的動畫幀。我們同樣給它開啟了物理屬性帽借，然后設置了它的彈性和重力珠增。player.body.collideWorldBounds = true;這句話設置了它會與邊界進行碰撞，這就是為什么主角落下的時候砍艾，到游戲區(qū)域邊界就不會掉下去纬乍，大家可以把這句話注釋掉再運行黍檩，看看會是什么情況。在這里，我們還為小人添加了兩個動畫穴吹，一個是向左移動，一個是向右移動，分別指定了響應的動畫幀，這也是為后續(xù)的動畫做準備炭分。
(5):使主角站立平臺上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>phaser入門小游戲</title>
</head>
<body>
<script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
var platforms;//場地
var player;//游戲主角
function preload(){
//加載資源
game.load.image('sky','../../assets/sky.png');
game.load.image('ground','../../assets/platform.png');
game.load.image('star','../../assets/star.png');
game.load.spritesheet('dude','../../assets/dude.png',32,48);
}
function create(){
//對象的創(chuàng)建及初始化
game.physics.startSystem(Phaser.Physics.ARCADE);
game.add.sprite(0,0,'sky'); //夾圖片添加到游戲場景中
platforms=game.add.group();
platforms.enableBody=true;
var ground=platforms.create(0,game.world.height-64,'ground');
ground.scale.setTo(2,2);
ground.body.immovable=true;
var ledge=platforms.create(400,400,'ground');
ledge.body.immovable=true;
ledge=platforms.create(-150,250,'ground');
ledge.body.immovable=true;
//加載主角
player=game.add.sprite(32,game.world.height-150,'dude');
game.physics.arcade.enable(player);
player.body.bounce.y=0.2; //設置主角的彈性
player.body.gravity.y=300; //設置主角的重力
player.body.collideWorldBounds=true;
player.animations.add('left',[0,1,2,3],10,true); //設置主角向左方向的序列幀
player.animations.add('right',[5,6,7,8],10,true); //設置主角向右方向的序列幀
}
function update(){
//游戲主循環(huán)
game.physics.arcade.collide(player,platforms);
}
</script>
</body>
</html>
是不是很驚訝？要讓主角站在地上剑肯，只要在update中加上一句捧毛，game.physics.arcade.collide(player, platforms);就可以了，這句話表示让网，檢測主角與platforms組的碰撞岖妄，而大地正是在platforms組中，這樣寂祥，主角就不會穿過大地了。同樣地七兜，當主角與兩個平板碰撞時丸凭，也不會穿過了。接下來我們讓主角運動腕铸。
(6):主角運動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>phaser入門小游戲</title>
</head>
<body>
<script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
var platforms;//場地
var player;//游戲主角
var cursors;//控制鍵
function preload(){
//加載資源
game.load.image('sky','../../assets/sky.png');
game.load.image('ground','../../assets/platform.png');
game.load.image('star','../../assets/star.png');
game.load.spritesheet('dude','../../assets/dude.png',32,48);
}
function create(){
//對象的創(chuàng)建及初始化
game.physics.startSystem(Phaser.Physics.ARCADE);
game.add.sprite(0,0,'sky'); //夾圖片添加到游戲場景中
platforms=game.add.group();
platforms.enableBody=true;
var ground=platforms.create(0,game.world.height-64,'ground');
ground.scale.setTo(2,2);
ground.body.immovable=true;
var ledge=platforms.create(400,400,'ground');
ledge.body.immovable=true;
ledge=platforms.create(-150,250,'ground');
ledge.body.immovable=true;
//加載主角
player=game.add.sprite(32,game.world.height-150,'dude');
game.physics.arcade.enable(player);
player.body.bounce.y=0.2; //設置主角的彈性
player.body.gravity.y=300; //設置主角的重力
player.body.collideWorldBounds=true;
player.animations.add('left',[0,1,2,3],10,true); //設置主角向左方向的序列幀
player.animations.add('right',[5,6,7,8],10,true); //設置主角向右方向的序列幀
//創(chuàng)建控制鍵對象
cursors=game.input.keyboard.createCursorKeys();
}
function update(){
//游戲主循環(huán)
game.physics.arcade.collide(player,platforms);
//控制主角開始
player.body.velocity.x=0;
if(cursors.left.isDown){
player.body.velocity.x=-150;
player.animations.play('left');//播放主角向左運動的序列幀動畫
}else if(cursors.right.isDown){
player.body.velocity.x=150;
player.animations.play('right');//播放主角向右的序列幀動畫
}else{
player.animations.stop();//停止動畫
player.frame=4; //小球靜止時顯示第四幀動畫
}
if(cursors.up.isDown&&player.body.touching.down){
player.body.velocity.y=-350;
}
}
</script>
</body>
</html>
image
我們希望讓主角在按下方向左鍵的時候惜犀，向左移動，按下方向右鍵的時候狠裹，向右移動虽界，為了實現(xiàn)這一功能，我們又定義了一個cursors涛菠，我們通過cursors = game.input.keyboard.createCursorKeys();來獲取系統(tǒng)的鍵盤輸入對象莉御。然后，我們在update中礁叔，通過cursors.left.isDown來判斷用戶是否按下了鍵盤左鍵讥蔽，如果按下了碰缔，我們給主角設置一個速度腌且，然后播放左移的動畫精续，方向右鍵的邏輯是一樣的确垫。如果方向左鍵和右鍵都沒有按下披泪，那么我們就通過player.frame來設置小人停在第4幀。小人的跳躍是通過方向上鍵來實現(xiàn)的，但是這里有一個條件，就是小人在空中的時候煞额，不允許跳躍，所以，加上了一個player.body.touching.down的判斷條件荆秦。
(7):加載大量星星
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>phaser入門小游戲</title>
</head>
<body>
<script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
var platforms;//場地
var player;//游戲主角
var cursors;//控制鍵
var stars;//星星
function preload(){
//加載資源
game.load.image('sky','../../assets/sky.png');
game.load.image('ground','../../assets/platform.png');
game.load.image('star','../../assets/star.png');
game.load.spritesheet('dude','../../assets/dude.png',32,48);
}
function create(){
//對象的創(chuàng)建及初始化
game.physics.startSystem(Phaser.Physics.ARCADE);
game.add.sprite(0,0,'sky'); //夾圖片添加到游戲場景中
platforms=game.add.group();
platforms.enableBody=true;
var ground=platforms.create(0,game.world.height-64,'ground');
ground.scale.setTo(2,2);
ground.body.immovable=true;
var ledge=platforms.create(400,400,'ground');
ledge.body.immovable=true;
ledge=platforms.create(-150,250,'ground');
ledge.body.immovable=true;
//加載主角
player=game.add.sprite(32,game.world.height-150,'dude');
game.physics.arcade.enable(player);
player.body.bounce.y=0.2; //設置主角的彈性
player.body.gravity.y=300; //設置主角的重力
player.body.collideWorldBounds=true;
player.animations.add('left',[0,1,2,3],10,true); //設置主角向左方向的序列幀
player.animations.add('right',[5,6,7,8],10,true); //設置主角向右方向的序列幀
//創(chuàng)建控制鍵對象
cursors=game.input.keyboard.createCursorKeys();
//加載星星
stars=game.add.group(); //把星星先添加到組中
stars.enableBody = true;
for(var i=0;i<20;i++){
var star=stars.create(i*70,0,'star');
star.body.gravity.y=300; //設置星星的重力
star.body.bounce.y=0.7+Math.random()*0.2; //設置星星的彈性
}
}
function update(){
//游戲主循環(huán)
game.physics.arcade.collide(player,platforms);
//星星加載相關
game.physics.arcade.collide(stars,platforms);
game.physics.arcade.overlap(player,stars,collectStar,null,this);
//控制主角開始
player.body.velocity.x=0;
if(cursors.left.isDown){
player.body.velocity.x=-150;
player.animations.play('left');//播放主角向左運動的序列幀動畫
}else if(cursors.right.isDown){
player.body.velocity.x=150;
player.animations.play('right');//播放主角向右的序列幀動畫
}else{
player.animations.stop();//停止動畫
player.frame=4; //小球靜止時顯示第四幀動畫
}
if(cursors.up.isDown&&player.body.touching.down){
player.body.velocity.y=-350;
}
}
function collectStar(player,stars){
stars.kill();//銷毀星星
}
</script>
</body>
</html>
image
image
在create中篱竭，我們又創(chuàng)建了一個stars的組，在這個組中步绸，添加了星星掺逼，然后設置了它們的重力，隨機設置了彈性瓤介，所以它們掉落的時候坪圾，碰到平板或者地面，會彈起不同的高度惑朦。同樣，星星也不能穿過地面漓概，所以在update中漾月，添加了碰撞檢測。
還有一層碰撞檢測就是小人和星星的碰撞胃珍，當主角和星星發(fā)生碰撞的時候梁肿，需要讓星星消失，這時候觅彰，再添加碰撞檢測的時候吩蔑，我們還添加了一個回調(diào)函數(shù)collectStar，在這里面填抬，我們的player和star都會作為參數(shù)傳遞進來烛芬，通過調(diào)用star.kill();將星星銷毀。
(8):顯示分數(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>phaser入門小游戲</title>
</head>
<body>
<script src="../../js/phaser.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config={
width:800,
height:600,
renderer:Phaser.AUTO,
antialias:true,
multiTexture:true,
state:{
preload:preload,
create:create,
update:update,
}
}
var game=new Phaser.Game(config);
var platforms;//場地
var player;//游戲主角
var cursors;//控制鍵
var stars;//星星
var score=0;//初始分數(shù)為0
var scoreText;//展示分數(shù)的文本
function preload(){
//加載資源
game.load.image('sky','../../assets/sky.png');
game.load.image('ground','../../assets/platform.png');
game.load.image('star','../../assets/star.png');
game.load.spritesheet('dude','../../assets/dude.png',32,48);
}
function create(){
//對象的創(chuàng)建及初始化
game.physics.startSystem(Phaser.Physics.ARCADE);
game.add.sprite(0,0,'sky'); //夾圖片添加到游戲場景中
platforms=game.add.group();
platforms.enableBody=true;
var ground=platforms.create(0,game.world.height-64,'ground');
ground.scale.setTo(2,2);
ground.body.immovable=true;
var ledge=platforms.create(400,400,'ground');
ledge.body.immovable=true;
ledge=platforms.create(-150,250,'ground');
ledge.body.immovable=true;
//加載主角
player=game.add.sprite(32,game.world.height-150,'dude');
game.physics.arcade.enable(player);
player.body.bounce.y=0.2; //設置主角的彈性
player.body.gravity.y=300; //設置主角的重力
player.body.collideWorldBounds=true;
player.animations.add('left',[0,1,2,3],10,true); //設置主角向左方向的序列幀
player.animations.add('right',[5,6,7,8],10,true); //設置主角向右方向的序列幀
//創(chuàng)建控制鍵對象
cursors=game.input.keyboard.createCursorKeys();
//加載星星
stars=game.add.group(); //把星星先添加到組中
stars.enableBody = true;
for(var i=0;i<20;i++){
var star=stars.create(i*70,0,'star');
star.body.gravity.y=300; //設置星星的重力
star.body.bounce.y=0.7+Math.random()*0.2; //設置星星的彈性
}
//分數(shù)相關
scoreText=game.add.text(16,16,'分數(shù):0',{fontSize:'32px',fill:'#000'});
}
function update(){
//游戲主循環(huán)
game.physics.arcade.collide(player,platforms);
//星星加載相關
game.physics.arcade.collide(stars,platforms);
game.physics.arcade.overlap(player,stars,collectStar,null,this);
//控制主角開始
player.body.velocity.x=0;
if(cursors.left.isDown){
player.body.velocity.x=-150;
player.animations.play('left');//播放主角向左運動的序列幀動畫
}else if(cursors.right.isDown){
player.body.velocity.x=150;
player.animations.play('right');//播放主角向右的序列幀動畫
}else{
player.animations.stop();//停止動畫
player.frame=4; //小球靜止時顯示第四幀動畫
}
if(cursors.up.isDown&&player.body.touching.down){
player.body.velocity.y=-350;
}
}
function collectStar(player,stars){
stars.kill();//銷毀星星
score+=10;
scoreText.text='分數(shù)：'+score;
}
</script>
</body>
</html>
image
我們通過game.add.text為場景加上一個文本飒责，顯示在左上角赘娄，在collectStar的時候，將分數(shù)進行累加宏蛉，然后更新顯示遣臼，這樣就結束啦。到這里拾并，一個簡單的小游戲就實現(xiàn)了揍堰，是不是比想象中的簡單呢鹏浅？
資源下載：https://coding.net/u/kk_1/p/phaser_group/git
