一、案例介绍1.1 案例流程本次项目为期两周，依托华为开发者空间及华为云码道（CodeArts）代码智能体，完成"单词闯关"Web应用的全流程开发。具体日程安排如下：          1.2  适用对象                        ·高校学生                       ·个人开发者        1.3 资源总览                              本案例预计花费39元（使用训练营代金券）  资源名称规格单价（元） 华为云码道代码智能体基础版39         二、环境和资源准备华为云码道（CodeArts）代码智能体：集代码大模型、AI IDE、Code Agent为一体的智能编码产品。具  备强大的需求理解、架构设计和代码生成能力，支持智能体模式自动规划并执行复杂开发任务。本案例中作为开发平台，通过对话式交互快速完成固定资产管理系统的需求分析、架构设计和SDD文档生成。AI IDE华为云码道开发环境搭建本次实习使用华为开发者空间提供的云开发环境（ARM | 4 vCPUs 8GB | Ubuntu 24.04 Server定制版），配合华为云码道（CodeArts）代码智能体进行辅助开发。CodeArts代码智能体能够根据自然语言描述自动生成代码、定位Bug、解释代码逻辑，显著提升了开发效率。项目采用纯前端技术栈，无需后端服务器，使用HTML5 + CSS3 + JavaScript（ES6）开发，数据存储使用浏览器localStorage，无需数据库依赖。项目通过本地文件系统直接运行，使用浏览器打开index.html即可体验完整功能。CodeArts辅助开发工具在整个开发过程中，华为云码道（CodeArts）代码智能体发挥了关键作用，主要体现在以下几个方面：（1）需求理解与架构设计：通过自然语言描述项目需求（"2D背单词闯关游戏，结合搜打撤地图玩法"），CodeArts能够快速理解需求并生成项目目录结构、模块划分建议。例如，它建议将项目拆分为data（数据层）、js（逻辑层）、css（样式层）、assets（资源层）四个核心目录，实践证明这一划分清晰合理。（2）代码生成与迭代：CodeArts根据功能描述直接生成模块代码。以地图生成模块为例，描述"动态生成10×10地图，30%概率生成墙壁，BFS验证起点到终点可达性"后，CodeArts生成了完整的generateMap()函数，包含墙壁随机放置、BFS可达性检测、不可达时逐步移除墙壁等逻辑。后续迭代中，发现直接清空所有墙壁会导致无墙地图的问题，CodeArts准确识别了这一Bug并修复为逐步移除策略。（3）Bug定位与修复：开发过程中遇到多个典型Bug，CodeArts均能快速定位根因。例如：箱子搜索动画期间拖拽物品会重复触发事件监听器导致物品复制，CodeArts识别出setupBoxDrop()被重复调用的问题，引入boxDropInitialized标志防止重复绑定；背包中同ID物品的removeItem()会误删所有实例，CodeArts提出使用唯一实例ID（uid）替代直接存储itemId的方案，从根本上解决了冲突问题。（4）性能优化：当页面出现卡顿时，CodeArts分析出两个性能瓶颈——render()函数在按键长按时每秒触发30-40次全量重绘，以及墙壁查找使用Array.some()导致O(n)复杂度。它给出了requestAnimationFrame帧节流和Set数据结构优化的解决方案，有效改善了页面流畅度。三、项目介绍3.1 项目简介本次开发采用HTML5 Canvas（地图渲染）+ Web前端技术（HTML/CSS/JS）+ 华为云码道CodeArts代码智能体（辅助开发），这是一款将英语词汇学习与2D地图探索游戏相结合的Web应用，采用"搜打撤"（搜索-打击-撤离）玩法，让背单词变得有趣且富有挑战性。以下是核心功能：核心功能说明背单词支持雅思/GRE两套词书，Fisher-Yates算法随机打乱顺序，浏览式学习，完成当日任务后解锁地图游戏地图游戏10×10动态生成地图，BFS保证可达性，WASD操控角色移动，探索保险箱、走向撤离点双保险箱普通保险箱（直接搜索开启）与密码保险箱（需答5道单词题，正确率≥60%方可开启，稀有度更高）搜索动画打开保险箱时物品逐个搜索揭示，灰色底+旋转加载图标，每800ms揭示一个背包系统6×6网格，支持不同尺寸物品（1×1到3×3），拖拽拾取/丢弃/重排，双击自动拾取，碰撞检测收藏品70种收藏品（紫色普通29种/金色稀有30种/红色传说11种），带PNG图片和slots二维数组描述形状仓库展示撤离成功后收藏品持久化到仓库，按稀有度分类展示，未收集的显示"???"统计今日学习数、连续学习天数、总计学习数操作流程1. 在"设置"页选择词书和每日数量2. 在"背单词"页完成当日学习任务3. 进入"地图游戏"，WASD移动角色探索地图4. 走到保险箱自动打开搜索界面，拖拽物品到背包拾取5. 走到密码保险箱需答题开锁，获取更高稀有度物品6. 到达EXIT撤离点完成游戏，背包物品存入仓库3.2 系统架构设计本应用采用模块化前端架构，各模块职责清晰、松耦合协作。系统架构如下：├── index.html          // 主页面，含所有模态框HTML结构├── css/│   └── style.css       // 全局样式（网格/拖拽/搜索动画/稀有度配色）├── js/│   ├── data.js         // 数据加载模块（fetch JSON词库与收藏品）│   ├── storage.js      // localStorage持久化管理│   ├── settings.js     // 设置模块（词书选择/每日数量）│   ├── learn.js        // 背单词模块（Fisher-Yates随机/浏览式学习）│   ├── game.js         // 地图游戏核心（地图生成/移动/保险箱/答题）│   ├── backpack.js     // 背包系统（6×6网格/uid实例管理/碰撞检测/拖拽）│   ├── warehouse.js    // 仓库展示模块│   ├── stats.js        // 统计模块│   └── app.js          // 主应用逻辑（页面导航/模块初始化）├── data/│   ├── ielts.json      // 雅思词库（100词）│   ├── gre.json        // GRE词库（100词）│   └── collections.json // 收藏品数据（70项，含slots二维数组）└── assets/             // 70个PNG收藏品图片 + 2个保险箱图片数据流设计：词库数据通过fetch异步加载，收藏品数据包含slots二维数组描述物品在背包网格中的占用形状。游戏状态（地图、背包、保险箱）在单次游戏会话中维护，撤离成功后背包物品通过localStorage持久化到仓库。3.3 核心功能实现本应用"单词闯关"成功将英语词汇学习与2D地图探索游戏相结合，通过"搜打撤"玩法（搜索保险箱→答题开锁→拾取收藏品→安全撤离）将枯燥的背单词过程转化为有趣的游戏体验。核心技术方案包括：（1）模块化前端架构：9个JS模块各司其职，数据层（data.js/storage.js）与逻辑层（learn.js/game.js/backpack.js）分离，便于维护和扩展。（2）uid唯一实例ID机制：解决了背包系统中同ID物品共存的核心难题，是整个背包系统稳定运行的基石。（3）BFS地图生成算法：保证地图可达性的同时保留足够的墙壁和障碍，提供良好的探索体验。（4）双保险箱设计：普通保险箱与密码保险箱的差异化管理（开启方式、稀有度权重、物品数量）增加了游戏策略深度。（5）华为云码道（CodeArts）代码智能体辅助开发：从需求理解到Bug修复，CodeArts贯穿开发全流程，显著提升了开发效率和代码质量。3.2.1 背单词模块背单词模块采用浏览式学习交互，用户点击"记住了"按钮依次浏览当日单词。单词顺序使用Fisher-Yates洗牌算法随机打乱，确保每次学习顺序不同。词库支持雅思和GRE两套词书，切换词书时自动重置今日单词列表。完成当日学习任务后方可进入地图游戏，将学习与游戏形成正向激励闭环。以下是随机词序的代码模块：// learn.js — Fisher-Yates洗牌shuffleArray(array) {    for (let i = array.length - 1; i > 0; i--) {        const j = Math.floor(Math.random() * (i + 1));        [array[i], array[j]] = [array[j], array[i]];    }    return array;}3.2.2 地图游戏模块地图游戏是本应用的核心玩法，采用"搜打撤"（搜索-打击-撤离）模式。关键技术点包括：（1）动态地图生成：10×10网格，30%概率随机生成墙壁。使用BFS（广度优先搜索）验证起点(0,0)到终点(9,9)的可达性，若不可达则逐步移除墙壁直至可达，避免直接清空所有墙壁导致地图无遮挡。（2）保险箱系统：地图上分布两种保险箱——普通保险箱（灰色，直接搜索开启）和密码保险箱（金棕色，需答5道单词题且正确率≥60%方可开启）。密码保险箱的收藏品稀有度更高（权重：普通40/稀有45/传说15 vs 普通60/稀有30/传说10），且物品数量更多（3-4个 vs 2-3个）。保险箱开启后保留在地图上，玩家可返回拾取遗漏物品。（3）搜索动画：打开保险箱时，物品逐个"搜索"呈现——未搜索的物品显示灰色底色加白色旋转加载图标，每800ms揭示一个物品，搜索完成后才可拖拽拾取。这一设计增强了游戏的沉浸感和期待感。以下是核心代码：// game.js — 地图生成核心代码generateMap() {    const size = 10;    this.state.map = { size: size };     const walls = new Set();    for (let y = 0; y < size; y++) {        for (let x = 0; x < size; x++) {            if (Math.random() < 0.3 && !(x === 0 && y === 0)) {                walls.add(`${x},${y}`);            }        }    }     const exit = { x: size - 1, y: size - 1 };    walls.delete(`${exit.x},${exit.y}`);     // BFS验证可达性，不可达则逐步移除墙壁    let attempts = 0;    while (!this.isReachable(0, 0, exit.x, exit.y, walls, size) && attempts < 200) {        const wallArray = Array.from(walls);        if (wallArray.length === 0) break;        const randomWall = wallArray[Math.floor(Math.random() * wallArray.length)];        walls.delete(randomWall);        attempts++;    }     // 在可达区域随机放置保险箱    const reachable = this.getReachableCells(0, 0, walls, size);    const normalBoxCount = 3 + Math.floor(Math.random() * 3);    const quizBoxCount = 2 + Math.floor(Math.random() * 2);    // ... 放置逻辑省略     this.state.walls = Array.from(walls).map(key => {        const [x, y] = key.split(',').map(Number);        return { x, y };    });    this.state.boxes = boxes;    this.state.exit = exit;    this.buildWallSet();  // 预构建Set用于O(1)查找}3.2.3 背包系统背包系统是本应用最复杂的模块，参考"三角洲行动"的物品管理系统设计，关键技术难点及解决思路如下：（1）网格碰撞检测：背包为6×6网格，每个收藏品有不同尺寸（1×1到3×3），用slots二维数组描述占用形状。canPlace()函数遍历slots数组，检查目标区域所有格子是否均未被占用且不越界。（2）唯一实例ID管理：这是开发过程中遇到的核心技术难点。最初背包网格直接存储itemId，当两个同ID物品同时存在于背包时，removeItem()按ID删除会误删所有同ID实例，导致物品消失或数据错乱。解决方案是引入uid（唯一实例ID）机制——每次placeItem()时生成全局递增的uid，网格存储uid而非itemId，通过_uidMap（Map数据结构）映射uid到itemId。removeItem()按uid删除，精确移除单个实例，彻底解决同ID物品冲突问题。（3）拖拽交互：支持从保险箱拖拽物品到背包（拾取）、从背包拖拽物品到保险箱（丢弃）、背包内拖拽重排。拖拽时通过dataTransfer传递uid、itemId、context（来源标识）和originRow/originCol（原始位置），目标区域根据context判断操作类型。双击保险箱物品可自动拾取（autoPlace自动寻找空位）。（4）事件监听器重复绑定问题：在搜索动画期间，refreshLootUI()会重建DOM并重新绑定事件监听器。setupBoxDrop()对保险箱容器添加drop事件监听，若每次刷新都重新绑定，会导致同一容器上叠加多个监听器，拖拽丢弃时触发多次从而复制物品。解决方案是引入boxDropInitialized标志，确保drop监听器只绑定一次。以下是核心代码：// backpack.js — uid实例管理核心代码const Backpack = {    GRID_SIZE: 6,    CELL_PX: 50,    _uidCounter: 0,    _uidMap: new Map(),          // uid -> itemId 映射     getItemId(uid) {        return this._uidMap.get(uid) || null;    },     placeItem(grid, itemId, row, col) {        const item = DataManager.getCollection(itemId);        if (!item) return false;        if (!this.canPlace(grid, item, row, col)) return false;        const uid = ++this._uidCounter;       // 生成唯一实例ID        this._uidMap.set(uid, itemId);         // 建立映射        const slots = item.slots;        for (let r = 0; r < slots.length; r++) {            for (let c = 0; c < slots[r].length; c++) {                if (slots[r][c] === 1) {                    grid[row + r][col + c] = uid;  // 网格存uid而非itemId                }            }        }        return uid;    },     removeItem(grid, uid) {        for (let r = 0; r < this.GRID_SIZE; r++) {            for (let c = 0; c < this.GRID_SIZE; c++) {                if (grid[r][c] === uid) {                    grid[r][c] = null;        // 按uid精确删除，不影响同ID其他实例                }            }        }        this._uidMap.delete(uid);    },     getItemsInGrid(grid) {        const items = [];        const seen = new Set();        for (let r = 0; r < this.GRID_SIZE; r++) {            for (let c = 0; c < this.GRID_SIZE; c++) {                const uid = grid[r][c];                if (uid !== null && !seen.has(uid)) {                    seen.add(uid);                    const itemId = this._uidMap.get(uid);                    if (itemId !== undefined) items.push(itemId);                }            }        }        return items;    }};3.2.4 收藏品系统收藏品数据基于assets文件夹中的70个PNG图片文件定义，每项包含id、name、rarity（common/rare/legendary）、width、height、slots二维数组、image文件名和description。稀有度对应三种颜色边框：紫色（普通）、金色（稀有）、红色（传说）。物品在背包和仓库中均显示对应的PNG图片，而非文字名称。四、性能优化开发后期页面出现明显卡顿，经分析发现两个性能瓶颈并逐一解决：（1）渲染帧节流：原render()函数在每次按键移动时直接调用，长按方向键时每秒触发30-40次全量Canvas重绘。引入scheduleRender()方法，使用requestAnimationFrame将渲染调用合并到浏览器刷新周期，确保每帧最多重绘一次，显著降低CPU占用。（2）墙壁查找优化：原实现使用Array.some()遍历墙壁数组判断某格是否为墙，对于10×10地图每帧需100次查找，每次O(n)复杂度。改为在地图生成时构建Set数据结构（_wallSet），查找复杂度降为O(1)，render()和movePlayer()均受益。五、技术难点与解决思路5.1 背包同ID物品冲突问题描述：当保险箱中刷出与背包中已有物品相同ID的收藏品时，双击拾取后物品消失；拖拽丢弃时物品被大量复制。根因分析：背包网格直接存储itemId，removeItem()按itemId遍历删除所有匹配格子。当两个同ID物品共存时，删除操作会误删另一个实例的所有格子，导致数据错乱。解决方案：引入uid（唯一实例ID）机制。每次placeItem()生成全局递增uid存入网格，通过Map映射uid→itemId。removeItem()改为按uid精确删除单个实例，getItemsInGrid()按uid去重后映射回itemId列表。此方案从数据模型层面彻底解决了同ID物品冲突，所有上层操作（拖拽、双击、丢弃）无需特殊处理。5.2 事件监听器重复绑定问题描述：将背包物品拖拽到保险箱丢弃时，物品被复制出多份。根因分析：refreshLootUI()每次调用时重建DOM并重新调用setupBoxDrop()绑定drop事件。由于drop监听器绑定在容器元素上（而非子元素），innerHTML重建子元素不影响容器上的监听器，导致每次刷新叠加一个新监听器，拖拽时触发N次回调。解决方案：引入boxDropInitialized状态标志，setupBoxDrop()首次绑定后设为true，后续调用直接返回，确保drop监听器只绑定一次。5.3 地图可达性保证问题描述：随机生成墙壁后，起点到终点可能不可达；简单清空所有墙壁会导致无遮挡的空旷地图。解决方案：使用BFS检测可达性，若不可达则随机移除一面墙壁，重复检测直到可达。设置200次上限防止死循环。此策略在保证可达性的同时最大程度保留墙壁，维持地图的探索性。5.4 Canvas渲染性能问题描述：页面操作时出现明显卡顿，尤其在长按方向键移动角色时。解决方案：①使用requestAnimationFrame将render()调用合并到浏览器刷新周期，避免同一帧内多次重绘；②将墙壁数据从Array改为Set，查找复杂度从O(n)降为O(1)；③在地图生成时预构建wallSet，避免每次render重复计算。六、扩展资料6.1 源码仓库GitCode 公开仓库 lowfllly/huawei_internship默认分支：main6.2 开源内容边界公开仓库提供复现本案例所需的应用源码、测试、部署脚本和设计文档；训练营内部培训材料、个人凭据、本地开发工具配置及运行期数据按 .gitignore 与安全要求不纳入仓库。评审时建议先体验公网环境，再对照仓库中的实现、测试和设计文档核验关键功能。

按照操作指南在游戏主机安装部署Cloud Streaming套件Server端程序和其他配套软件，申请主机License即可（License申请方法见操作指南）

第一步：点击https://console.huaweicloud.com/cce2.0/?region=cn-north-1#/app/guidance/list，在领取免费集群弹窗中，勾选“我已阅读并同意上述条款”，点击“立即领取”，即可获得3天免费集群，并进入云容器引擎管理控制台。 第二步：在点击“资源管理”-“节点管理”，如图所示，获取弹性IP地址。第三步：点击 https://www.huaweicloud.com/product/aos.html 进入应用编排服务AOS产品首页，点击“立即使用”。第四步：在“模板市场”-“公共模板”-“行业场景模板”处，点击坦克大战模板的“创建堆栈”按钮。第五步：填写必填的信息，ip参数值处填写第三步获取到的弹性IP地址，点击“下一步”。 第六步：点击“创建堆栈”，即可完成操作。第七步：回到云容器引擎管理控制台，点击“工作负载”-“无状态”，然后点击“外部访问地址”，即可开始坦克大战游戏啦！