王者荣耀防御塔如何开发！新手小白做游戏开发采坑经过。phaser前端游戏框架

好嘞，游戏开发框架是js 开发的网页小游戏！
phaser这个框架。好我们先上图！
在这里插入图片描述

目前大概是这么一个样子。
然后防御塔功能呢。简单的说就是当人物进去的时候打他。人物扣血。
我们的小人物是这样的代码

遇到的问题如下；

小白刚开始开发游戏内存使用不当把浏览器给撑爆了。
人物进入防御塔后持续性的扣血。不是固定间隔打一下。
后面倒是都解决了；

人物的类

人物的类大概是这样的，有这个移动速度，有他底下的小角色，有他的health健康。当人物进入防御塔的时候要进行扣血。

export default class Player extends Phaser.GameObjects.Container {face: CircleMaskImage;static MinSpeed: number = 300;speed: number = Player.MinSpeed;user: User | undefined;children: Player[] = [];speedCoefficient: number = 0;sizeCoefficient: number = 0;line?: Phaser.GameObjects.Line;flash: Phaser.Tweens.Tween;flashStar: Phaser.GameObjects.Image;health:numberconstructor(public scene: Phaser.Scene,x: number,y: number,public team: Team,public parent?: Player) {super(scene, x, y);this.face = new CircleMaskImage(scene, 0, 0, "noFace").setOrigin(0);this.health = 500;this.add(this.face);this.scene.add.existing(this);this.scene.physics.add.existing(this);this.Body.setCollideWorldBounds(true);this.Body.setBounce(1, 1);this.setDepth(5000);if (parent) {this.createOrUpdateLine();}const vec = this.scene.physics.velocityFromAngle(Math.random() * 360,this.speed);this.Body.setVelocity(vec.x, vec.y);this.setFace("noFace");this.flashStar = this.scene.add.image(Game.BlockSize / 2, Game.BlockSize / 2, "star").setScale(2).setAlpha(0);this.add(this.flashStar);this.flash = this.scene.add.tween({targets: this.flashStar,duration: 100,scale: { from: 0, to: 2 },alpha: { from: 0, to: 1 },yoyo: 1,hold: 100,loop: 0,});this.flash.stop();}

简单介绍phaser框架

  1. 基于浏览器技术
    Phaser 构建在现代 Web 技术之上，主要依赖于以下两个核心浏览器 API：

Canvas API：这是一个用于在网页上绘制图形的标准 API，允许开发者使用 JavaScript 创建动态、可交互的 2D 图像。当浏览器不支持或用户选择禁用 WebGL 时，Phaser 会退回到使用 Canvas 进行渲染。

WebGL API：作为一种更高级的图形接口，WebGL 允许在浏览器中直接操作 GPU（图形处理器），实现硬件加速的 2D/3D 图形渲染。对于性能要求较高的游戏场景，Phaser 利用 WebGL 提供更流畅、高效的视觉表现。
2… 游戏对象与组件系统
haser 提供了一套丰富的游戏对象体系，如精灵（Sprites）、组（Groups）、文本（Text）、动画（Animations）、粒子（Particles）等，这些都是构成游戏场景的基本元素。这些对象通常包含物理属性（如位置、速度、旋转等）、交互行为（如碰撞检测、输入响应）以及可定制的视觉样式。游戏对象之间可以组成层次结构或分组管理，便于进行批量操作和优化渲染。
3更新与渲染循环
Phaser 通过维护一个核心的游戏循环来驱动游戏逻辑的执行。这个循环包括两个主要阶段：

Update：在这个阶段，Phaser 会按照每帧（通常为1/60秒）的频率更新所有游戏对象的状态。这包括处理用户输入、更新对象的位置、执行游戏逻辑（如AI、计时器、物理模拟等）。开发者可以通过定义自己的 update 方法来插入自定义的游戏逻辑代码。

Render：在更新阶段完成后，Phaser 进入渲染阶段。此时，Pixi.js 被调用来重新绘制整个游戏画面，确保屏幕上的所有游戏对象都反映最新的状态。Phaser 会自动处理视口变换、层级排序等，确保正确的渲染顺序。

由update这个函数开始。

