Files
CINC/scenes/storeScenes/BreatheLife.js
T

251 lines
9.5 KiB
JavaScript

/**
* BreatheLife 场景类
*
* 交互场景,允许用户通过点击屏幕创建角色
* 当创建的角色超过3个时,点击已存在的角色会为其设置纹理
* 当设置纹理的角色超过3个时,自动切换到 MenuScene 场景
*/
import WorldLand from './WorldLand.js'
export default class BreatheLife extends WorldLand {
constructor(sceneKey = 'BreatheLife') {
// 场景相关
super(sceneKey)
this.nextScene = 'MenuScene'
// 层级相关
this.SpriteDepth = 10 // 角色层级
}
preload() {
super.preload()
// 加载角色动画和图片资源
this.load.image(`player1-0`, `assets/PNG/Players/Tiles/tile_${String(8).padStart(4, '0')}.png`)
// 批量加载图片用于动画播放
for (let i = 1; i < 8; i++) {
this.load.image(`player0-${i}`, `assets/PNG/Players/Tiles/tile_${String(i).padStart(4, '0')}.png`);
}
for (let i = 9; i < 16; i++) {
this.load.image(`player1-${i-8}`, `assets/PNG/Players/Tiles/tile_${String(i).padStart(4, '0')}.png`);
}
// 加载音效资源
this.load.audio('coin-a', 'assets/Sounds/move-a.ogg');
this.load.audio('coin-b', 'assets/Sounds/coin-b.ogg');
}
create() {
super.create()
// 覆盖场景切换条件
this.initSceneTransition()
// 覆盖输入
this.initInput()
// 添加随机小草
this.addRandomSmallGrass()
}
initSceneTransition() {
// 初始化角色计数器,用于跟踪创建的角色数量
this.spriteCount = 0
this.spriteTextureCount = 0
this.spriteAnimCount = 0
this.targetCount = 3 // 目标角色数量
this.smallGrassObjects = [] // 维护小草集合
}
initInput() {
// 移除父类的输入事件监听器,避免重复监听
super.removeListener()
// 监听鼠标点击事件,点击后创建一个新的角色
this.input.on('pointerdown', () => {
// 获取点击位置的坐标
const { x, y } = this.input.activePointer
this.handleClick(x, y)
})
// 监听自定义收集完成事件,当所有小草都被收集时触发
this.events.on('collectAllSmallGrass', () => {
this.scene.start(this.nextScene)
})
}
removeListener() {
// 移除鼠标点击事件监听器
this.input.off('pointerdown');
// 移除自定义收集完成事件监听器
this.events.off('collectAllSmallGrass')
}
/**
* 处理点击事件
* @param {number} x - 点击的 x 坐标
* @param {number} y - 点击的 y 坐标
*/
handleClick(x, y) {
// 获取点击位置的精灵
const clickedSprite = this.getClickedSprite(x, y)
console.log("点击到的精灵:", clickedSprite)
// 如果满足条件则切换到下一场景
if (clickedSprite) { // 如果点击到了精灵
this.handleSpriteClick(clickedSprite)
}else if (this.spriteCount >= this.targetCount && this.spriteTextureCount >= this.targetCount && this.spriteAnimCount >= this.targetCount) {
this.scene.start(this.nextScene)
}else if (this.spriteCount < 3) {
// 创建一个新的角色 sprite,缩放为1倍,并设置原点为中心底部
const sprite = this.physics.add.sprite(x, y, 'player').setScale(1).setOrigin(0.5, 1)
sprite.setDepth(this.SpriteDepth) // 设置角色层级
// 设置角色碰撞世界边界
sprite.setCollideWorldBounds(true)
// 增加角色计数器
this.spriteCount++
console.log("已设置纹理的角色数量:", this.spriteTextureCount)
console.log("已创建的角色数量:", this.spriteCount)
}
}
/**
* 获取鼠标点击位置的精灵
* @param {number} x - 点击位置的 x 坐标
* @param {number} y - 点击位置的 y 坐标
* @returns {Phaser.GameObjects.Sprite|null} - 点击位置的精灵,如果没有则返回 null
*/
getClickedSprite(x, y) {
// 获取场景中所有的精灵
const sprites = this.children.getChildren().filter(child => child instanceof Phaser.GameObjects.Sprite)
// 检查每个精灵是否被点击
for (const sprite of sprites) {
// 检查点击位置是否在精灵的边界内
if (sprite.getBounds().contains(x, y)) {
return sprite
}
}
return null
}
handleSpriteClick(clickedSprite) {
console.log("当前精灵的纹理:", clickedSprite.texture.key) // 查看当前精灵的纹理
// 如果纹理为默认值或纹理缺失
if (clickedSprite.texture.key === 'player' || clickedSprite.texture.key === '__MISSING') {
clickedSprite.setTexture(`player1-0`).setScale(1) // 设置指定的纹理
this.spriteTextureCount++
}else if (clickedSprite.texture.key === 'player1-0'){ // 如果点击的角色纹理已经是player1-0,则添加动画
this.addSpriteAnimation(clickedSprite) // 添加角色动画
}else if (['player1-1', 'player1-2'].includes(clickedSprite.texture.key)){ // 如果点击的角色纹理已经是player0-0,则添加音效
this.sound.play('coin-b') // 播放移动音效
// 添加搜索逻辑,自动检测最近的小草
this.searchAndAddSmallGrass(clickedSprite)
}
}
/**
* 为角色添加动画
* @param {Phaser.GameObjects.Sprite} sprite - 要添加动画的角色精灵
*/
addSpriteAnimation(sprite) {
// 检查角色是否已添加动画
if (sprite.anims.exists('player-move')) {
return
}
// 创建移动动画
this.anims.create({
key: 'player-move',
frames: [
{ key: 'player1-1' },
{ key: 'player1-2' }
],
frameRate: 10,
repeat: -1
});
// 播放角色动画
sprite.anims.play('player-move')
this.spriteAnimCount++
}
// 重写创建小草方法,移除条件判断和计数器
createSmallGrass(x, y) {
// 创建
const smallGrass = this.add.image(x, y, 'smallGrass');
smallGrass.setDepth(this.mapDepth); // 设置深度,确保在UI层级之下
smallGrass.setScrollFactor(0); // 固定,不随相机移动
return smallGrass
}
// 新增方法:随机添加50个小草
addRandomSmallGrass() {
for (let i = 0; i < 50; i++) {
// 屏幕范围内随机生成小草位置
const x = Phaser.Math.Between(0, this.cameras.main.width)
const y = Phaser.Math.Between(0, this.cameras.main.height)
const smallGrass = this.createSmallGrass(x, y)
// 保存小草对象到数组
this.smallGrassObjects.push(smallGrass)
}
}
/**
* 搜索并添加小草
* @param {Phaser.GameObjects.Sprite} clickedSprite - 点击的角色精灵
*/
searchAndAddSmallGrass(clickedSprite) {
// 搜索所有小草
// const smallGrass = this.children.getChildren().filter(child =>
// child instanceof Phaser.GameObjects.Image && child.texture.key === 'smallGrass'
// )
const smallGrass = this.smallGrassObjects
// 过滤未标记的小草
const unmarkedGrass = smallGrass.filter(grass => grass.alpha === 1)
// 如果没有小草,直接返回
if (smallGrass.length === 0) {
// 所有小草都已收集,触发事件
this.events.emit('collectAllSmallGrass')
return
}
// 查找最近的小草
let nearestGrass = null // 最近的小草
let minDistance = Infinity // 最近距离,初始为无穷大
// 遍历所有小草,找到最近的一个
for (const grass of unmarkedGrass) {
// 计算当前小草与角色的距离
const distance = Phaser.Math.Distance.Between(
clickedSprite.x, clickedSprite.y,
grass.x, grass.y
)
// 如果当前小草距离更近,更新最近的小草
if (distance < minDistance) {
minDistance = distance
nearestGrass = grass
}
}
// 如果找到最近的小草,移动角色到小草位置
if (nearestGrass) {
// 标记小草为已收集
nearestGrass.setAlpha(0.5)
// 角色移动到小草位置
this.tweens.add({
targets: clickedSprite, // 角色精灵
x: nearestGrass.x, // 目标小草位置x
y: nearestGrass.y, // 目标小草位置y
duration: 1000, // 移动时间1秒
ease: 'Power2', // 移动缓动效果
onComplete: () => {
// 从数组中移除已收集的小草
this.smallGrassObjects = this.smallGrassObjects.filter(
obj => obj !== nearestGrass
)
nearestGrass.destroy() // 移动完成后销毁小草
this.sound.play('coin-a') // 播放收集小草音效
this.searchAndAddSmallGrass(clickedSprite) // 递归调用,继续搜索下一个小草
}
})
}
}
}