【前端网页游戏开发】Vue3＋PixiJS开发2D闯关打怪游戏，更新内容（打斗）

概要

本次更新内容：怪物攻击，怪物死亡，怪物刷新，自动跟随玩家，靠近玩家时自动攻击，玩家点击键盘J键可以攻击怪物，玩家血量为10，怪物的血量为5，怪物每5秒钟刷新一次，并且大于5只时不再刷新，怪物的伤害为攻击一次减1血量，玩家的伤害为攻击减2血量，当玩家或者怪物死亡时倒地，并且不再移动，玩家死亡游戏结束，弹出提示框，是否回到主界面重新开始游戏，杀死怪物10只后游戏通关，提示是否进入下一关

更新内容展示

地图出现多个怪物，每5秒钟刷新

setInterval(() => {
        if (isDead.value) return
        if (enemySpriteList.value.length < 5) {
            let enemySprite = new EnemySprite()
            app.stage.addChild(enemySprite.container)
            enemySpriteList.value.push(enemySprite)
            isAttackList.value.push(false)
            isForEndList.value.push(false)
        }
}, 5000)

 玩家类，初始化属性，以及切换动画方法

import * as PIXI from "pixi.js";
export default class PersonSprite {
  constructor() {
    this.loadTextures();
    this.container = new PIXI.AnimatedSprite(this.idleTexture);
    this.container.animationSpeed = 0.1;
    this.container.position.set(50, 415);
    this.container.play();
    this.hp = 10;
  }
  attack() {
    this.container.textures = this.attackTexture;
    this.container.loop = false;
    this.container.play();
    this.container.onComplete = () => {
      this.container.loop = true;
      this.idle();
    };
  }
  idle() {
    this.container.textures = this.idleTexture;
    this.container.loop = true;
    this.container.scale.x = 1;
    this.container.anchor.set(0, 0);
    this.container.play();
  }
  hurt() {
    this.container.textures = this.hurtTexture;
    this.container.loop = false;
    this.container.play();
    this.hp -= 1;
  }
  dead() {
    this.container.y += 36;
    this.container.textures = this.deadTexture;
    this.container.loop = false;
    this.container.play();
  }
}

 怪物类，初始化属性，已经动画切换方法

import * as PIXI from "pixi.js";
export default class EnemySprite {
  constructor() {
    this.loadTextures();
    this.container = new PIXI.AnimatedSprite(this.runTexture);
    this.container.animationSpeed = 0.1;
    this.container.position.set(
      this.getRandomInt(50, window.innerWidth),
      this.getRandomInt(350, window.innerHeight)
    );
    this.container.play();
    this.hp = 5;
    this.runNum = 0;
  }
  getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
  }
  attack() {
    this.container.textures = this.attackTexture;
    this.container.animationSpeed = 0.05;
    this.container.play();
  }
  run() {
    this.container.textures = this.runTexture;
    this.container.animationSpeed = 0.1;
    this.container.play();
  }
  dead() {
    this.container.y += 34;
    this.container.textures = this.deadTexture;
    this.container.animationSpeed = 0.05;
    this.container.loop = false;
    this.container.play();
  }
  hurt() {
    this.hp -= 5;
    this.container.x -= 50;
    if (this.hp == 0) {
      this.dead();
    }
  }
}

 当怪物远离玩家时切换跑步动作，当怪物靠近玩家时切换攻击动作，以及怪物自动跟随，这也是本游戏中较难开发部分

