phaser
遊戲 css
https://segmentfault.com/a/1190000009226335 教程html
https://www.phaser-china.com/ 教程 segmentfault
http://phaser.io/ 官網跨域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/phaser/2.4.6/phaser.min.js"></script>
<div id="game"></div>
<script>
// 這裏是爲了方便查看示例。
var width = window.innerWidth;
var height = window.innerHeight;
// 建立遊戲實例
var game = new Phaser.Game(width, height, Phaser.AUTO, '#game');
// 定義場景
var states = {
// 加載場景
preload: function () {
this.preload = function () {
// 設置背景爲黑色
game.stage.backgroundColor = '#000000';
// 加載遊戲資源
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.audio('bgMusic', '//24haowan-cdn.shanyougame.com/pickApple2/assets/audio/bgMusic.mp3');
game.load.audio('scoreMusic', '//24haowan-cdn.shanyougame.com/pickApple2/assets/audio/addscore.mp3');
game.load.audio('bombMusic', '//24haowan-cdn.shanyougame.com/pickApple2/assets/audio/boom.mp3');
// 添加進度文字
var progressText = game.add.text(game.world.centerX, game.world.centerY, '0%', {
fontSize: '60px',
fill: '#ffffff'
});
progressText.anchor.setTo(0.5, 0.5);
// 監聽加載完一個文件的事件
let deadLine = false
game.load.onFileComplete.add(function (progress) {
progressText.text = progress + '%';
if (progress == 100) {
progressText.text = '加載完畢'
setTimeout(() => {
deadLine = true
}, 1000)
}
});
// 監聽加載完畢事件
game.load.onLoadComplete.add(onLoad)
// 加載完畢回調方法
function onLoad () {
if (deadLine) {
// 已到達最小展現時間，能夠進入下一個場景
game.state.start('created');
} else {
// 尚未到最小展現時間，1秒後重試
setTimeout(onLoad, 1000);
}
}
}
},
// 開始場景
created: function () {
this.create = function () {
// 添加背景
var bg = game.add.image(0, 0, 'bg');
bg.width = game.world.width;
bg.height = game.world.height;
// 添加標題
var title = game.add.text(game.world.centerX, game.world.height * 0.25, '小恐龍接蘋果', {
fontSize: '40px',
fontWeight: 'bold',
fill: '#f2bb15'
});
title.anchor.setTo(0.5, 0.5);
// 添加提示
var remind = game.add.text(game.world.centerX, game.world.centerY, '點擊任意位置開始', {
fontSize: '20px',
fill: '#f2bb15'
});
remind.anchor.setTo(0.5, 0.5);
// 添加主角
var man = game.add.sprite(game.world.centerX, game.world.height * 0.75, 'dude');
var manImage = game.cache.getImage('dude');
man.width = game.world.width * 0.2;
man.height = man.width / manImage.width * manImage.height;
man.anchor.setTo(0.5, 0.5);
// 添加點擊事件
game.input.onTap.add(function () {
game.state.start('play');
});
}
},
// 遊戲場景
play: function () {
this.create = function () {
// 得分
var score = 0;
// 添加背景音樂
var bgMusic = game.add.audio('bgMusic');
bgMusic.loopFull();
// 緩存其餘音樂
var scoreMusic = game.add.audio('scoreMusic');
var bombMusic = game.add.audio('bombMusic');
// 添加背景
var bg = game.add.image(0, 0, 'bg');
bg.width = game.world.width;
bg.height = game.world.height;
// 添加主角
var man = game.add.sprite(game.world.centerX, game.world.height * 0.75, 'dude');
var manImage = game.cache.getImage('dude');
man.width = game.world.width * 0.2;
man.height = man.width / manImage.width * manImage.height;
man.anchor.setTo(0.5, 0.5);
// 添加分數
var title = game.add.text(game.world.centerX, game.world.height * 0.25, '0', {
fontSize: '40px',
fontWeight: 'bold',
fill: '#f2bb15'
});
title.anchor.setTo(0.5, 0.5);
// 是否正在觸摸
var touching = false;
// 監聽按下事件
game.input.onDown.add(function (pointer) {
if (Math.abs(pointer.x - man.x) < man.width / 2) touching = true;
// if (man.x<pointer.x<man.x+man.width) touching = true;
});
// 監聽離開事件
game.input.onUp.add(function () {
touching = false;
console.log('up');
});
// 監聽滑動事件
game.input.addMoveCallback(function (pointer, x, y, isTap) {
if (!isTap && touching) man.x = x;
});
// 添加蘋果組
var apples = game.add.group();
// 蘋果類型
var appleTypes = ['green', 'red', 'yellow'];
var appleTimer = game.time.create(true);
appleTimer.loop(1000, function() {
var x = Math.random() * game.world.width;
var type = appleTypes[Math.floor(Math.random() * appleTypes.length)];
var apple = apples.create(x, 0, type);
// 設置蘋果大小
var appleImg = game.cache.getImage(type);
apple.width = game.world.width / 8;
apple.height = apple.width / appleImg.width * appleImg.height;
// 設置蘋果加入物理運動
game.physics.enable(apple);
});
appleTimer.start();
// 開啓物理引擎
game.physics.startSystem(Phaser.Physics.Arcade);
game.physics.arcade.gravity.y = 300;
}
},
// 結束場景
over: function () {
this.create = function () {
// TO-DO
game.stage.backgroundColor = '#000';
// 添加進度文字
let mes = '遊戲結束!任意點擊再玩一次'
var progressText = game.add.text(game.world.centerX, game.world.centerY, mes, {
fontSize: '60px',
fill: '#ffffff'
});
progressText.anchor.setTo(0.5, 0.5);
console.log('遊戲結束!');
// 添加點擊事件
game.input.onTap.add(function () {
game.state.start('created');
});
}
}
};
// 添加場景到遊戲示例中
Object.keys(states).map(function (key) {
game.state.add(key, states[key]);
});
// 啓動遊戲
game.state.start('preload');
</script>
</body>
</html>
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
