入門教程，我可不會講什么概念，我只會講一個入門例子，通過這個例子，你就知道phaser有多么強大，而照著這個例子做，你就能知道怎么使用phaser了。

需要說明的是，這個就是phaser官方的一個入門的案例！

做這個游戲需要多長時間，我可以告訴你，用phaser，只需要十分鐘，下面就來一步一步進行游戲的實現。

首先第一步，搭建環境：html>

exam1

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');

}

我不知道你有沒有用過unity3d或者cocos2d，那時候要搭建一個環境是多么地復雜，而phaser，是需要引入一個js文件，是的，就這樣環境就搭建好了。

就是上面這個html頁面，在瀏覽器中打開，你會看到控制臺的輸出，preload用來加載一些資源，create用來進行一些對象的創建及初始化，update就是游戲的主循環。

接下來，我們來點東西：html>

exam2

var?game?=?new?Phaser.Game(800,?600,?Phaser.AUTO,?'',?{?preload:?preload,?create:?create,?update:?update?});

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()?{

game.add.sprite(0,?0,?'star');

}

function?update()?{

console.log('update');

}

這時候，你可以看到左上角上有一顆星星，我們在preload中，將phaser需要使用到的資源加載進來，這里包括一些圖片可一些序列幀。然后，我們通過game.add.sprite(0, 0, 'star');就可以把一個精靈顯示在游戲區域的(0,0)點了。

但是一個星星似乎沒什么意思，接下來我們來繪制一下游戲場景，讓游戲看起來有點雛形：html>

exam3

var?game?=?new?Phaser.Game(800,?600,?Phaser.AUTO,?'',?{?preload:?preload,?create:?create,?update:?update?});

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);

}

var?platforms;

function?create()?{

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()?{

console.log('update');

}

這里，我們開啟了物理引擎，當然，這只是為了后面做準備。然后，我們創建了天空，大地和兩個平板。大地和平板的位置定位，我們是通過坐標來進行的，大家可以仔細看一下圖片大小及坐標位置的關系。其中，大地和兩個平板都被加到了platforms這個組中，這個組我們為它啟動了物理屬性，然后我們設置了大地和兩個平板是不能動的，這樣他們就不會由于撞擊被改變位置。

這樣，我們的游戲場景就加進來了，接下來，我們來加入一個小人，這個小人也是我們游戲的主角：html>

exam4

var?game?=?new?Phaser.Game(800,?600,?Phaser.AUTO,?'',?{?preload:?preload,?create:?create,?update:?update?});

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);

}

var?platforms;

var?player;

function?create()?{

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()?{

console.log('update');

}

同樣是通過game.add.sprite將精靈加入進來，但是大家仔細看看dude.png這張資源圖片，這是一個幀動畫序列，里面包含了小人左移和右移的動畫幀。我們同樣給它開啟了物理屬性，然后設置了它的彈性和重力。player.body.collideWorldBounds = true;這句話設置了它會與邊界進行碰撞，這就是為什么小人落下的時候，到游戲區域邊界就不會掉下去，大家可以把這句話注釋掉再運行，看看會是什么情況。在這里，我們還為小人添加了兩個動畫，一個是向左移動，一個是向右移動，分別指定了響應的動畫幀，這也是為后續的動畫做準備。

但是小人還沒有站在地上，接下來，我們來讓小人站在地上：html>

exam5

var?game?=?new?Phaser.Game(800,?600,?Phaser.AUTO,?'',?{?preload:?preload,?create:?create,?update:?update?});

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);

}

var?platforms;

var?player;

function?create()?{

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()?{

game.physics.arcade.collide(player,?platforms);

}

是不是很驚訝？要讓小人站在地上，只要在update中加上一句，game.physics.arcade.collide(player, platforms);就可以了，這句話表示，檢測小人與platforms組的碰撞，而大地正是在platforms組中，這樣，小人就不會穿過大地了。同樣地，當小人與兩個平板碰撞時，也不會穿過了。

但是這小人還傻傻地不能動，接下來，就讓小人動起來：html>

exam6

var?game?=?new?Phaser.Game(800,?600,?Phaser.AUTO,?'',?{?preload:?preload,?create:?create,?update:?update?});

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);

}