 this.teams.forEach((team) => {team.players.children.each((player) => player.update());team.blocks.children.each((block) => block.update());//更新防御塔功能.team.update();});const currentTime = performance.now(); // 或者使用其他适合您游戏环境的当前时间获取方式// 更新防御塔功能，每 1 秒更新一次if (currentTime - this._lastTowerUpdateTime >= 2000 ) {this.teams.forEach((team) => {if (team.isDefensiveTower) {// console.log("更新",this._lastTowerUpdateTime)team.update();}});this._lastTowerUpdateTime = currentTime;}

会实时的更新。
就是写了一个函数然后去实时的计算防御塔的攻击范围里面有没有人。

防御塔类

    //防御塔需要的变量;不要每次newthis.rangeCollider = new Phaser.Geom.Circle(332, 662, this.attackRange);this.attackRangeGraphics = this.scene.add.graphics({fillStyle: { color: 4790 }, // 初始颜色});this.attackRangeGraphics.fillCircle(332, 662, this.attackRange);

找寻附近的玩家

 /*** 实现步骤估计得获取到所有的player，然后计算一下距离;，然后计算伤害。* @returns 获取防御塔附近的player*/private getNearbyPlayers(): Player[] {const nearbyPlayers: Player[] = [];// 创建一个临时的圆形碰撞体，代表防御塔的攻击范围(坐标加上范围)// const rangeCollider = new Phaser.Geom.Circle(332, 662, this.attackRange);// const attackRangeGraphics = this.scene.add.graphics({//   fillStyle: { color: 100}, // 初始颜色// });// attackRangeGraphics.fillCircle(332, 662, this.attackRange);this.players.getChildren().forEach((child: Phaser.GameObjects.GameObject) => {if (child instanceof Player) {const player = child as Player;const playerCenter = player.getCenter(); if (Phaser.Geom.Circle.Contains(this.rangeCollider, playerCenter.x, playerCenter.y)) {nearbyPlayers.push(player);}}});return nearbyPlayers;}

对所有附近的玩家扣血

//给team添加了攻击的方法。update(): void {const nearbyPlayers = this.getNearbyPlayers(); // 获取处于攻击范围内的玩家列表// console.log("nearbyPlayers",nearbyPlayers)// nearbyPlayers.forEach((player) => {//   console.log("nearbyPlayers",nearbyPlayers.length)//   this.attack(player); // 对每个进入范围的玩家发起攻击// });nearbyPlayers.forEach((player) => {if (!this._lastAttackedPlayers.has(player)) {console.log("nearbyPlayers",nearbyPlayers.length)this.attack(player); // 对每个未被攻击过的玩家发起攻击this._lastAttackedPlayers.add(player);}});// 清理已离开攻击范围的玩家，防止缓存集合无限制增长this._lastAttackedPlayers.forEach((player) => {if (!nearbyPlayers.includes(player)) {this._lastAttackedPlayers.delete(player);}});}

玩家扣血的函数

attack(player: Player): void {const damage = this.calculateDamage(); // 计算防御塔造成的伤害player.takeDamage(damage); // 调用玩家的takeDamage方法，减少其生命值}

目前待改善

这个防御塔目前来说每秒都会好几个人物扣血。没有类似的抗塔机制。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/1605.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++从入门到精通——模板

C++从入门到精通——模板

模板 前言一、泛型编程二、函数模板函数模板的概念函数模板格式示例 函数模板的原理函数模板的实例化隐式实例化显式实例化示例 auto做模板函数的返回值模板参数的匹配原则总结 三、类模板类模板的定义格式类模板的实例化 前言 C模板是C语言中的一种泛型编程技术，可…
阅读更多...
服务器渲染技术(JSPELJSTL)

服务器渲染技术(JSPELJSTL)

目录 前言 一.JSP 1.基本介绍 3.page指令(常用) 4.JSP三种常用脚本 4.1 声明脚本 <%! code %> 4.2 表达式脚本 <% code %> 4.3 代码脚本 <% code %> 4.4 注释 <%-- 注释 --%> 5. JSP 内置对象 5.1 基本介绍 5.2 九个内置对象 6.JSP域对象 二…
阅读更多...
Ubuntu20.04 ISAAC SIM仿真下载使用流程

Ubuntu20.04 ISAAC SIM仿真下载使用流程

机器&#xff1a;华硕天选X2024 显卡&#xff1a;4060Ti ubuntu20.04 安装显卡驱动版本&#xff1a;525.85.05 参考&#xff1a; What Is Isaac Sim? — Omniverse IsaacSim latest documentationIsaac sim Cache 2023.2.3 did not work_isaac cache stopped-CSDN博客 Is…
阅读更多...
linux 安装openjdk-1.8

linux 安装openjdk-1.8

安装命令 yum install java-1.8.0-openjdk-1.8.0.262.b10-1.el7.x86_64查看安装路径 find / -name java 默认的安装路径 /usr/lib/jvm 查看到jre 以及java-1.8.0-openjdk-1.8.0.262.b10-1.el7.x86_64 配置环境变量 vim /etc/profile 添加的内容 export JAVA_HOME/usr/li…
阅读更多...
每日一题：地下城游戏

每日一题：地下城游戏

恶魔们抓住了公主并将她关在了地下城 dungeon 的 右下角 。地下城是由 m x n 个房间组成的二维网格。我们英勇的骑士最初被安置在 左上角 的房间里&#xff0c;他必须穿过地下城并通过对抗恶魔来拯救公主。 骑士的初始健康点数为一个正整数。如果他的健康点数在某一时刻降至 0…
阅读更多...
基于非线性控制策略的电力电子电路——DC-DC电路的3种滑模控制器【MATLAB/simulink】

基于非线性控制策略的电力电子电路——DC-DC电路的3种滑模控制器【MATLAB/simulink】

第一种&#xff0c;滞环滑模控制器Buck电路 在滑模控制系统中&#xff0c;采用滞环技术&#xff0c;直接将切换函数转换成开关控制信号&#xff0c;滞环技术被看做一种降低系统结构的切换频率的调制方法&#xff0c;业界也把基于滞环滑模技术实现的滑模控制称为直接滑模控制技…
阅读更多...
分类网络总结

分类网络总结

欢迎大家订阅我的专栏一起学习共同进步&#xff0c;主要针对25届应届毕业生 祝大家早日拿到offer&#xff01; lets go http://t.csdnimg.cn/dfcH3 目录 4. 经典分类网络与发展 4.1 AlexNet 4.2 VGGNet 4.3 GoogLeNet Inception 4.4 ResNet 4.5 DenseNet 4.6 MobileN…
阅读更多...
Python基础04-操作系统中的文件与目录操作

Python基础04-操作系统中的文件与目录操作

在与操作系统交互时&#xff0c;我们经常需要执行文件和目录的操作。Python提供了丰富的库来帮助我们完成这些任务。以下是一些常见的操作&#xff0c;以及如何使用Python代码来实现它们。 1. 导航文件路径 在不同的操作系统中&#xff0c;文件路径的格式可能不同。Python的o…
阅读更多...
提取出图像的感兴趣区域

提取出图像的感兴趣区域

这是我们的原图像 将图像的数值统计后进行条形图展示 import matplotlib.pyplot as plt from PIL import Image import numpy as np# 图像路径 image_path r"D:\My Data\Figure\OIP.jpg"# 打开图像 image Image.open(image_path)# 将图像转换为numpy数组 image_ar…
阅读更多...
关于实验报告添加题注为0以及页面断层的解决办法

关于实验报告添加题注为0以及页面断层的解决办法

1.事情起源于最近在写实验报告和课设说明书时出现图的题注是图0-1等不遵循设置的章节标号&#xff0c;于是我在查询和个人尝试后发现必须设置多级编号并且自定义设置对应的样式为标题几 另外注意设置后必须题注也要设置对应的样式&#xff0c;否则还是0-1&#xff0c;不用编辑域…
阅读更多...
全球30米100%水陆覆盖高程

全球30米100%水陆覆盖高程

数据是GIS的血液。 熟悉水经注的朋友都应该知道&#xff0c;我们可以为大家提供全球30米和全球12.5米的高程数据&#xff0c;但这两种数据都无法达到全球覆盖。 你可以从《40TB全球12.5米高程DEM原始数据》与《700G全球30米高程DEM原始数据》等文中了解这两种数据的详细说明。…
阅读更多...
git简介及安装

git简介及安装

Git | Git简介与安装 文章目录 Git | Git简介与安装一、Git简介二、Git安装Linux-centosLinux-ubuntu 一、Git简介 存在需求&#xff1a;对于一个文档&#xff0c;由于编写思路或者当前文档丢失&#xff0c;可能存在想要历史版本的需求&#xff0c;并且需要知道每个版本都修改了…
阅读更多...
忘记宝塔账号密码 如何解决

忘记宝塔账号密码 如何解决

cd /www/server/panel && btpython tools.py panel testpasswd参考 https://www.bt.cn/bbs/thread-1172-1-1.html
阅读更多...
(C++) 树状数组

(C++) 树状数组

目录 一、介绍 二、一维树状数组 2.1 区间长度 2.2 前驱和后继 2.3 查询前缀和 2.4 点更新 三、一维数组的实现 3.1 区间长度函数 3.2 前缀和 3.3 插入/更新 3.4 封装成类 一、介绍 树状数组&#xff08;Binary Indexed Tree&#xff0c;BIT&#xff09;&#xff0c;又称为 …
阅读更多...
39. UE5 RPG角色释放技能时转向目标方向

39. UE5 RPG角色释放技能时转向目标方向

在上一篇&#xff0c;我们实现了火球术可以向目标方向发射&#xff0c;并且还可以按住Shift选择方向进行攻击。技能的问题解决&#xff0c;现在人物释放技能时&#xff0c;无法朝向目标方向&#xff0c;接下来我们解决人物的问题。 实现思路&#xff1a; 我们将使用一个官方的…
阅读更多...
大一考核题解

大一考核题解

在本篇中&#xff0c;将尽力使用多种解法&#xff0c;来达到一题多练的效果。 1&#xff1a; 1.原题链接&#xff1a; 238. 除自身以外数组的乘积 - 力扣&#xff08;LeetCode&#xff09; 这道题首先一眼肯定想到拿整体的积除以当前元素&#xff0c;将结果作为ans&#xff0c;…
阅读更多...
Redis的主从复制

Redis的主从复制

引入&#xff1a;分布是系统涉及到一个非常关键的问题&#xff1a;单点问题&#xff08;如果摸个服务器程序&#xff0c;只有一个节点&#xff08;只搞一个物理服务器&#xff0c;来部署这个服务器程序&#xff09;会出现&#xff1a; 1.可用性问题&#xff0c;如果这个机器挂…
阅读更多...
轧铝机液压站比例阀控制器

轧铝机液压站比例阀控制器

轧铝机液压站是用于铝材轧制过程中提供动力和控制的系统&#xff0c;它对于确保铝材的质量至关重要。轧铝机液压站通常包含以下几个关键组成部分&#xff1a; 液压泵&#xff1a;为系统提供压力油&#xff0c;是液压系统的动力源。 控制阀组&#xff1a;包括方向控制阀、压力控…
阅读更多...
由于磁盘空间不够导致服务无法访问的情况

由于磁盘空间不够导致服务无法访问的情况

昨天服务出现了一些“小状况”&#xff0c;这里做下记录&#xff0c;为了以后类似的问题&#xff0c;可以作为参考。 具体情况是&#xff0c;如下&#xff1a; 本来一直访问都好好的服务突然间访问不到了&#xff0c;首先确定了下服务器上的 docker 服务是否正常运行。确认正…
阅读更多...
【触摸案例-触摸事件介绍 Objective-C语言】

【触摸案例-触摸事件介绍 Objective-C语言】

一、触摸事件 1.接下来，我们来说这个，触摸事件， iOS当中的事件，可以分为三大类： 1）触摸事件 2）加速计事件 3）远程控制事件 事件呢，这个里面呢，使用app的过程当中呢，产生各种各样的事件，事件呢，分为三大类，在iOS里边儿啊，分为三大类，首先，有一个叫做触摸事…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023