2017年9月21日
Phaser.js开发躲避外星人游戏(终结篇)
又到了写博客的时候，不免又跟各位老哥絮叨絮叨，哈哈，今天给大家带来的是一款用phaser 开发的躲避外星人游戏，如果你想下载 传送入口在这里：
https://github.com/894658027/HTML5-Games/tree/master/PhaserJs/eludeAliens
话不多说我们直接上代码，
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>躲避外星人</title>
<link href=”css/ste.css” rel = “stylesheet” type=”text/css”>
<style>
html,body{
height: 100%;
margin: 0;
padding: 0;
}
#icon_1{position: absolute;top: 1px;left: 1%;z-index: 997;display: none;}
#icon_2{position: absolute;top: 1px;right: 1%; z-index: 996;display: none;}
#bg-canvas{margin:auto; position: absolute; z-index:-10;width: 100vw;top:0px;left:0px;height:100vh;}
@media (min-width: 1365px) and (max-width: 1400px) {
#bg-canvas{height:110vh;}
}
@media (min-width: 1400px) and (max-width: 1510px) {
#bg-canvas{height:125vh;}
}
@media (min-width: 1025px) and (max-width: 1364px) {
#bg-canvas{height:104vh;}
}
@media (min-width: 767px) and (max-width: 991px) {
#bg-canvas{height:100vh;}
}
@media (min-width: 1510px) and (max-width: 1920px) {
#bg-canvas{height:110vh;}
}
</style>
<script src=”js/jquery.min.js”></script>
<script src=”js/create.js”></script>
<script src=”js/common.js”></script>
<script src=”js/stbg.js”></script>
<script src=”js/phaser.min.js”></script>
</head>
<body>
<div id=”container”>
</div>
<divid=”instructions”style=”display: none;”>
<divclass=”select”style=”display: none;”>
</div>
<divid=”instruction1″style=”display: block;”>
<divclass=”indent”style=”margin-top: 20px;”>
请观察星星的状态或运动方式,找出状态或运动不同的星星,迅速点击屏幕,找对有惊喜！
</div>
<divclass=”start”></div>
</div>
<divid=”instruction2″>
<divclass=”indent”>
请观察星星的状态或运动方式,找出状态或运动不同的星星,迅速点击屏幕,找对有惊喜！
</div>
<divclass=”instruct-confirm”></div>
</div>
</div>
<div id=”icon_1″><img src=”image/help2.png”></div>
<divid=”icon_2″><ahref=”index.html”><imgsrc=”image/reset1.png”></a></div>
<canvas id=”bg-canvas” width=”1024″ height=”720″ ></canvas>
<script>
window.handleResize = function () {
if (window.innerWidth<window.innerHeight*1024/768) {
$(“#container”).css({
“height”:”auto”,
“width”:”99.9vw”
});
}
};
window.addEventListener(‘resize’, handleResize, false);
window.handleResize();
// 背景控件
$(document).ready(function () {
$(“#icon_1”).click(function () {
$(“#instructions”).show();
$(“#container”).hide();
});
$(“.start”).click(function () {
$(“#container”).show();
$(“#instructions”).hide();
});
});
function canvasBgone() {
var config = {
barWidth: 5,
deltaTime: 400,
showTimes: 8
};
if (window.stbg) stbg.removeSelf();
window.stbg = new STBG(config);
}
function canvasBgtwo() {
var config = {
barWidth: 10,
deltaTime: 400,
showTimes: 8
};
if (window.stbg) stbg.removeSelf();
window.stbg = new STBG(config);
}
function canvasBgthree() {
var config = {
barWidth: 15,
deltaTime: 400,
showTimes: 8
};
if (window.stbg) stbg.removeSelf();
window.stbg = new STBG(config);
}
function canvasBgfour() {
var config = {
barWidth: 20,
deltaTime: 400,
showTimes: 8
};
if (window.stbg) stbg.removeSelf();
window.stbg = new STBG(config);
}
// var timer;
// var total = 0;
document.body.style.margin = “0px”;
onload = function () {
/////////////////////////////SET///////////////////////////////////////////
var loading;
var progressText;
////////////////////////////BOOTSTATE//////////////////////////////////////
var bootState = function bootState(game) {
this.preload = function () {
game.load.image(‘loading’, ‘./assets/preloader.gif’);
};
this.create = function () {
// game.stage.backgroundColor = ‘#2384e7’;
game.state.start(‘loader’);
};
};
////////////////////////////LOADERSTATE////////////////////////////////////
var loaderState = function loaderState(game) {
this.init = function () {
loading = game.add.image(game.world.centerX, game.world.centerY, ‘loading’);
loading.anchor = { x: 0.5, y: 0.5 };
progressText = game.add.text(game.world.centerX, game.world.centerY + 30, ‘0%’, { fill: ‘#fff’, fontSize: ’16px’ });
progressText.anchor = { x: 0.5, y: 0.5 };
//自动检测游戏窗口变化
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
};
this.preload = function () {
game.load.audio(‘gameMusic’, ‘assets/gameMusic.mp3’); //游戏背景音乐
// game.load.image(‘background’,’assets/background.png’);
game.load.image(‘proloadPanel’, ‘assets/proloadPanel.png’);
game.load.image(‘around_h’, ‘assets/around_h.png’);
game.load.image(‘around_v’, ‘assets/around_v.png’);
game.load.spritesheet(‘enemy’, ‘assets/baddie.png’, 32, 32);
game.load.spritesheet(‘player’, ‘assets/dude.png’, 32, 48);
game.load.image(‘logo’, ‘assets/logo.png’);
game.load.image(‘button’, ‘assets/restart.png’);
game.load.image(‘scorePanel’, ‘assets/scorePanel.png’);
game.load.image(‘gameTimer’, ‘assets/gameTimer.png’);
game.load.spritesheet(‘snowflakes’, ‘assets/snowflakes.png’, 17, 17);
game.load.spritesheet(‘snowflakes_large’, ‘assets/snowflakes_large.png’, 64, 64);
game.load.onFileComplete.add(function (progress) {
progressText.text = progress + ‘%’;
});
canvasBgfour();
};
this.create = function () {
// 雪花背景
// snowBg();
game.music = this.add.audio(‘gameMusic’, 1, true);
game.music.play(”, 0, 1, true);
loading.kill();
progressText.destroy();
var text = game.add.text(0, game.world.height / 15, ‘电脑端：键盘(上下左右),移动端：触摸,操作超人进行躲避敌人!’, { fill: ‘#fff’, fontSize: ’35px’ });
text.setShadow(3, 3, ‘rgba(0,0,0,0.8)’, 2);
text.x = (game.world.width – text.width) / 2;
text.alpha = 1;
//黑色横幅
var bar = game.add.graphics();
bar.beginFill(0x000000, 0.5);
bar.drawRect(0, 25, 1280, 100);
// 文字内容
var styleText = { font: “bold 32px Arial”, fill: “#fff”, boundsAlignH: “center”, boundsAlignV: “middle” };
var scorePanel = game.add.sprite(game.world.centerX / 2, 180, ‘proloadPanel’);
// logo按钮
game.add.tween(text).from({ alpha: 0 }, 4000, Phaser.Easing.Bounce.Out, true);
var sprite = game.add.sprite(game.world.centerX, game.world.centerY + 55, ‘logo’);
sprite.anchor.set(0.5);
game.add.tween(sprite).from({ y: -200 }, 2000, Phaser.Easing.Bounce.Out, true);
sprite.inputEnabled = true;
sprite.events.onInputDown.add(function () {
game.state.start(‘main’);
}, this);
};
};
//////////////////////////MAINSTATE////////////////////////////////
var mainState = function mainState(game) {
var score = 1;
var timeStr;
var timeStrs;
var enemy = [];
var enemys;
var enemy;
var player;
var around;
var cursors;
var playerV = 150;
this.create = function () {
// snowBg();
$(“#icon_1”).show();
$(“#icon_2”).show();
game.physics.startSystem(Phaser.ARCADE);
enemys = game.add.group();
enemys.enableBody = true;
enemy = game.add.sprite(0, 0, ‘baddie’);
enemy.animations.add(‘baddie’, [0, 1, 2, 3], 4, true);
enemy.animations.play(‘baddie’, 8, true);
enemys.create(32, 32, ‘enemy’);
around = game.add.group();
around.enableBody = true;
around.create(0, 0, ‘around_h’);
around.create(game.world.width – 30, 0, ‘around_h’);
around.create(0, 0, ‘around_v’);
around.create(0, game.world.height – 30, ‘around_v’);
player = game.add.sprite(0, 0, ‘player’);
game.physics.arcade.enable(player);
player.x = (game.world.width – player.width) / 2;
player.y = (game.world.height – player.height) / 2;
player.scale.setTo(0.7);
player.inputEnabled = true;
player.input.enableDrag(false);
loopMove(enemys.getChildAt(0), 3, 3);
var scoreTimer = game.add.sprite(game.world.centerX / 1.4, 50, ‘gameTimer’);
// 计时统计面板
timeStr = game.add.text(0, game.world.height / 9 – 5, “当前时间:” + score, { fill: ‘#fff’, fontSize: ’32px’ });
timeStrs = game.add.text(-200, game.world.height / 9, score, { fill: ‘#fff’, fontSize: ’32px’ });
game.time.events.add(Phaser.Timer.SECOND * 10, twoEnemys, this);
game.time.events.add(Phaser.Timer.SECOND * 20, threeEnemys, this);
game.time.events.add(Phaser.Timer.SECOND * 30, fourEnemys, this);
game.time.events.add(Phaser.Timer.SECOND * 40, fiveEnemys, this);
game.time.events.add(Phaser.Timer.SECOND * 50, sixEnemys, this);
game.time.events.add(Phaser.Timer.SECOND * 60, sevenEnemys, this);
player.animations.add(‘left’, [0, 1, 2, 3], 10, true);
//添加动画，左执行1-4帧，10帧每秒速度播放，循环播放
player.animations.add(‘right’, [5, 6, 7, 8], 10, true);
//添加动画，右执行1-4帧，10帧每秒速度播放，循环播放
};
function twoEnemys() {
enemys.create(32, 32, ‘enemy’);
loopMove(enemys.getChildAt(1), 3, 3);
console.log(“第二个敌人”);
}
function threeEnemys() {
enemys.create(32, 32, ‘enemy’);
loopMove(enemys.getChildAt(2), 3, 3);
player.scale.setTo(0.6);
enemys.getChildAt(0).scale.setTo(0.6, 0.6);
enemys.getChildAt(1).scale.setTo(0.6, 0.6);
enemys.getChildAt(2).scale.setTo(0.6, 0.6);
// player.y = 660;
canvasBgfour();
console.log(“第三个敌人”);
}
function fourEnemys() {
enemys.create(32, 32, ‘enemy’);
loopMove(enemys.getChildAt(3), 3, 3);
player.scale.setTo(0.5);
enemys.getChildAt(0).scale.setTo(0.5, 0.5);
enemys.getChildAt(1).scale.setTo(0.5, 0.5);
enemys.getChildAt(2).scale.setTo(0.5, 0.5);
enemys.getChildAt(3).scale.setTo(0.5, 0.5);
// player.y = 665;
canvasBgthree();
console.log(“第四个敌人”);
}
function fiveEnemys() {
canvasBgtwo();
enemys.create(32, 32, ‘enemy’);
loopMove(enemys.getChildAt(4), 3, 3);
player.scale.setTo(0.4);
enemys.getChildAt(0).scale.setTo(0.4, 0.4);
enemys.getChildAt(1).scale.setTo(0.4, 0.4);
enemys.getChildAt(2).scale.setTo(0.4, 0.4);
enemys.getChildAt(3).scale.setTo(0.4, 0.4);
enemys.getChildAt(4).scale.setTo(0.4, 0.4);
// player.y = 670;
console.log(“第五个敌人”);
}
function sixEnemys() {
canvasBgone();
enemys.create(32, 32, ‘enemy’);
loopMove(enemys.getChildAt(5), 3, 3);
player.scale.setTo(0.3);
enemys.getChildAt(0).scale.setTo(0.3, 0.3);
enemys.getChildAt(1).scale.setTo(0.3, 0.3);
enemys.getChildAt(2).scale.setTo(0.3, 0.3);
enemys.getChildAt(3).scale.setTo(0.3, 0.3);
enemys.getChildAt(4).scale.setTo(0.3, 0.3);
enemys.getChildAt(5).scale.setTo(0.3, 0.3);
// player.y = 675;
console.log(“第六个敌人”);
}
function sevenEnemys() {
canvasBgone();
enemys.create(32, 32, ‘enemy’);
loopMove(enemys.getChildAt(6), 3, 3);
player.scale.setTo(0.2);
enemys.getChildAt(0).scale.setTo(0.2, 0.2);
enemys.getChildAt(1).scale.setTo(0.2, 0.2);
enemys.getChildAt(2).scale.setTo(0.2, 0.2);
enemys.getChildAt(3).scale.setTo(0.2, 0.2);
enemys.getChildAt(4).scale.setTo(0.2, 0.2);
enemys.getChildAt(5).scale.setTo(0.2, 0.2);
enemys.getChildAt(6).scale.setTo(0.2, 0.2);
// player.y = 680;
console.log(“第七个敌人”);
}
this.update = function () {
cursors = game.input.keyboard.createCursorKeys(); //键盘事件
if (player.alive) {
player.body.velocity.x = 0; //加速度默认值0
player.body.velocity.y = 0;
if (cursors.left.isDown) {
player.body.velocity.x = -playerV;
player.animations.play(‘left’);
} else if (cursors.right.isDown) {
player.body.velocity.x = +playerV;
player.animations.play(‘right’);
}
else if (cursors.up.isDown) {
player.body.velocity.y = -playerV;
// player.animations.play(‘right’);
}else if (cursors.down.isDown) {
player.body.velocity.y = +playerV;
// player.animations.play(‘right’);
}
else {
player.animations.stop();
player.frame = 4; //第四帧
}
game.physics.arcade.overlap(player, around, function () {
game.state.start(‘theEnd’);
// player.body.collideWorldBounds = true;
});
game.physics.arcade.overlap(player, enemys, function () {
game.state.start(‘theEnd’);
});
}
};
this.render = function () {
// game.debug.text(‘Time until event: ‘ + timer.duration.toFixed(1), 350, 128,{fill:’#fff’,fontSize:’48px’});
// game.debug.text(‘当前时间: ‘ + total + “s”, 350, 128,{fill:’#fff’,fontSize:’48px’});
if (score > 0) {
score += 0.01;
timeStr.text = score.toFixed(1);
timeStrs.text = score.toFixed(1);
}
ts = timeStrs.text;
// 修改计时得分
timeStr.x = (game.world.width – timeStr.width) / 2 + 105;
};
};
//////////////////////////THEENDSTATE 结束界面///////////////////////////////////////
var theEndState = function theEndState(game) {
this.create = function () {
var scoreTimer = game.add.sprite(game.world.centerX / 1.9, 50, ‘scorePanel’);
var styles = { font: “35px Arial”, fill: “#fff”, align: “center” };
var text = game.add.text(0, game.world.height / 4 + 28, ”, styles);
text.text = ts;
text.x = (game.world.width – text.width) / 2 + 95;
var button = game.add.button(0, -200, ‘button’, function () {
location.reload();
});
button.x = (game.world.width – button.width) / 2 + 20;
game.add.tween(button).to({ y: game.world.centerY }, 2000, Phaser.Easing.Bounce.Out, true);
};
};
///////////////////////////PUBLIC/////////////////////////////////////////////////
var game = new Phaser.Game(1024, 660, Phaser.AUTO, ‘container’, ”, true);
game.state.add(‘boot’, bootState);
game.state.add(‘loader’, loaderState);
game.state.add(‘main’, mainState);
game.state.add(‘theEnd’, theEndState);
game.state.start(‘boot’);
///////////////////////////FUNCTION////////////////////////////////////////////////
function loopMove(obj, x, y) {
game.time.events.loop(Phaser.Timer.SECOND / 70, function () {
if (obj.x <= 30) {
x = -x;
}
if (obj.y <= 30) {
y = -y;
}
//有效活动范围
if (obj.x > game.world.width – 30 – obj.width) {
x = -x;
}
if (obj.y > game.world.height – 30 – obj.height) {
y = -y;
}
// obj.x = obj.x + x;
obj.x = obj.x + x;
obj.y = obj.y + y;
}, this);
}
};
</script>
</body>
</html>
今天又是代码慢慢的一天，老哥们再见，