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>
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
