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

相关文章

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu