本文介紹phaser.js的入門，人人都可做小遊戲
阿新 • • 發佈：2019-01-05
使用phaser製作簡易遊戲
phaser.js是一個製作遊戲的外掛，功能非常強大，裡面集成了非常多的方法，我們只需學習如何使用就基本可以滿足日常使用了。
遊戲相關的一些概念
畫布
一般來說，做遊戲的話基於Canvas會比基於DOM效能要好很多，尤其是涉及大量動畫的情況下。Phaser會將一切渲染在canvas元素上，於是，毫不誇張地說，你的body標籤裡可能只包含一個canvas元素。
由於本節開發的目標是一個移動端的小遊戲，因此畫布一般來說都是充滿全屏的。
場景
一個完整的遊戲都是有分場景的，不是指“迷宮”、“沙漠”這些遊戲場景，而是“載入”、“開始”、“遊戲”、“結束”等場景。一般來說我們實際做專案的時候也大概是如下四種場景：
載入——展示進度條和loading動畫，主要操作為載入遊戲資源，如圖片、音訊等。
開始——展示開始按鈕、活動規則等，主要是讓玩家能有主動開始的操作（很關鍵，後面會說到）。
遊戲——整個遊戲的主要邏輯都在這個場景中，最核心的部分。
結束——展示遊戲最終得分、排名等。
這樣的場景的劃分也算是描述出了整個遊戲的生命週期，我認為上述四個場景是最基本的，缺了哪個場景遊戲都不算完整，或者是體驗不夠完善。
html程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title main.js程式碼
// 實際應用場景改為window.innerWidth和window.innerHeight。
// 這裡是為了方便檢視示例。
var width = window.innerWidth;
var height = window.innerHeight;
var apple;//定義變數
var person;
var time=0;
var score=0;
var scoreText;
var isCanPlay=false;
var gameTime=60;
var button;
var beginbutton;
// 建立遊戲例項
var game = new Phaser.Game(width, height, Phaser.CANVAS, '#game',{init: init,preload: preload, create: create, update: update, render: render});
//config裡面是一些邏輯配置函式，方便呼叫
var config={
dropApple:function(){
var color=['green','red','yellow','green','bomb','yellow','bomb'];
var index=Math.floor(Math.random()*color.length);
var rom = Math.floor(Math.random()*600+20);
var speed = Math.floor(Math.random()*1500) + 3000;
var fullapple=apple.create(rom,-100,color[index]);
fullapple.num = index; //給物品新增編號
var tween=game.add.tween(fullapple).to({y:game.world.height},speed,Phaser.Easing.Linear.None,true,0,0,false)
tween.onComplete.add(function() {
fullapple.kill();
});
},
grade:function(fullapple,getgrade){
var gradeText=game.add.sprite(fullapple.x+50,fullapple.y-50,getgrade);
var tween = game.add.tween(gradeText).to( { y: fullapple.y-200, alpha:0 }, 800, Phaser.Easing.Linear.None, true, 0, 0, false);
tween.onComplete.add(function() {
gradeText.kill();
});
},
touchApple:function(person,fullapple){
var self=this;
if (fullapple.num==0||fullapple.num==3) {
fullapple.kill();
config.grade(fullapple,'three');
score+=3;
}
if (fullapple.num==1) {
fullapple.kill();
config.grade(fullapple,'five');
score+=5;
}
if (fullapple.num==2||fullapple.num==5) {
fullapple.kill();
config.grade(fullapple,'one');
score+=1;
}
if (fullapple.num==4||fullapple.num==6) {
config.gameOvre(score);
//game.paused=true;
}
scoreText.text= '分數：' + score;
},
gameOvre:function(endscore){
apple.removeAll();
$(".over1").show();
$('.gameScore').html(endscore);
isCanPlay = false;
score = 0;
time = 0;
},
managePause: function() {
game.paused = true;
var pausedText = game.add.text(game.world.centerX, game.world.height * 0.45, "點選任意位置開始", {
fontSize:'40px',
fontWeight:'bold',
fill:'#000'
});
pausedText.anchor.setTo(0.5,0.5);
game.input.onDown.add(function(){
pausedText.destroy();
game.paused = false;
})
}
};
//遊戲初始化，
function init() {
game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;
game.scale.pageAlignVertically = true;
game.scale.pageAlignHorizontally = true;
}
function preload(){
// 載入遊戲資源
game.load.crossOrigin = 'anonymous'; // 設定跨域
game.load.image('bg', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bg.png');
game.load.image('dude', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/dude.png');
game.load.image('green', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/green.png');
game.load.image('red', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/red.png');
game.load.image('yellow', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/yellow.png');
game.load.image('bomb', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bomb.png');
game.load.image('five', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/five.png');
game.load.image('three', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/three.png');
game.load.image('one', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/one.png');
game.load.spritesheet('button', '../phaser/assets/images/pause.png', 157, 140);//後面引數表示圖片分割的大小
//game.state.start('created');
/*// 新增進度文字
var progressText = game.add.text(game.world.centerX, game.world.centerY, '0%', {
fontSize: '60px',
fill: '#ffffff'
});
progressText.anchor.setTo(0.5, 0.5);
// 監聽載入完一個檔案的事件
game.load.onFileComplete.add(function(progress) {
progressText.text = progress + '%';
});
var remind=game.add.text(100,100,'')*/
}
//建立遊戲內各種東西的
function create(){
// 新增背景
var bg = game.add.image(0, 0, 'bg');//前兩個引數為背景位置，第三個引數為圖片名稱
bg.width = game.world.width;//設定背景大小，game.world.width表示遊戲介面的寬度（初始化時候的大小）
bg.height = game.world.height;
// 新增標題，前兩個引數為字型位置，第三個引數為字型內容，第四個為字型樣式（canvas裡面的）
var title = game.add.text(game.world.centerX, game.world.height * 0.15, '小恐龍接蘋果', {
fontSize: '40px',
fontWeight: 'bold',
fill: '#f2bb15'
});
title.anchor.setTo(0.5, 0.5);//設定標題的中心，物體的平移、旋轉都是以中心點為參照的
//開始遊戲提示
var remind=game.add.text(game.world.centerX, game.world.height * 0.25,'點選任意位置開始',{
fontSize:'40px',
fontWeight:'bold',
fill:'#000'
});
remind.anchor.setTo(0.5,0);//anchor表示按鈕的中心點，物體的平移、旋轉都是以中心點為參照的
/*建立蘋果組*/
apple=game.add.group();
apple.enableBody = true;//屬性為true，物品組裡面每個建立的精靈都講建立一個物理主體
apple.physicsBodyType = Phaser.Physics.ARCADE;//制定物理主體型別
/*建立分數*/
scoreText = game.add.text(38, 28, '分數：0')
scoreText.fill = '#000';
scoreText.font = '微軟雅黑';
scoreText.fontSize = 36;
/*建立倒計時*/
timeText= game.add.text(400,28,'倒計時：60',{
fontSize:'40px',
fontWeight:'bold',
fill:'#000'
});
/*建立人物*/
person = game.add.sprite(game.world.centerX,game.world.height*0.75, 'dude');
person.anchor.setTo(0.5, 0);
game.physics.enable(person, Phaser.Physics.ARCADE);//設定人物加入物理引擎
person.inputEnabled = true; //為true表示人物能處理事件，例如拖動，點選，觸控
//人物拖動範圍Rectangle引數為（x，y，width，height）左上角座標和寬高
var rect = new Phaser.Rectangle(0, game.world.height * 0.75, game.world.width, person.height);
//設定人物事件為拖動
person.input.enableDrag(false,false,false,255,rect,null);
//開始遊戲點選事件
game.input.onTap.add(function(){
isCanPlay=true;
remind.destroy();
/*加入暫停按鈕*/
button = game.add.button(game.world.width - 195, 10, 'button', config.managePause,this,1,1,0);
})
}
//遊戲部分
function update(){
if (isCanPlay) {
if(time%30 == 0) {
config.dropApple();//呼叫蘋果掉落事件
}
gameTime=60 - parseInt(time/60);
time++;
//設定碰撞，overlap引數為人物，蘋果組，處理函式，額外的處理函式，執行上下文
game.physics.arcade.overlap(person, apple, config.touchApple, null, this);
if (gameTime<=0) {
config.gameOvre(score);//呼叫遊戲結束函式
}
timeText.text='倒計時：'+gameTime;
}
}
function render(){
}