phaser制作跑酷游戏
首先在index.html里面引入phaser.js 和自己创建的game.js
设置canvas的css样式
canvas{ margin:0 auto;}接下来用一个类方法封装整个游戏
(function() {}());在function里面定义游戏
（function(){
var SantaGame = {
init: function() {
this.game = new Phaser.Game(width, height, Phaser.CANVAS, 'game');
this.game.state.add('boot', this.boot);
this.game.state.add('load', this.load);
this.game.state.add('play', this.play);
this.game.state.add('title', this.title);
this.game.state.add('gameOver', this.gameOver);
this.game.state.start('load');
},
boot:function(){
},
load:function(){
},
title:function(){
},
play:function(){
},
gameOver:function(){
}
};
SantaGame.init();
}()）boot界面预加载loading界面。跟上个游戏一样 下面直接说loading界面吧
load: {
preload: function() {
var preloadSprite = this.game.add.sprite(this.game.world.width / 2 ,this.game.world.height / 2 ,'loading'); //创建显示loading进度的sprite
this.game.load.setPreloadSprite(preloadSprite);
this.game.load.audio('drivin-home', 'assets/world.wav');
this.game.load.audio('ho-ho-ho', 'assets/bonbon.wav');
this.game.load.audio('hop', 'assets/bomb.wav');
this.game.load.image('platform', 'assets/1.png');
this.game.load.spritesheet('santa-running', 'assets/runman.png', 493/5, 174,5);
this.game.load.image('snow-bg', 'assets/beijing1.png');
this.game.load.image('snow-bg-2', 'assets/yuanjing1.png');
this.game.load.image('snowflake', 'assets/xiaoshixiaoguo.png');
this.game.load.image('logo', 'assets/name.png');
this.game.load.image('startbtn', 'assets/bangzhujiantou.png');
},
create: function() {
this.game.state.start('title');
}
},并且在加载好的时候运行title界面
title界面。。实际上就是menu界面
title: {
create: function() {
this.bg_heaven = this.game.add.tileSprite(0, 0, width, height, 'snow-bg-2').autoScroll(-50,0); this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg').autoScroll(-100,0); this.logo = this.game.add.sprite(this.game.world.width / 2 - 158, 20, 'logo'); this.logo.alpha = 0; this.game.add.tween(this.logo).to({ alpha: 1 }, 1000, Phaser.Easing.Linear.None, true, 0); this.startBtn = this.game.add.button(this.game.world.width / 2 - 89, this.game.world.height - 120, 'startbtn', this.startClicked); this.startBtn.alpha = 0; this.game.add.tween(this.startBtn).to({ alpha: 1 }, 1000, Phaser.Easing.Linear.None, true, 1000); }, startClicked: function() { this.game.state.start('play'); } },官方文档说alpha是The opacity of the object.就是透明度呗。
tween动画把logo的透明度从0到1。
this.game.add.tween(this.logo).to({
alpha: 1
}, 1000, Phaser.Easing.Linear.None, true, 0);添加按钮和按钮事件
this.startBtn = this.game.add.button(this.game.world.width / 2 - 89, this.game.world.height - 120, 'startbtn', this.startClicked);
this.startBtn.alpha = 0;
this.game.add.tween(this.startBtn).to({
alpha: 1
}, 1000, Phaser.Easing.Linear.None, true, 1000);为按钮添加点击事件是this.startClicked
下面是this.clicked函数：
startClicked: function() {
this.game.state.start('play');
}闭着眼都知道是进入下个场景了。
下面是最重要的play界面喽 当当当当~
play: {
create: function() {
gameScore = 0;
this.currentFrame = 0;
this.gameSpeed = 580;
this.isGameOver = false;
this.game.physics.startSystem(Phaser.Physics.ARCADE);
this.music = this.game.add.audio('drivin-home');
this.music.loop = true;
this.music.play();
this.bg_heaven = this.game.add.tileSprite(0, 0, width, height, 'snow-bg-2').autoScroll(-50,0);
this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg');
this.bg.fixedToCamera = true;
this.bg.autoScroll(-this.gameSpeed / 6, 0);
this.emitter = this.game.add.emitter(this.game.world.centerX, -32, 50);
this.platforms = this.game.add.group();
this.platforms.enableBody = true;
this.platforms.createMultiple(5, 'platform', 0, false);
this.platforms.setAll('anchor.x', 0.5);
this.platforms.setAll('anchor.y', 0.5);
var plat;
for (var i = 0; i < 5; i++) {
plat = this.platforms.getFirstExists(false);
plat.reset(i * 192, this.game.world.height - 44);
plat.width = 300*0.6;
plat.height = 88*0.6;
this.game.physics.arcade.enable(plat);
plat.body.immovable = true;
plat.body.bounce.set(0);
}
this.lastPlatform = plat;
this.santa = this.game.add.sprite(100, this.game.world.height - 200, 'santa-running');
this.santa.animations.add('run');
this.santa.animations.play('run', 15, true);
this.santa.width = (493/5)*0.5;
this.santa.height = 174*0.5;
this.game.physics.arcade.enable(this.santa);
this.santa.body.gravity.y = 1500;
this.santa.body.collideWorldBounds = true;
this.game.camera.follow(this.santa);
this.cursors = this.game.input.keyboard.createCursorKeys();
this.spacebar = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
this.score = this.game.add.text(20, 20, '', {
font: '24px Arial',
fill: 'white'
});
},分解来看。先初始化各项数据。
然后来气物理系统。开启音效限定是无限循环。
this.game.physics.startSystem(Phaser.Physics.ARCADE);
this.music = this.game.add.audio('drivin-home');
this.music.loop = true;
this.music.play();接下来是对背景的处理
this.bg_heaven = this.game.add.tileSprite(0, 0, width, height, 'snow-bg-2').autoScroll(-50,0);
this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg');
this.bg.fixedToCamera = true;
this.bg.autoScroll(-this.gameSpeed / 6, 0);添加两个背景图片并且设置转动。
官方API关于fixedtocamera就是随着背景移动，镜头也移动。
this.platforms = this.game.add.group();
this.platforms.enableBody = true;
this.platforms.createMultiple(5, 'platform', 0, false);
this.platforms.setAll('anchor.x', 0.5);
this.platforms.setAll('anchor.y', 0.5);
var plat;
for (var i = 0; i < 5; i++) {
plat = this.platforms.getFirstExists(false);
plat.reset(i * 192, this.game.world.height - 44);
plat.width = 300*0.6;
plat.height = 88*0.6;
this.game.physics.arcade.enable(plat);
plat.body.immovable = true;
plat.body.bounce.set(0);
}
this.lastPlatform = plat;添加一个组是台阶组。前面flappy bird里面管子组也是如此的。
enablebody是什么意思？反正是要加的。。在研究吧嘿嘿。
然后每一个都设置锚点是中点。因为最初设置的是00点哦，这个跟别的引擎不一样。
immovable 固定的不可移动的。。写了跟没写有区别么。。。
bounce.set(0)可以弹跳的。呼呼
然后记录了最后一个platform一下。
然后把主人公给加进来了如下
this.santa = this.game.add.sprite(100, this.game.world.height - 200, 'santa-running');
this.santa.animations.add('run');
this.santa.animations.play('run', 15, true);
this.santa.width = (493/5)*0.5;
this.santa.height = 174*0.5;
this.game.physics.arcade.enable(this.santa);
this.santa.body.gravity.y = 1500;
this.santa.body.collideWorldBounds = true;
this.game.camera.follow(this.santa);然后添加了键盘空格响应事件和分数。。分数太模糊了
this.cursors = this.game.input.keyboard.createCursorKeys();
this.spacebar = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
this.score = this.game.add.text(20, 20, '', {
font: '24px Arial',
fill: 'white'
});下面当然是update函数啦
update: function() {
var that = this;
if (!this.isGameOver) {
gameScore += 0.5;
this.gameSpeed += 0.03;
this.score.text = 'Score: ' + Math.floor(gameScore);
this.currentFrame++;
var moveAmount = this.gameSpeed / 100;
this.game.physics.arcade.collide(this.santa, this.platforms);
if (this.santa.body.bottom >= this.game.world.bounds.bottom) {
this.isGameOver = true;
this.endGame();
}
if (this.cursors.up.isDown && this.santa.body.touching.down || this.spacebar.isDown && this.santa.body.touching.down || this.game.input.mousePointer.isDown && this.santa.body.touching.down || this.game.input.pointer1.isDown && this.santa.body.touching.down) {
this.jumpSound = this.game.add.audio('hop');
this.jumpSound.play();
this.santa.body.velocity.y = -500;
}
this.platforms.children.forEach(function(platform) {
platform.body.position.x -= moveAmount;
if (platform.body.right <= 0) {
platform.kill();
var plat = that.platforms.getFirstExists(false);
plat.reset(that.lastPlatform.body.right + 192, that.game.world.height - Math.floor(Math.random() * 50) - 24);
plat.body.immovable = true;
that.lastPlatform = plat;
}
});
}
},首先判断如果说游戏结束标志还是false而且小人撞到了地面。游戏结束调用 this.endGame();
按键或键盘小人给个垂直向上的速度。
后面就不断更新所有物体的位置x，就是加上规定的速度呗。
最后reset已经离开屏幕的物体。重定义它。
还有一个this.endGame();函数。如下
endGame: function() {
this.music.stop();
this.music = this.game.add.audio('ho-ho-ho');
this.music.play();
this.game.state.start('gameOver');
}声音停止一下，加一个hoho，再开启一下。进入下个场景。
gameOver: {
create: function() {
this.bg_heaven = this.game.add.tileSprite(0, 0, width, height, 'snow-bg-2').autoScroll(-50,0);
this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg');
this.bg.autoScroll(-this.gameSpeed / 6, 0);
this.score = this.game.add.text(this.game.world.width / 2 - 100, 200, 'Score: ' + Math.floor(gameScore), {
font: '42px Arial',
fill: 'white'
});
this.score.alpha = 0;
this.game.add.tween(this.score).to({
alpha: 1
}, 600, Phaser.Easing.Linear.None, true, 600);
this.restartBtn = this.game.add.button(this.game.world.width / 2 - 103.5, 280, 'startbtn', this.restartClicked);
this.restartBtn.alpha = 0;
this.game.add.tween(this.restartBtn).to({
alpha: 1
}, 600, Phaser.Easing.Linear.None, true, 1000);
},
restartClicked: function() {
this.game.state.start('play');
}
}还是加俩背景，加个得分，加个按钮给个事件。完了。