HTML入门小站,Phaser
入門(mén)教程，我可不會(huì)講什么概念，我只會(huì)講一個(gè)入門(mén)例子，通過(guò)這個(gè)例子，你就知道phaser有多么強(qiáng)大，而照著這個(gè)例子做，你就能知道怎么使用phaser了。
需要說(shuō)明的是，這個(gè)就是phaser官方的一個(gè)入門(mén)的案例！
做這個(gè)游戲需要多長(zhǎng)時(shí)間，我可以告訴你，用phaser，只需要十分鐘，下面就來(lái)一步一步進(jìn)行游戲的實(shí)現(xiàn)。
首先第一步，搭建環(huán)境：html>
exam1var?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');
}
我不知道你有沒(méi)有用過(guò)unity3d或者cocos2d，那時(shí)候要搭建一個(gè)環(huán)境是多么地復(fù)雜，而phaser，是需要引入一個(gè)js文件，是的，就這樣環(huán)境就搭建好了。
就是上面這個(gè)html頁(yè)面，在瀏覽器中打開(kāi)，你會(huì)看到控制臺(tái)的輸出，preload用來(lái)加載一些資源，create用來(lái)進(jìn)行一些對(duì)象的創(chuàng)建及初始化，update就是游戲的主循環(huán)。
接下來(lái)，我們來(lái)點(diǎn)東西：html>
exam2var?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');
}
這時(shí)候，你可以看到左上角上有一顆星星，我們?cè)趐reload中，將phaser需要使用到的資源加載進(jìn)來(lái)，這里包括一些圖片可一些序列幀。然后，我們通過(guò)game.add.sprite(0, 0, 'star');就可以把一個(gè)精靈顯示在游戲區(qū)域的(0,0)點(diǎn)了。
但是一個(gè)星星似乎沒(méi)什么意思，接下來(lái)我們來(lái)繪制一下游戲場(chǎng)景，讓游戲看起來(lái)有點(diǎn)雛形：html>
exam3var?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');
}
這里，我們開(kāi)啟了物理引擎，當(dāng)然，這只是為了后面做準(zhǔn)備。然后，我們創(chuàng)建了天空，大地和兩個(gè)平板。大地和平板的位置定位，我們是通過(guò)坐標(biāo)來(lái)進(jìn)行的，大家可以仔細(xì)看一下圖片大小及坐標(biāo)位置的關(guān)系。其中，大地和兩個(gè)平板都被加到了platforms這個(gè)組中，這個(gè)組我們?yōu)樗鼏?dòng)了物理屬性，然后我們?cè)O(shè)置了大地和兩個(gè)平板是不能動(dòng)的，這樣他們就不會(huì)由于撞擊被改變位置。
這樣，我們的游戲場(chǎng)景就加進(jìn)來(lái)了，接下來(lái)，我們來(lái)加入一個(gè)小人，這個(gè)小人也是我們游戲的主角：html>
exam4var?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');
}
同樣是通過(guò)game.add.sprite將精靈加入進(jìn)來(lái)，但是大家仔細(xì)看看dude.png這張資源圖片，這是一個(gè)幀動(dòng)畫(huà)序列，里面包含了小人左移和右移的動(dòng)畫(huà)幀。我們同樣給它開(kāi)啟了物理屬性，然后設(shè)置了它的彈性和重力。player.body.collideWorldBounds = true;這句話(huà)設(shè)置了它會(huì)與邊界進(jìn)行碰撞，這就是為什么小人落下的時(shí)候，到游戲區(qū)域邊界就不會(huì)掉下去，大家可以把這句話(huà)注釋掉再運(yùn)行，看看會(huì)是什么情況。在這里，我們還為小人添加了兩個(gè)動(dòng)畫(huà)，一個(gè)是向左移動(dòng)，一個(gè)是向右移動(dòng)，分別指定了響應(yīng)的動(dòng)畫(huà)幀，這也是為后續(xù)的動(dòng)畫(huà)做準(zhǔn)備。
但是小人還沒(méi)有站在地上，接下來(lái)，我們來(lái)讓小人站在地上：html>
exam5var?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);就可以了，這句話(huà)表示，檢測(cè)小人與platforms組的碰撞，而大地正是在platforms組中，這樣，小人就不會(huì)穿過(guò)大地了。同樣地，當(dāng)小人與兩個(gè)平板碰撞時(shí)，也不會(huì)穿過(guò)了。
但是這小人還傻傻地不能動(dòng)，接下來(lái)，就讓小人動(dòng)起來(lái)：html>
exam6var?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;
}
}
我們希望讓小人在按下方向左鍵的時(shí)候，向左移動(dòng)，按下方向右鍵的時(shí)候，向右移動(dòng)，為了實(shí)現(xiàn)這一功能，我們又定義了一個(gè)cursors，我們通過(guò)cursors = game.input.keyboard.createCursorKeys();來(lái)獲取系統(tǒng)的鍵盤(pán)輸入對(duì)象。然后，我們?cè)趗pdate中，通過(guò)cursors.left.isDown來(lái)判斷用戶(hù)是否按下了鍵盤(pán)左鍵，如果按下了，我們給小人設(shè)置一個(gè)速度，然后播放左移的動(dòng)畫(huà)，方向右鍵的邏輯是一樣的。如果方向左鍵和右鍵都沒(méi)有按下，那么我們就通過(guò)player.frame來(lái)設(shè)置小人停在第4幀。小人的跳躍是通過(guò)方向上鍵來(lái)實(shí)現(xiàn)的，但是這里有一個(gè)條件，就是小人在空中的時(shí)候，不允許跳躍，所以，加上了一個(gè)player.body.touching.down的判斷條件。
一個(gè)小人在這個(gè)場(chǎng)景中動(dòng)，也沒(méi)啥意思，不如加點(diǎn)東西：html>
exam7var?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中，我們又創(chuàng)建了一個(gè)stars的組，在這個(gè)組中，添加了12個(gè)星星，然后設(shè)置了它們的重力，隨機(jī)設(shè)置了彈性，所以它們掉落的時(shí)候，碰到平板或者地面，會(huì)彈起不同的高度。同樣，星星也不能穿過(guò)地面，所以在update中，添加了碰撞檢測(cè)。
還有一層碰撞檢測(cè)就是小人和星星的碰撞，當(dāng)小人和星星發(fā)生碰撞的時(shí)候，需要讓星星消失，這時(shí)候，再添加碰撞檢測(cè)的時(shí)候，我們還添加了一個(gè)回調(diào)函數(shù)collectStar，在這里面，我們的player和star都會(huì)作為參數(shù)傳遞進(jìn)來(lái)，通過(guò)調(diào)用star.kill();將星星銷(xiāo)毀。
星星全部收集完畢了，接下來(lái)我們需要進(jìn)行得分的計(jì)算，不能光收集星星不得分對(duì)不對(duì)？html>
exam8var?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;
}
我們通過(guò)game.add.text為場(chǎng)景加上一個(gè)文本，顯示在左上角，在collectStar的時(shí)候，將分?jǐn)?shù)進(jìn)行累加，然后更新顯示，這樣就結(jié)束啦。
到這里，一個(gè)簡(jiǎn)單的小游戲就實(shí)現(xiàn)了，是不是比想象中的簡(jiǎn)單呢？
其實(shí)Phaser官方還為這個(gè)小游戲提供了一些其他的素材資源，但是在這里沒(méi)有用到，可能是希望我們自己進(jìn)行擴(kuò)展吧！
用phaser做游戲，就是這么簡(jiǎn)單，只要會(huì)一點(diǎn)點(diǎn)js，人人都能做游戲啦！
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的HTML入门小站,Phaser的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： iphone8plus屏幕尺寸_百思买在
- 下一篇： echarts 浏览器兼容性_谷歌浏览器