使用phaser制作简易游戏
phaser.js是一个制作游戏的插件，功能非常强大，里面集成了非常多的方法，我们只需学习如何使用就基本可以满足日常使用了。
phaser官网，有各种api及实例 用翻译很容易懂
这是phaser小站中文的，里面实例很好
游戏相关的一些概念
画布
一般来说，做游戏的话基于Canvas会比基于DOM性能要好很多，尤其是涉及大量动画的情况下。Phaser会将一切渲染在canvas元素上，于是，毫不夸张地说，你的body标签里可能只包含一个canvas元素。
由于本节开发的目标是一个移动端的小游戏，因此画布一般来说都是充满全屏的。
场景
一个完整的游戏都是有分场景的，不是指“迷宫”、“沙漠”这些游戏场景，而是“加载”、“开始”、“游戏”、“结束”等场景。一般来说我们实际做项目的时候也大概是如下四种场景：
加载——展示进度条和loading动画，主要操作为加载游戏资源，如图片、音频等。
开始——展示开始按钮、活动规则等，主要是让玩家能有主动开始的操作（很关键，后面会说到）。
游戏——整个游戏的主要逻辑都在这个场景中，最核心的部分。
结束——展示游戏最终得分、排名等。
这样的场景的划分也算是描述出了整个游戏的生命周期，我认为上述四个场景是最基本的，缺了哪个场景游戏都不算完整，或者是体验不够完善。
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小恐龙接苹果</title>
<link href="./assets/css/index.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="./jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/phaser/2.6.2/phaser.min.js"></script>
<script type="text/javascript" src="./assets/js/main.js"></script>
</head>
<body>
<div id="game"></div>
<!-- 结果页 -->
<div class="over1 hidden">
<div class="over-box">
<div class="result">您的得分是<span class="gameScore"></span></div>
<img src="./assets/images/btn-again.png" alt="" class="btn-again center"/>
</div>
</div>
</body>
<script>
$(".btn-again").click(function(){
$(".over1").hide();
game.state.restart();
})
</script>
</html>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(){
}