var?platforms;

var?player;

var?cursors;

function?create()?{

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);

cursors?=?game.input.keyboard.createCursorKeys();

}

function?update()?{

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;

}

}

我們希望讓小人在按下方向左鍵的時候，向左移動，按下方向右鍵的時候，向右移動，為了實現這一功能，我們又定義了一個cursors，我們通過cursors = game.input.keyboard.createCursorKeys();來獲取系統的鍵盤輸入對象。然后，我們在update中，通過cursors.left.isDown來判斷用戶是否按下了鍵盤左鍵，如果按下了，我們給小人設置一個速度，然后播放左移的動畫，方向右鍵的邏輯是一樣的。如果方向左鍵和右鍵都沒有按下，那么我們就通過player.frame來設置小人停在第4幀。小人的跳躍是通過方向上鍵來實現的，但是這里有一個條件，就是小人在空中的時候，不允許跳躍，所以，加上了一個player.body.touching.down的判斷條件。

一個小人在這個場景中動，也沒啥意思，不如加點東西：html>

exam7

var?game?=?new?Phaser.Game(800,?600,?Phaser.AUTO,?'',?{?preload:?preload,?create:?create,?update:?update?});

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);

}

var?platforms;

var?player;

var?cursors;

var?stars;

function?create()?{

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);

cursors?=?game.input.keyboard.createCursorKeys();

stars?=?game.add.group();

stars.enableBody?=?true;

for?(var?i?=?0;?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()?{

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,?star)?{

star.kill();

}

在create中，我們又創建了一個stars的組，在這個組中，添加了12個星星，然后設置了它們的重力，隨機設置了彈性，所以它們掉落的時候，碰到平板或者地面，會彈起不同的高度。同樣，星星也不能穿過地面，所以在update中，添加了碰撞檢測。

還有一層碰撞檢測就是小人和星星的碰撞，當小人和星星發生碰撞的時候，需要讓星星消失，這時候，再添加碰撞檢測的時候，我們還添加了一個回調函數collectStar，在這里面，我們的player和star都會作為參數傳遞進來，通過調用star.kill();將星星銷毀。

星星全部收集完畢了，接下來我們需要進行得分的計算，不能光收集星星不得分對不對？html>

exam8

var?game?=?new?Phaser.Game(800,?600,?Phaser.AUTO,?'',?{?preload:?preload,?create:?create,?update:?update?});

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);

}

var?platforms;

var?player;

var?cursors;

var?stars;

var?score?=?0;

var?scoreText;

function?create()?{

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);

cursors?=?game.input.keyboard.createCursorKeys();

stars?=?game.add.group();

stars.enableBody?=?true;

for?(var?i?=?0;?i?

{

var?star?=?stars.create(i?*?70,?0,?'star');

star.body.gravity.y?=?300;

star.body.bounce.y?=?0.7?+?Math.random()?*?0.2;

}

scoreText?=?game.add.text(16,?16,?'score:?0',?{?fontSize:?'32px',?fill:?'#000'?});

}

function?update()?{

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,?star)?{

star.kill();

score?+=?10;

scoreText.text?=?'Score:?'?+?score;

}

我們通過game.add.text為場景加上一個文本，顯示在左上角，在collectStar的時候，將分數進行累加，然后更新顯示，這樣就結束啦。

到這里，一個簡單的小游戲就實現了，是不是比想象中的簡單呢？

其實Phaser官方還為這個小游戲提供了一些其他的素材資源，但是在這里沒有用到，可能是希望我們自己進行擴展吧！

用phaser做游戲，就是這么簡單，只要會一點點js，人人都能做游戲啦！

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的HTML入门小站,Phaser的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。