首页 - 技术栈

如何攻克房地产网站把做的网站放到互联网上

作者: 五速梦信息网
时间: 2026年03月21日 09:51

当前位置：首页 > news >正文

如何攻克房地产网站,把做的网站放到互联网上,wordpress怎么使用cdn加载图片,中国互联网头部企业一、游戏整体架构设计这款基于ArkUI的鱼类捕食游戏采用了经典的MVC架构思想#xff0c;将游戏逻辑与UI渲染分离#xff0c;主要包含以下核心模块#xff1a; 模型层#xff08;Model#xff09;#xff1a;Fish基类及其子类定义游戏实体视图层#xff08;View#xf… 一、游戏整体架构设计这款基于ArkUI的鱼类捕食游戏采用了经典的MVC架构思想将游戏逻辑与UI渲染分离主要包含以下核心模块模型层ModelFish基类及其子类定义游戏实体视图层Viewplay_6组件负责UI渲染控制层Controller游戏循环、交互逻辑与AI控制这种架构使代码具有良好的可维护性和扩展性下面我们将逐模块解析核心代码。二、Fish基类与继承体系

基类核心属性与功能 class Fish {size: number 0; // 体型决定捕食关系数值越大越能捕食小鱼speed: number 0; // 移动速度与体型负相关positionX: number 0; // 笛卡尔坐标系X轴位置positionY: number 0; // 笛卡尔坐标系Y轴位置health: number 100; // 生命值系统被大鱼攻击会减少scoreValue: number 0; // 被吃掉时提供的分数与体型正相关direction: number 1; // 移动方向1:右-1:左constructor(size: number, speed: number, x: number, y: number,isPlayer: boolean, name: string, direction: number) {this.size size;this.speed speed;this.positionX x;this.positionY y;// 分数价值体型*1.5并取整体现体型与价值的线性关系this.scoreValue Math.floor(size * 1.5);this.direction direction;} } 设计亮点通过size属性构建捕食关系链形成游戏核心玩法scoreValue与size的线性关系设计使游戏进度与视觉反馈一致统一的坐标系统为碰撞检测和移动逻辑提供基础 2. 玩家鱼PlayerFish实现 export class PlayerFish extends Fish {private isDragging: boolean false; // 拖拽状态标记constructor(size: number, speed: number, x: number, y: number) {super(size, speed, x, y, true, Player);}// 边界检测核心逻辑checkBoundary() {const displayClass display.getDefaultDisplaySync();const screenWidth displayClass.width / displayClass.densityPixels;const screenHeight displayClass.height / displayClass.densityPixels;// 四个方向的边界限制确保玩家鱼不会移出屏幕if (this.positionX 0) this.positionX 0;if (this.positionY 0) this.positionY 0;if (this.positionX screenWidth - this.size * 2) {this.positionX screenWidth - this.size * 2;}if (this.positionY screenHeight - this.size * 2) {this.positionY screenHeight - this.size * 2;}} } 交互逻辑解析 checkBoundary方法通过获取屏幕实际尺寸实现玩家鱼的边界限制边界计算考虑了鱼的体型大小size * 2避免鱼体超出屏幕显示范围拖拽控制通过isDragging状态标记与偏移量计算实现精准操作 3. NPC鱼智能行为NPCFish class NPCFish extends Fish {private directionX: number 0; // X轴移动方向分量private directionY: number 0; // Y轴移动方向分量private lastDirectionChange: number 0; // 上次改变方向的时间戳private playerFish: PlayerFish | null null; // 玩家鱼引用constructor(size: number, speed: number, x: number, y: number,playerFish: PlayerFish, direction: number) {super(size, speed, x, y, false, NPC-${Math.random() * 1000}, direction);this.playerFish playerFish;this.resetDirection(); // 初始化移动方向}// 随机重置移动方向private resetDirection() {// X方向根据初始方向确定基本趋势添加随机扰动this.directionX this.direction * (Math.random() * 0.5 0.3);// Y方向完全随机模拟鱼类自然游动this.directionY (Math.random() 0.5 ? 1 : -1) * (Math.random() * 0.3);this.lastDirectionChange Date.now();} } AI行为核心 resetDirection方法通过随机数生成扰动向量使NPC鱼移动更自然lastDirectionChange时间戳控制方向变化频率避免NPC鱼行为过于规律方向向量的X分量与初始方向关联Y分量完全随机形成定向游动随机摆动的效果三、游戏核心循环与逻辑控制
游戏主循环机制 private gameLoop() {if (this.gameOver) return;// 更新所有NPC鱼状态this.npcFishes.forEach(npc {npc.autoMove();});// 检测碰撞与生存状态this.checkCollisions();this.checkPlayerSurvival();// 下一帧循环30ms约33FPSsetTimeout(() {this.gameLoop();}, 30); } 循环逻辑解析采用setTimeout实现递归循环控制游戏更新频率先更新NPC鱼状态再进行碰撞检测确保逻辑顺序正确gameOver状态标记可暂停循环优化资源占用 2. 碰撞检测与捕食逻辑 // 核心碰撞检测算法 private isColliding(fish1: Fish, fish2: Fish): boolean {const dx fish1.positionX - fish2.positionX;const dy fish1.positionY - fish2.positionY;const distance Math.sqrt(dx * dx dy * dy);// 碰撞判定两鱼中心距离小于体型半径和return distance (fish1.size fish2.size) / 2; }// 捕食逻辑实现 private checkCollisions() {const toRemove: number[] [];for (let i 0; i this.npcFishes.length; i) {const npc this.npcFishes[i];// 玩家鱼捕食NPC鱼的条件玩家鱼更大且发生碰撞if (this.playerFish.size npc.size this.isColliding(this.playerFish, npc)) {// 玩家鱼成长体型增加NPC鱼体型的15%this.playerFish.size npc.size * 0.15;// 分数增加获取NPC鱼的scoreValuethis.score npc.scoreValue;// 速度调整体型越大速度越慢最小速度为1this.playerFish.speed Math.max(1, 3 - this.playerFish.size / 20);// 标记NPC鱼为移除toRemove.push(i);}}// 从后往前移除避免索引错误for (let i toRemove.length - 1; i 0; i–) {this.npcFishes.splice(toRemove[i], 1);} } 算法关键点碰撞检测采用欧几里得距离计算时间复杂度O(n)捕食后玩家鱼的成长比例15%与速度衰减公式3 - size/20经过平衡设计toRemove数组收集待移除索引避免遍历时修改数组导致的逻辑错误 3. NPC鱼智能反应逻辑 autoMove() {// 定期改变方向1000-3000ms随机间隔if (Date.now() - this.lastDirectionChange 1000 Math.random() * 2000) {this.resetDirection();}// 基础移动方向向量*速度this.positionX this.directionX * this.speed;this.positionY this.directionY * this.speed;// 边界循环机制if (this.positionX -this.size * 2) {// 从左侧消失右侧重新生成this.positionX this.screenWidth this.size * 2;this.positionY Math.random() * (this.screenHeight - 100) 50;} else if (this.positionX this.screenWidth this.size * 2) {// 从右侧消失左侧重新生成this.positionX -this.size * 2;this.positionY Math.random() * (this.screenHeight - 100) 50;}// 对玩家鱼的智能反应if (this.playerFish) {const playerDistX this.playerFish.positionX - this.positionX;const playerDistY this.playerFish.positionY - this.positionY;const dist Math.sqrt(playerDistX * playerDistX playerDistY * playerDistY);if (this.playerFish.size this.size dist 200) {// 玩家鱼更大时NPC鱼躲避向远离玩家鱼的方向移动this.directionX -playerDistX / dist * 0.3;this.directionY -playerDistY / dist * 0.3;} else if (this.size this.playerFish.size dist 300) {// NPC鱼更大时追逐玩家鱼向玩家鱼方向移动this.directionX playerDistX / dist * 0.3;this.directionY playerDistY / dist * 0.3;}} } AI策略解析边界循环机制实现NPC鱼从屏幕一侧消失后从另一侧出现形成持续流动感200和300作为触发躲避/追逐的距离阈值经过游戏平衡设计向量归一化处理playerDistX/dist确保方向向量长度为1避免速度突变四、UI渲染与用户交互
组件渲染核心逻辑 build() {Stack() {// 背景层Row().backgroundColor(#e2e9ef).width(100%).height(100%)// 信息显示层Text(分数: ${this.score}).fontSize(24).fontColor(#FFFFFF)Text(生命值: ${this.playerFish.health}).backgroundColor(rgba(0, 0, 0, 0.5))// 玩家鱼渲染红色图标可拖拽Text().fontSize(this.playerFish.size).backgroundColor(#FF0000).gesture(PanGesture().onActionStart((event) {// 计算拖拽偏移量确保手势起点精准this.dragOffsetX event.offsetX - (this.playerFish.positionX - (this.playerFish.size * 2) / 2);this.dragOffsetY event.offsetY - (this.playerFish.positionY - (this.playerFish.size * 2) / 2);}))// NPC鱼列表渲染蓝色图标方向动态变化ForEach(this.npcFishes, (npc) {Text(npc.direction 0 ? : ).fontSize(npc.size).backgroundColor(#ADD8E6)})// 游戏结束层半透明遮罩if (this.gameOver) {Column().backgroundColor(rgba(0, 0, 0, 0.7)).children([Text(游戏结束!),Button(重新开始).onClick(() {// 重置游戏状态})])}} } UI设计关键点 Stack布局实现多层叠加效果背景层、信息层、鱼群层、结束层有序排列ForEach组件实现NPC鱼列表的动态渲染每条鱼根据direction属性显示不同图标半透明遮罩rgba(0,0,0,0.7)在游戏结束时覆盖整个屏幕突出显示结束信息 2. 屏幕适配与动态生成 // 屏幕尺寸获取与初始化 aboutToAppear() {try {const displayClass display.getDefaultDisplaySync();this.screenWidth displayClass.width / displayClass.densityPixels;this.screenHeight displayClass.height / displayClass.densityPixels;console.info(屏幕尺寸: ${this.screenWidth}x${this.screenHeight});} catch (error) {// 异常处理获取失败时使用默认值console.error(获取屏幕尺寸失败, error);}// 初始化8条NPC鱼this.initNPCFishes(8);// 启动游戏循环this.gameLoop();// 每1000ms生成新鱼setInterval(() {this.spawnRandomFish();}, 1000); }// NPC鱼动态生成 private spawnRandomFish() {const size Math.floor(Math.random() * 25) 10; // 10-35的随机体型const speed 3 - size / 10; // 速度与体型负相关// 随机从左侧或右侧生成const fromLeft Math.random() 0.5;let x fromLeft ? -size * 2 : this.screenWidth size * 2;const direction fromLeft ? 1 : -1;// Y坐标限制在屏幕中间区域70-430假设屏幕高度500const y Math.floor(Math.random() * (500 - 70)) 70;this.npcFishes.push(new NPCFish(size, speed, x, y, this.playerFish, direction));console.info(生成NPC鱼: 位置(${x},${y}), 方向${direction}, 大小${size}); } 适配与生成逻辑 aboutToAppear生命周期钩子中获取屏幕尺寸确保UI元素正确布局动态生成频率1000ms与初始数量8条经过游戏节奏设计Y坐标限制在中间区域70-430避免NPC鱼生成在屏幕边缘五、附源代码 import { display } from kit.ArkUI;// 优化后的Fish基类增加生命值、分数等属性 class Fish {size: number 0; // 体型决定捕食关系speed: number 0; // 移动速度positionX: number 0; // X坐标positionY: number 0; // Y坐标isPlayer: boolean false; // 是否为玩家控制name: string ; // 角色标识health: number 100; // 生命值可被大鱼攻击扣除scoreValue: number 0; // 被吃掉时提供的分数direction: number 1; // 移动方向1:右, -1:左constructor(size: number,speed: number,x: number,y: number,isPlayer: boolean,name: string,direction: number 1) {this.size size;this.speed speed;this.positionX x;this.positionY y;this.isPlayer isPlayer;this.name name;this.scoreValue Math.floor(size * 1.5); // 体型越大分数越高this.direction direction;} }// 玩家鱼增加拖拽控制逻辑 export class PlayerFish extends Fish {private isDragging: boolean false; // 是否正在拖拽constructor(size: number, speed: number, x: number, y: number) {super(size, speed, x, y, true, Player);}// 设置拖拽状态setDragging(isDragging: boolean) {this.isDragging isDragging;}// 获取拖拽状态getIsDragging(): boolean {return this.isDragging;}// 边界检测优化版checkBoundary() {let displayClass: display.Display display.getDefaultDisplaySync();const screenWidth displayClass.width / displayClass.densityPixels;const screenHeight displayClass.height / displayClass.densityPixels;if (this.positionX 0) this.positionX 0;if (this.positionY 0) this.positionY 0;if (this.positionX screenWidth - this.size * 2) {this.positionX screenWidth - this.size * 2;}if (this.positionY screenHeight - this.size * 2) {this.positionY screenHeight - this.size * 2;}} }// NPC鱼增加AI行为策略 class NPCFish extends Fish {private directionX: number 0;private directionY: number 0;private lastDirectionChange: number 0;private playerFish: PlayerFish | null null;constructor(size: number,speed: number,x: number,y: number,playerFish: PlayerFish,direction: number) {super(size, speed, x, y, false, NPC-\({Math.floor(Math.random() * 1000)}, direction);this.playerFish playerFish;this.resetDirection();}// 重置移动方向随机生成private resetDirection() {// 根据初始方向设置基础X方向this.directionX this.direction * (Math.random() * 0.5 0.3); // 增大X方向速度范围// 随机Y方向this.directionY (Math.random() 0.5 ? 1 : -1) * (Math.random() * 0.3);this.lastDirectionChange Date.now();}// AI自动移动包含躲避与追逐逻辑autoMove() {// 定期改变移动方向模拟自然游动if (Date.now() - this.lastDirectionChange 1000 Math.random() * 2000) {this.resetDirection();}// 基础移动this.positionX this.directionX * this.speed;this.positionY this.directionY * this.speed;// 边界检测优化为从一侧消失后从另一侧出现let displayClass: display.Display display.getDefaultDisplaySync();const screenWidth displayClass.width / displayClass.densityPixels;const screenHeight displayClass.height / displayClass.densityPixels;// 确保鱼在屏幕内生成和移动if (this.positionX -this.size * 2) {// 从左侧消失重新出现在右侧this.positionX screenWidth this.size * 2;this.positionY Math.random() * (screenHeight - 100) 50;} else if (this.positionX screenWidth this.size * 2) {// 从右侧消失重新出现在左侧this.positionX -this.size * 2;this.positionY Math.random() * (screenHeight - 100) 50;}if (this.positionY 0) {this.directionY * -1;} else if (this.positionY screenHeight) {this.directionY * -1;}// 特殊行为NPC鱼对玩家鱼的反应if (this.playerFish this.playerFish.size this.size) {// 玩家鱼更大时NPC鱼尝试躲避const playerDistX this.playerFish.positionX - this.positionX;const playerDistY this.playerFish.positionY - this.positionY;const dist Math.sqrt(playerDistX * playerDistX playerDistY * playerDistY);if (dist 200) { // 当玩家鱼靠近时// 向远离玩家鱼的方向移动this.directionX -playerDistX / dist * 0.3;this.directionY -playerDistY / dist * 0.3;}} else if (this.playerFish this.size this.playerFish.size) {// NPC鱼更大时尝试追逐玩家鱼const playerDistX this.playerFish.positionX - this.positionX;const playerDistY this.playerFish.positionY - this.positionY;const dist Math.sqrt(playerDistX * playerDistX playerDistY * playerDistY);if (dist 300) { // 当玩家鱼在范围内时// 向玩家鱼方向移动this.directionX playerDistX / dist * 0.3;this.directionY playerDistY / dist * 0.3;}}} }Component export struct play_6 {State playerFish: PlayerFish new PlayerFish(30, 3, 150, 300); // 玩家鱼初始位置State npcFishes: ArrayNPCFish [];State score: number 0;State gameOver: boolean false;State isDragging: boolean false; // 拖拽状态State dragOffsetX: number 0; // 拖拽偏移量XState dragOffsetY: number 0; // 拖拽偏移量YState screenWidth: number 800; // 屏幕宽度State screenHeight: number 400; // 屏幕高度// 初始化游戏aboutToAppear() {console.info(游戏初始化玩家鱼位置: this.playerFish.positionX , this.playerFish.positionY);// 获取屏幕尺寸try {let displayClass: display.Display display.getDefaultDisplaySync();this.screenWidth displayClass.width / displayClass.densityPixels;this.screenHeight displayClass.height / displayClass.densityPixels;console.info(屏幕尺寸: \){this.screenWidth}x${this.screenHeight});} catch (error) {console.error(获取屏幕尺寸失败使用默认值, error);}this.initNPCFishes(8);this.gameLoop(); // 启动游戏循环// 定时生成新鱼setInterval(() {this.spawnRandomFish();}, 1000);}// 初始化NPC鱼private initNPCFishes(count: number) {for (let i 0; i count; i) {this.spawnRandomFish();}}// 随机生成NPC鱼从左右两侧private spawnRandomFish() {const size Math.floor(Math.random() * 25) 10;const speed 3 - size / 10;// 随机决定从左侧还是右侧生成const fromLeft Math.random() 0.5;let x: number, direction: number;if (fromLeft) {// 从左侧生成向右移动x -size * 2; // 左侧屏幕外direction 1;} else {// 从右侧生成向左移动x this.screenWidth size * 2; // 右侧屏幕外direction -1;}// 确保Y坐标在屏幕中间区域const y Math.floor(Math.random() * (500 - 70)) 70;this.npcFishes.push(new NPCFish(size, speed, x, y, this.playerFish, direction));console.info(生成NPC鱼: 位置(${x},${y}), 方向${direction}, 大小${size});}// 游戏主循环private gameLoop() {if (this.gameOver) return;// 更新NPC鱼状态this.npcFishes.forEach(npc {npc.autoMove();// 调试输出NPC鱼位置console.info(NPC鱼位置: ${npc.positionX},\({npc.positionY});});// 检查碰撞和生存状态this.checkCollisions();this.checkPlayerSurvival();// 下一帧setTimeout(() {this.gameLoop();}, 30);}// 碰撞检测与捕食逻辑private checkCollisions() {const toRemove: number[] [];for (let i 0; i this.npcFishes.length; i) {const npc this.npcFishes[i];// 玩家鱼捕食NPC鱼if (this.playerFish.size npc.size this.isColliding(this.playerFish, npc)) {// 玩家鱼成长this.playerFish.size npc.size * 0.15;this.score npc.scoreValue;// 更新玩家鱼速度体型越大速度越慢this.playerFish.speed Math.max(1, 3 - this.playerFish.size / 20);// 标记NPC鱼为移除toRemove.push(i);}}// 从后往前移除避免索引问题for (let i toRemove.length - 1; i 0; i--) {this.npcFishes.splice(toRemove[i], 1);}}// 检测玩家鱼是否被吃掉private checkPlayerSurvival() {for (const npc of this.npcFishes) {if (npc.size this.playerFish.size this.isColliding(this.playerFish, npc)) {// 玩家鱼生命值减少this.playerFish.health - 20;if (this.playerFish.health 0) {// 游戏结束this.gameOver true;}}}}// 碰撞检测函数private isColliding(fish1: Fish, fish2: Fish): boolean {const dx fish1.positionX - fish2.positionX;const dy fish1.positionY - fish2.positionY;const distance Math.sqrt(dx * dx dy * dy);return distance (fish1.size fish2.size) / 2;}build() {Stack() {// 背景Row().backgroundColor(#e2e9ef).width(100%).height(100%)// 分数显示Text(分数: \){this.score}).fontSize(24).fontColor(#FFFFFF).position({ x: 20, y: 20 })// 玩家鱼拖拽控制Text().fontSize(this.playerFish.size).width(this.playerFish.size * 2).height(this.playerFish.size * 2).borderRadius(this.playerFish.size).backgroundColor(#FF0000).position({x: this.playerFish.positionX - (this.playerFish.size * 2) / 2,y: this.playerFish.positionY - (this.playerFish.size * 2) / 2}).gesture(PanGesture().onActionStart((event: GestureEvent) {// 开始拖拽计算偏移量this.isDragging true;this.dragOffsetX event.offsetX - (this.playerFish.positionX - (this.playerFish.size * 2) / 2);this.dragOffsetY event.offsetY - (this.playerFish.positionY - (this.playerFish.size * 2) / 2);}).onActionUpdate((event: GestureEvent) {// 拖拽中更新位置if (this.isDragging) {this.playerFish.positionX event.offsetX - this.dragOffsetX;this.playerFish.positionY event.offsetY - this.dragOffsetY;this.playerFish.checkBoundary();}}).onActionEnd(() {// 拖拽结束this.isDragging false;}))// NPC鱼修复显示问题ForEach(this.npcFishes, (npc: NPCFish) {Text(npc.direction 0 ? : ).fontSize(npc.size).width(npc.size * 1.5).height(npc.size * 1.5).borderRadius(npc.size * 0.75).backgroundColor(#ADD8E6).position({x: npc.positionX - (npc.size * 1.5) / 2,y: npc.positionY - (npc.size * 1.5) / 2})})// 游戏结束提示if (this.gameOver) {Column() {Text(游戏结束!).fontSize(48).fontWeight(FontWeight.Bold).fontColor(#FF0000)Text(最终分数: ${this.score}).fontSize(32).fontColor(#FFFFFF)Button(重新开始).onClick(() {this.playerFish new PlayerFish(30, 3, 150, 300);this.npcFishes [];this.score 0;this.gameOver false;this.initNPCFishes(8);})}.width(80%).height(30%).backgroundColor(rgba(0, 0, 0, 0.7)).borderRadius(20).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).position({x: (this.screenWidth - this.screenWidth * 0.8) / 2,y: (this.screenHeight - this.screenHeight * 0.3) / 2})}}.width(100%).height(100%)} }