VUE+WebPack前端游戏设计:实现外星人的动态下滑特效

本文主要是介绍VUE+WebPack前端游戏设计:实现外星人的动态下滑特效,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在上一节,我们完成了道具在页面上的拖拽特效。当用户在页面底部点击按钮选择一个道具后,鼠标在页面上移动时,一个闪光方块会跟随着鼠标移动,一旦鼠标在页面上单击后,相应的道具就会出现在鼠标点击的地方。

有了道具,本节我们要引入侵略外星人,完成本节代码后,可以得到如下效果:
这里写图片描述

页面上有两个外星人从高空徐徐下落,后面我们会开发代码,让用户拖拽的道具能阻止外星人的下滑,此处看不到动态效果,更详实的演示请点击如下链接:
更详细的讲解和代码调试演示过程,请点击链接

我们看看对应的代码实现。首先我们先创建外星人的类对象,在gamesceneComponent.js中添加如下代码:

enemy () {var enemyObj = new this.cjs.Container()enemyObj.originalSpeed = 0.5enemyObj.deceleration = 0.4enemyObj.hp = 10enemyObj.damageDeal = 10enemyObj.attackSpeed = 100enemyObj.speed = enemyObj.originalSpeedreturn enemyObj},

enemy 函数调用后返回一个cjs的容器对象,这个对象在后面会用来加载外星人对应的图片资源。在函数中配置了外星人对象的一些基本属性,例如speed代表它下落速度的快慢,daageDeal表示外星人的攻击力等。这个函数用于创建外星人的类原型,我们继续添加代码在原型的基础上增加配置,进而实现不同种类的外星人:

enemyTick (enemyObj) {if (this.cjs.Ticker.getPaused()) {return}if (enemyObj.speed < 0) {enemyObj.speed = 0}enemyObj.y += enemyObj.speed},enemyDummy () {var dummy = this.enemy()dummy.addChild(new this.assetsLib.Enemy1())dummy.originalSpeed = 0.3dummy.deceleration = 0.002dummy.hp = 1dummy.speed = dummy.originalSpeedreturn dummy},boss () {var bossEnemy = this.enemy()bossEnemy.addChild(new this.assetsLib.Boss())bossEnemy.originalSpeed = 0.2bossEnemy.deceleration = 0.002bossEnemy.hp = 300bossEnemy.attackSpeed = 50return bossEnemy}

enemyDummy和boss两个函数用来创建两种不同级别的外星人,enemyDummy创建的外形人就是上面图片演示中的宇宙飞船,boss就是上面图片中处于低位的方块机器人。这两个函数分别给enemy返回的容器对象加载不同的图片资源,然后配置不同的属性,例如速度,攻击力等,enemyDummy生成战斗力较弱的外星人,它的速度和攻击力都要比boss生成的外星人低。enemyTick函数用来在游戏的主循环中不断的更改外星人对象的相关属性,在该函数里是修改了外星人的速度属性,于是就形成了外星人在页面上不断从高处往下落的动态效果。

接下来我们要实现的回调函数,在游戏的Tick回调函数里被执行,这样它就能动态的在页面上绘制外星人对象从而实现动画效果,其代码如下:

init () {
...
this.boardLayer = this.Board()
this.stage.addChild(this.boardLayer)
// change here
// 手动添加两个敌人对象
this.addEnemy('enemyDummy')
this.addEnemy('boss')
this.lives = 2
...
},
...
tick () {
...// change herethis.boardTick()},...
// change hereboardTick () {// 从敌人对象数组中取出敌人对象,根据属性更新敌人对象在页面上的位置this.enemyMap = this.create2DArray(this.boardLayer.cols, this.boardLayer.rows)for (var i = 0; i < this.enemyList.length; i++) {var enemy = this.enemyList[i]var rowCol = this.screenToRowCol(enemy.x, enemy.y)this.enemyMap[rowCol.col][rowCol.row] = enemyenemy.col = rowCol.colenemy.row = rowCol.rowthis.enemyTick(enemy)}var len = 0// 当敌人对象落入到页面底部以后将其从页面上删除for (i = 0, len = this.enemyMap.length; i < len; i++) {if (this.enemyMap[i][this.boardLayer.rows] !== undefined) {var bottomEnemy = this.enemyMap[i][this.boardLayer.rows]this.lives -= 1this.removeItem(this.enemyList, bottomEnemy)if (bottomEnemy.parent) {bottomEnemy.parent.removeChild(bottomEnemy)}}}},// change hereaddEnemy (enemyClass) {var sprite = nullswitch (enemyClass) {case 'enemyDummy':sprite = this.enemyDummy()breakcase 'boss':sprite = this.boss()break}this.boardLayer.addChild(sprite)var col = Math.floor(Math.random() * this.boardLayer.cols)var pos = this.rowColToScreen(0, col)sprite.x = pos.xsprite.y = pos.ysprite.row = 0sprite.col = colthis.enemyList.push(sprite)},

addEnemy函数根据传入参数调用相关接口构造外星人对象,如果传入的参数是’dummyEnemy’,那么它调用dummyEnemy接口创建战斗力若的飞船外星人,如果传入参数是’boss’,那么它调用boss接口创建方块机器人,然后它把创建的外星人对象加入到板块图层,同时设置好它在图层中的坐标后,将对象加入到enemyList数组。

在init函数中,我们增加两行代码,通过调用addEnemy接口创建了两个外星人。boardTick函数用来不断的更新外星人对象在页面上的坐标,进而形成外星人在页面上变动的动态效果。它先调用create2DArray函数建立一个二维数组对象,然后根据外星人在页面上的坐标把外星人对象存储在这个二维数组的相应坐标下,然后调用enemyTick修改外星人对象的速度属性进而改变外星人的下降速度,进而改变外星人在页面上的坐标从而营造出外星人对象不断从高处下落的效果。

第二个for循环用于判断外星人的y坐标是否已经超出页面,如果是那么就把它从板块图层里删除,回收对象占据的页面内存。boardTick函数会在Tick函数里调用,Tick函数是游戏主循环不断调用的刷新函数,因此boardTick的调用频率跟Tick一样,于是它一旦执行就可以不断的修改外星人对象的坐标,进而形成下落效果。

下一节,我们将进一步开发更多更复杂的游戏功能,更详细的讲解和代码调试演示过程,请点击链接。

更多技术信息,包括操作系统,编译器,面试算法,机器学习,人工智能,请关照我的公众号:
这里写图片描述

这篇关于VUE+WebPack前端游戏设计:实现外星人的动态下滑特效的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/950065

相关文章

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置(商业库方案)二、Excel 导出 PDF

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并