app.ticker.add(detal => {
        if (isDead.value) return
        enemySpriteList.value.forEach((enemySprite, index) => {
            if (enemySprite.hp == 0) return
            // 计算从敌人到玩家的方向向量
            const directionX = personSprite.container.x - enemySprite.container.x;
            const directionY = personSprite.container.y - enemySprite.container.y;
            // 计算距离
            const distance = Math.sqrt(directionX * directionX + directionY * directionY);

            // 避免除以零的错误，当距离为零时（即敌人和玩家在同一位置）不移动
            if (distance > 50) {
                const normalizedDirectionX = directionX / distance;
                const normalizedDirectionY = directionY / distance;
                // 归一化方向向量
                if (normalizedDirectionX < 0) {
                    enemySprite.container.scale.x = -1
                } else {
                    enemySprite.container.scale.x = 1
                }
                enemySprite.runNum += 1
                if (enemySprite.runNum == 1) {
                    enemySprite.run()
                }
                // 根据速度更新敌人的位置
                enemySprite.container.x += normalizedDirectionX * 2;
                enemySprite.container.y += normalizedDirectionY * 2;
            } else {
                enemySprite.runNum = 0
                oldIsAttackList = [...isAttackList.value]
                oldIsForEndList = [...isForEndList.value]
                isAttackList.value[index] = true
                if (enemySprite.container.currentFrame == enemySprite.attackTexture.length - 1) {
                    isForEndList.value[index] = true
                } else {
                    isForEndList.value[index] = false
                }
            }
        })
    })

 当怪物在攻击玩家时判断动画是否循环完一次，然后判断玩家和怪物是否碰撞在一起，如果碰撞在一起了，玩家收到伤害

let b = new Bump(PIXI)

    watch(() => isAttackList, newVal => {
        newVal.value.forEach((item, index) => {
            if (item != oldIsAttackList[index]) {
                if (item) {
                    enemySpriteList.value[index].attack()
                }
            }
        })
    }, { deep: true })
    watch(() => isForEndList, newVal => {
        newVal.value.forEach((item, index) => {
            if (item != oldIsForEndList[index]) {
                if (item) {
                    let isBump = b.hit(personSprite.container, enemySpriteList.value[index].container)
                    if (isBump) {
                        personSprite.hurt()
                        hp.value = personSprite.hp
                        if (personSprite.hp == 0) {
                            personSprite.dead()
                            isDead.value = true
                        }
                    }
                }
            }
        })
    }, { deep: true })

 当生命值为0时，玩家死亡，游戏结束

 玩家击杀怪物

怪物死亡

if (e.key == 'j') {
            personSprite.attack()
            enemySpriteList.value.forEach(enemySprite => {
                if (enemySprite.hp == 0) return
                let isBump = b.hit(personSprite.container, enemySprite.container)
                if (isBump) {
                    enemySprite.hurt()
                    if (enemySprite.hp == 0) {
                        killNum.value += 1
                        enemySpriteList.value.splice(index, 1)
                        if (killNum == 10) {
                            isSuccess.value = true
                        }
                    }
                }
            })
            return
}

击杀10只怪物，玩家通关游戏

 界面HTML5部分

<div class="container" ref="container">
        <div class="hp">
            当前血量为:{{ hp }}
        </div>
        <div class="info">
            当前为第一关，共杀死怪物{{ killNum }}只
        </div>
        <div class="setting-btn" @click="() => { if (!isDead) showSetting = true }">设置</div>
        <div class="setting" v-show="showSetting">
            <div class="close" @click="showSetting = false">X</div>
            <div class="title">设置</div>
            <div class="content">
                <div class="btn" @click="closeAudio">音乐{{ audioNo ? '关闭' : '打开' }}</div>
                <div class="btn" @click="openFullscreen" v-if="!isfullscreen">全屏</div>
                <div class="btn" @click="closeFullscreen" v-else>退出全屏</div>
                <div class="btn" @click="emit('end')">主界面</div>
            </div>
        </div>
        <div class="dead-tip" v-show="isDead">
            <div class="title">提示</div>
            <p>你已死亡,游戏失败了!</p>
            <div class="btn" @click="emit('end')">主界面</div>
        </div>
        <div class="success-tip" v-show="isSuccess">
            <div class="title">提示</div>
            <p>恭喜你!通关了</p>
            <div class="btn" @click="next">下一关卡</div>
        </div>
</div>

技术细节

使用Vue对界面上的提示信息进行动态显示，动态弹出

小结

虽然说打斗已经开发完毕，但是在一些细节上仍存在一些BUG

感兴趣可以关注收藏，后面持续更新内容，本博客做学习记录