<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/phaser.min.js"></script>
<style>
body{
margin : 0
}
</style>
</head>
<body>
<script>
// 生成配置
const config = {
// 类型
type : Phaser.AUTO,
width : 800,
height : 600,
//物理引擎
physics : {
default : 'arcade',
arcade : {
// 重力设置
gravity : {y : 300},
debug : false
}
},
// 场景
scene : {
// 预加载
preload,
// 记载主要场景
create,
// 时时刷新场景
update
}
}
// 生成游戏主体
let game = new Phaser.Game(config)
// 生成玩家
let player
// 生成平台
let platforms
// 生成指针
let cursors
// 计分器
let score = 0
// 计分文本
let scoreText
//创造炸弹
let bombs
//创造gameover条件
let gameover = false
function preload(){
// 加载背景图片
this.load.image("sky","image/sky.png")
this.load.image("bomb","image/bomb.png")
this.load.image("ground","image/platform.png")
this.load.image("star","image/star.png")
this.load.spritesheet("dude","image/dude.png",{frameWidth:32,frameHeight:48})
}
function create(){
// 绘制天空背景
this.add.image(400,300,'sky')
// 初始化游戏平台
platforms = this.physics.add.staticGroup()
// 平台导入图片，并且放大，加载当中阻止穿透
platforms.create(400, 568,'ground').setScale(2).refreshBody()
// create(x,y,imagename)
// 其中ｘ,y设为０的时候，以图片中心作为原点，显示在左上方
platforms.create(600, 400, 'ground')
platforms.create(50, 250, 'ground')
platforms.create(750, 220, 'ground');
//生成玩家
player = this.physics.add.sprite(100,450,'dude')
// 玩家增加反弹
player.setBounce(0.2)
// 玩家增加触碰检测
player.setCollideWorldBounds(true)
//初始化键位绑定（光这样还不能用，在update中检测并更新！）
this.anims.create({
key : 'left',
frames : this.anims.generateFrameNumbers('dude',{start : 0,end : 3}),
frameRate : 10,
repeat : -1
})
this.anims.create({
key : "turn",
frames: [ { key: 'dude', frame: 4 } ],
frameRate : 20
})
this.anims.create({
key : "right",
frames : this.anims.generateFrameNumbers('dude',{start : 5,end : 8}),
frameRate : 10,
repeat : -1
})
//这里是初始化cursors:热键
cursors = this.input.keyboard.createCursorKeys()
//早苗教你画星星
stars = this.physics.add.group({
key : "star",
repeat : 11,
setXY : {x: 12, y: 0, stepX:70}
})
stars.children.iterate(function (child){
//为每一颗星星加上碰撞函数
child.setBounceY(Phaser.Math.FloatBetween(0.4,0.8))
})
bombs = this.physics.add.group()
//初始化计分器
scoreText = this.add.text(16,16,"score 0",{fontSize : '32px',fill : "#000"})
//这里是把该物体绑定到游戏平台上去
this.physics.add.collider(player,platforms)
this.physics.add.collider(stars,platforms)
this.physics.add.collider(bombs,platforms)
//内置了碰撞函数
//星星与游戏人物的碰撞效果
//1:物体1，2:物体2，3:接触回调函数，4:过程回调函数，5，对象
this.physics.add.overlap(player, stars, collectStar, null, this)
//炸弹和游戏任务的碰撞效果
this.physics.add.collider(player,bombs,hitBomb,null,this)
}
function update (){
if(gameover){
return;
}
// 按了左键就左移，右键右移。不然就保持不动
if (cursors.left.isDown){
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown){
player.setVelocityX(160);
player.anims.play('right', true);
}else{
player.setVelocityX(0);
player.anims.play('turn');
}
// 按了上且不是在下降状态就可以跳
if (cursors.up.isDown && player.body.touching.down){
player.setVelocityY(-330);
}
}
function collectStar(player,star){
//这里删除star实体
star.disableBody(true,true)
score += 1000
scoreText.setText('Score : '+score)
// 如果没有了星星
if(stars.countActive(true) === 0){
stars.children.iterate(function(child){
//这里激活每一个小星星的实体
child.enableBody(true,child.x,0,true,true)
})
//判断玩家在哪边，记录另外一边的一个位置
var x = (player.x < 400) ? Phaser.Math.Between(400,800) : Phaser.Math.Between(0,400)
// 绘制炸弹
var bomb = bombs.create(x,16,'bomb')
// 炸弹加上弹性和触碰检测
bomb.setBounce(1)
bomb.setCollideWorldBounds(true)
bomb.setVelocity(Phaser.Math.Between(-200,200),20)
bomb.allowGravity = false
}
}
function hitBomb(){
// 游戏暂停
this.physics.pause()
// 人物变为绿色
player.setTint(0x00ff00)
// 人物静止不动
player.anims.play("turn")
// 游戏结束
gameover = true
}
</script>
</body>
</html>