首页 > 其他分享 >【前端网页游戏开发】Vue3+PixiJS开发2D闯关打怪游戏,开发时长为6天,成功推出v1.0正式版

【前端网页游戏开发】Vue3+PixiJS开发2D闯关打怪游戏,开发时长为6天,成功推出v1.0正式版

时间:2024-06-24 13:58:21浏览次数:28  
标签:游戏 value 玩家 2D 开发 BOSS children

更新内容

增加了地图切换功能,扩展了游戏的游玩长度,进入每一关时,击杀10只怪物就会提示通关成功,进入下一关,点击按钮后会恢复玩家的血量,然后重新生成怪物,如果玩家死亡,就会回到提示回到主界面

点击后

游戏最后增加了BOSS,在玩家进入第四关时会出现BOSS角色,血量为20,玩家伤害为攻击一次减少1血量,当击杀BOSS后玩家通关游戏,回到主界面

当进入下一关时,清除所有怪物尸体,然后恢复玩家状态,如果是第四关的话,不再刷新怪物,出现BOSS

next = () => {
        groundSprite.switchMap();
        guanqia.value = groundSprite.index;
        isSuccess.value = false;
        keySet = new Set();
        personSprite.container.position.set(50, 415);
        personSprite.hp = 10;
        hp.value = 10;
        killNum.value = 0;
        let children = app.stage.children;
        while (children.length > 2) {
            app.stage.removeChild(children[children.length - 1]);
        }
        enemySpriteList = [];
        isForEndList.value = [];
        if (guanqia.value == 4) {
            clearInterval(timer)
            bossSprite = new BossSprite();
            bossSprite.container.position.set(app.screen.width / 2, app.screen.height / 2)
            app.stage.addChild(bossSprite.container);
            bossHp.value = bossSprite.hp
        }
    };

 玩家击杀最终BOSS,游戏结束

回到主界面


小结

历经6天的游戏开发,本游戏终于迎来了1.0正式版本,虽说游戏开发完成,但还是仍存在一些小问题,但是我修BUG修的累,就没有管了,不会特别影响到游戏的游玩,本游戏使用Vue3加PixiJS开发,将免费开源,感兴趣的话可以下载运行(需要环境)或者使用在线地址预览游戏,喜欢请点个关注,本游戏告一段落!

在线预览地址: http://www.topbox.top:8089/

哔哩哔哩: https://space.bilibili.com/35310250?spm_id_from=333.1007.0.0

项目源码:https://gitee.com/violet_wmtxdy/original-game---discomfort

往期日志

【前端网页游戏开发】PixiJS开发2D闯关打怪游戏_前端游戏闯关-CSDN博客

【前端网页游戏开发】PixiJS开发2D游戏,更新内容-CSDN博客

【前端网页游戏开发】Vue3+PixiJS开发2D闯关打怪游戏,更新内容(打斗-CSDN博客

标签:游戏,value,玩家,2D,开发,BOSS,children
From: https://blog.csdn.net/m0_61279136/article/details/139837819

相关文章

  • [题解]CF1712D Empty Graph
    思路因为我们枚举的直径是具备单调性的,所以可以使用二分答案。我们可以想一个事情,如果有两个点\(u\)和\(v\),它们两点之间的最短路径要么是直接从\(u\tov\);要么是经过一个中转点\(t\),即:\(u\tot\tov\)。然后,我们可以发现一个显然的规律,就是\(t\)一定是区间\(a\)中......
  • [题解]CF1092D1 Great Vova Wall (Version 1)
    思路发现,如果相邻元素的奇偶性相同,那么一定能通过在较低的位置竖着放若干个如果在\(i\)的位置竖着放一块砖头,使得这两列的高度相同。那么,我们想到直接考虑\(h_i\)的奇偶性,即将\(h_i\leftarrowh_i\bmod2\)。如果\(h_i=h_{i+1}\),我们显然可以同时使\(h_i\)和\(h......
  • 七、若依--P17--P18【黑马程序员Java最新AI+若依框架项目开发新方案视频教程,基于RuoYi
    学习视频【黑马程序员Java最新AI+若依框架项目开发新方案视频教程,基于RuoYi-Vue3前后端分离版本,从前端到后端再到AI智能化应用全通关】https://www.bilibili.com/video/BV1pf421B71v/?p=6&share_source=copy_web&vd_source=3949d51b57b2891ea14d6e51c792bef6二次开发P17:新......
  • 华为HDC开发者大会鸿蒙进展超预期
    本文首发于公众号“AntDream”,欢迎微信搜索“AntDream”或扫描文章底部二维码关注,和我一起每天进步一点点在数字化浪潮的推动下,华为鸿蒙系统(HarmonyOS)以其革命性的创新,引领着全球科技的新趋势。2024年华为开发者大会(HDC2024)上,华为揭开了HarmonyOSNEXT的神秘面纱,标志着"......
  • Vue登录界面设计开发
    目录前言图示详细代码前言  市面上大多的软件,在登录的时候给用户提供了超过一种的登录方式,常见的有手机短信登录、账号密码登录、app扫码登录,要想将这些功能组合在一起,就需要实现表单的切换功能,下面我将为你展示功能具体实现过程。图示详细代码template部分......
  • SSM-学情分析系统-56772(免费领源码+开发文档)可做计算机毕业设计JAVA、PHP、爬虫、APP
    学情分析系统摘 要随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势;对于学情分析系统当然也不能排除在外,随着网络技术的不断成熟,带动了学情分析系统,它彻底改变了过去传统的管理方式,不仅使服务管理难度变低了,还提升了管理的灵活性。这......
  • 【九】【QT开发应用】WebRTC的sigslot源码和使用WebRTC的sigslot使用编写信号槽
    WebRTC(WebReal-TimeCommunication)是一个开源项目,提供实时通信能力,广泛应用于视频、音频和数据传输。在WebRTC的实现中,sigslot库用于信号和槽机制,以实现事件驱动的编程模型。WebRTC的sigslot部分主要实现了信号和槽的机制,用于简化组件之间的通信和事件处理。WebRTC使用si......
  • 华为在 2024 年 6 月 21 日的华为开发者大会上,华为终端 BG 软件部总裁龚体正式官宣了
    华为在2024年6月21日的华为开发者大会上,华为终端BG软件部总裁龚体正式官宣了华为自研仓颉编程语言,并发布了HarmonyOSNEXT仓颉语言开发者预览版。仓颉编程语言文件后缀名为.cj,以下是第一个入门代码输出:你好,仓颉。仓颉编程语言的名字来自“仓颉造字”。仓......
  • IMX6ULL开发板spi OLED驱动
    本文是IMX6ULL开发板spiOLED驱动学习笔记,方便后面查看时快速的回顾,而不需要一点点的看视频视频地址:https://www.bilibili.com/video/BV1Yb4y1t7Uj?p=144&spm_id_from=pageDriver&vd_source=1d93d6a5e22d4b223c6c3ac4f5727eb8视频选集:P141-P1501、将文件上传到虚拟机共享目......
  • 基于java+springboot+vue实现的游戏交易系统(文末源码+Lw)256
    摘  要在如今社会上,关于信息上面的处理,没有任何一个企业或者个人会忽视,如何让信息急速传递,并且归档储存查询,采用之前的纸张记录模式已经不符合当前使用要求了。所以,对游戏交易信息管理的提升,也为了对游戏交易信息进行更好的维护,游戏交易系统的出现就变得水到渠成不可缺少。......