【前端网页游戏开发】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

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

  • 10
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值