前端技能考核项目

简介

这是成都锦城学院计算机与软件学院项目班前端部门 2025 年成员选拔考试题目。

考试包含六个独立的前端项目，涵盖 HTML 基础、CSS 样式、JavaScript 编程、游戏逻辑、Vue 框架和 React 框架等核心技能。每个项目都有明确的任务要求，考生需要按照指定的 TODO 项完成相应功能。

注意： 01 和 02 项目为 HTML 基础和 CSS 样式，没有固定答案，实现效果即可得分； 05 和 06 项目分别为 Vue 3 和 React 18 的算法可视化应用，考生答题时任选其一即可。

项目结构

project-test-2025/
├── 01/              # HTML基础
├── 02/              # CSS样式和动画
├── 03/              # JavaScript应用开发
├── 04/              # 2048游戏逻辑
├── 05/              # Vue 3 + BFS可视化
├── 06/              # React 18 + DFS可视化
└── README.md        # 项目说明

考试内容

第 01 题：HTML 基础（15 分）

项目路径： ./01/

任务描述： 完成一个基础 HTML 页面的配置

这是最基础的 HTML 技能考核。你需要为一个简单的网页添加必要的元素，包括图标、标题和样式引入。

具体要求：

• TODO_01（5 分）：添加网站标签页图标 01/index.html:7
  • 图标资源位置：./public/logo.svg
• TODO_02（5 分）：设置网站标题 01/index.html:9
  • 标题内容："键盘敲烂，月薪过万！"
• TODO_03（5 分）：引入 CSS 样式文件 01/index.html:11
  • 样式文件路径：./style.css

第 02 题：CSS 样式和动画（15 分）

项目路径： ./02/

任务描述： 实现一个猫咪 meme 展示页面的样式效果

这道题考核 CSS 选择器、布局和动画技能。你需要处理特定元素的样式、修复布局问题并添加动画效果。

具体要求：

• TODO_01（5 分）：特定元素样式设置 02/index.html:59
  • 仅将"飞行员耄耋"名字设置为红色
• TODO_02（5 分）：修复 Flex 布局问题 02/index.html:132
  • 使座位行与上方座位对齐（位置和宽度一致）
• TODO_03（5 分）：添加 CSS 动画 02/index.html:149
  • 为猫咪（cat-performer 类）添加左右移动动画

第 03 题：JavaScript 应用开发（20 分）

项目路径： ./03/

任务描述： 完成一个 TodoList 应用的核心功能

这是 JavaScript 编程能力的综合考核，涉及数据存储、DOM 操作和事件处理。

具体要求：

• TODO_01（10 分）：实现本地存储功能 03/script.js:56-60
  • 完成saveTasks()方法
  • 存储键名："todoTasks"
• TODO_02（5 分）：实现删除任务功能 03/script.js:79-83
  • 完成deleteTask(id)方法
• TODO_03（5 分）：实现任务状态切换 03/script.js:88-92
  • 完成toggleTask(id)方法

第 04 题：2048 游戏核心逻辑（20 分）

项目路径： ./04/

任务描述： 完成 2048 小游戏的核心功能实现

这道题考核算法逻辑、数组操作和游戏状态判断等高级 JavaScript 技能。你需要实现 2048 游戏的核心移动逻辑、随机方块生成和游戏结束判断。

具体要求：

• TODO_01（10 分）：实现向左移动核心逻辑 04/script.js:113-126
  • 过滤空格子，合并相同数字，填充空位
  • 正确处理数字合并和分数计算
  • 检测棋盘变化并返回移动状态
• TODO_02（5 分）：实现随机方块生成 04/script.js:212-221
  • 找出空格子并随机选择位置
  • 90%概率生成数字 2，10%概率生成数字 4
• TODO_03（5 分）：实现游戏结束判断 04/script.js:288-315
  • 检查棋盘是否已满且无法移动
  • 判断相邻格子是否可以合并

第 05 题：Vue 3 + BFS 算法可视化（30 分）

项目路径： ./05/

任务描述： 完成基于 Vue 3 的广度优先搜索(BFS)算法可视化应用

这道题考核 Vue 3 框架使用、算法理解和数据结构操作等高级技能。你需要实现 BFS 算法的核心逻辑，让用户能够直观地看到算法的搜索过程。

技术要求：

• 使用 Vue 3 Composition API
• 理解 BFS 算法原理和队列数据结构
• 掌握异步编程和状态管理

具体要求：

• TODO_01（15 分）：实现 BFS 算法核心循环 05/src/App.vue:90-105
  • 从队列前端取出节点并检查是否已访问
  • 标记为已访问，检查是否为终点
  • 获取邻居节点并创建新路径加入队列
• TODO_02（15 分）：实现重置网格功能 05/src/App.vue:110-115
  • 调用 initGrid()函数重新初始化网格
  • 清空所有搜索状态和重新生成网格

第 06 题：React 18 + DFS 算法可视化（30 分）

项目路径： ./06/

任务描述： 完成基于 React 18 的深度优先搜索(DFS)算法可视化应用

这道题考核 React 18 框架使用、算法理解和栈数据结构操作等高级技能。你需要实现 DFS 算法的核心逻辑，让用户能够直观地看到算法的搜索过程。

技术要求：

• 使用 React 18 函数组件和 Hooks
• 理解 DFS 算法原理和栈数据结构
• 掌握 useCallback、useState 等 Hook 使用

具体要求：

• TODO_01（15 分）：实现 DFS 算法核心循环 06/src/App.jsx:118-135
  • 从栈顶取出路径并获取当前节点
  • 检查是否已访问，标记为已访问并更新状态
  • 检查是否为终点，获取邻居并创建新路径推入栈
• TODO_02（15 分）：实现重置网格功能 06/src/App.jsx:148-155
  • 调用 initGrid()函数重新初始化网格
  • 清空所有搜索状态和重新生成网格

评分标准

• 总分： 100 分
• 题目 1： 15 分（HTML 基础）
• 题目 2： 15 分（CSS 样式）
• 题目 3： 20 分（JavaScript 应用）
• 题目 4： 20 分（2048 游戏逻辑）
• 题目 5： 30 分（Vue 3 + BFS 算法可视化）
• 题目 6： 30 分（React 18 + DFS 算法可视化）

注意：题目 5 和题目 6 任选其一完成即可，两题均完成不额外加分。

每个 TODO 项都有明确的分值，请按照要求完成所有功能点。

开始答题

1. 克隆或下载项目到本地
2. 在浏览器中测试每个项目的功能是否正常
3. 确保所有 TODO 标记的功能都已实现

技术提示

• 使用现代浏览器进行测试
• 可以使用浏览器开发者工具调试代码
• 注意代码的可读性和规范性
• 合理使用 HTML5、CSS3、ES6+、Vue 3 和 React 18 特性

祝你答题顺利！