import Phaser from 'phaser'
class GameScene extends Phaser.Scene {
constructor() {
super({ key: 'GameScene' })
// 平台
this.platforms = null
// 移动的平台
this.movingPlatform = null
// 游戏角色
this.player = null
// 星星
this.stars = null
// 操作按键
this.cursors = null
}
preload() {
// 加载游戏素材资源
// 基本路径
this.load.path = 'assets/example/physics/basicPlatform/'
// 具体文件
this.load.image('sky', 'sky.png')
this.load.image('ground', 'platform.png')
this.load.image('star', 'star.png')
this.load.spritesheet('dude', 'dude.png', { frameWidth: 32, frameHeight: 48 })
}
create() {
// 添加天空背景
// 添加进去的元素,默认origin是0.5 0.5,也就是居中的
this.add.image(400, 300, 'sky')
// 底部静止不动平台
this.platforms = this.physics.add.staticGroup()
this.platforms.create(400, 568, 'ground').setScale(2).refreshBody()
// 移动的平台
this.movingPlatform = this.physics.add.image(400, 400, 'ground')
this.movingPlatform.setImmovable(true) // 设置可以移动
this.movingPlatform.body.allowGravity = false // 是否允许重力下坠
this.movingPlatform.setVelocityX(50) // 水平移动速度
// 添加玩家
this.player = this.physics.add.sprite(100, 450, 'dude')
this.player.setBounce(0.2) // 回弹速度保持
this.player.setCollideWorldBounds(true) // 边界碰撞
// 动画 玩家走动动画
// 向左走
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
})
// 按键
this.cursors = this.input.keyboard.createCursorKeys()
// 批量添加 星星
this.stars = this.physics.add.group({
key: 'star',
repeat: 11,
setXY: { x: 12, y: 0, stepX: 70 }
})
// 每个星星碰撞后 纵向弹跳
this.stars.children.iterate(function(child) {
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8))
})
// 物体间碰撞
// 玩家与静止平台
this.physics.add.collider(this.player, this.platforms)
// 玩家与移动平台
this.physics.add.collider(this.player, this.movingPlatform)
// 星星与静止平台
this.physics.add.collider(this.stars, this.platforms)
// 星星与移动平台
this.physics.add.collider(this.stars, this.movingPlatform)
// 玩家与星星重叠
this.physics.add.overlap(this.player, this.stars, this.collectStar, null, this)
}
update() {
if (this.cursors.left.isDown) {
// 左箭头按下
this.player.setVelocityX(-160)
this.player.anims.play('left', true)
} else if (this.cursors.right.isDown) {
// 右箭头按下
this.player.setVelocityX(160)
this.player.anims.play('right', true)
} else {
this.player.setVelocityX(0)
this.player.anims.play('turn')
}
// 按下上箭头,且 玩家底部与静止平台接触
if (this.cursors.up.isDown && this.player.body.touching.down) {
this.player.setVelocityY(-330)
}
// 移动平台左右移动
if (this.movingPlatform.x > 500) {
this.movingPlatform.setVelocityX(-50)
} else if (this.movingPlatform.x <= 300) {
this.movingPlatform.setVelocityX(50)
}
}
collectStar(player, star) {
// 隐藏星星
star.disableBody(true, true)
}
}
export function InitBasicPlatform(ele) {
return new Phaser.Game({
type: Phaser.AUTO,
width: 800,
height: 600,
parent: ele,
backgroundColor: '#fbf0e4',
// 使用arcade 物理引擎
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
// 场景
scene: [GameScene]
})
}