河南省第三届职业技能大赛 网站技术（世赛选拔）项目任务书

竞赛时间总计：9小时

一、技术描述
（一）项目概要
网站技术项目是使用计算机工具制作网站，包括页面设计、页面重构、交互设计、前端功能开发、后端功能开发、网站二次开发的竞赛项目。选手能够根据需求设计恰当的网站产品，完成前端交互功能开发，完成后端功能开发;需要具备熟练的图形图像处理能力和页面元素设计能力，遵守易用性和可访问性标准;注重标准浏览器和软硬件的兼容性，具备一定的调试部署能力。在实现的作品中，要能理解网站业务制作的技术和艺术价值。选手应当理解技术的运用是为了将功能帮助网站经营者和用户更好更高效地工作（自动化）。网站的颜色、字体、图形以及布局则需要富有创意的设计技巧。用户界面要确保具有良好的可用性，也必须理解所制作项目的业务内容和网站管理的基础知识。本文件按照计算机程序设计员国家职业技能标准（三级）及以上要求，适当吸收世界技能大赛相关技术要求编制，含项目技术描述、试题与评判标准、场地设施设备安排、健康安全要求等内容。未尽事宜，将在补充通知或赛前项目技术说明时予以说明。
（二）基本知识与能力要求本竞赛是对网站技术技能的展示和评估。仅测试技能操作方面
的能力，参赛选手需要按照网站技术标准（或要求）展示技能。

Module_A 网页设计制作：

一、项目简介：

河南是中华民族与华夏文明的发源地。中国四大发明中的指南针、造纸、火药三大技术均发明于河南。从夏朝至宋朝，河南一直是中国政治、经济、文化和交通中心，先后有 20 多个朝代建都或迁都河南，中国八大古都中河南有十三朝古都洛阳、八朝古都开封、七朝古都安阳、夏商古都郑州商丘、南阳、许昌、濮阳等四个古都，是中国建都朝代最多，建都历史最长，古都数量最多的省份。河南历史文化厚重、文物古迹众多、资源丰富，地下文物和馆藏文物数量均为全国第一。请根据河南文化遗址做出具有河南特色的文化旅游网站

二、具体要求

该网页设计原型图应包含：

1. 网站基本元素

1） LOGO 设计
2） 导航设计
3） Banner(轮播图)
4） 用户登录注册
5） 背景音乐播放器
6） 页脚/底信息

2. 内容区域

1） 河南文化(展示至少两项内容)
2） 地方戏曲 (展示至少两项内容)
3） 名胜古迹(展示至少两项内容)
4） 河南非物质文化遗产(展示至少两项内容)

3.网站页面开发

用 H5 前端技术实现所设计网站页面的全部功能（包括 JS动效）。要求使用已经设计好的网站原型图进行前端网站页面开发，必须保持前端网站页面与网页设计原型图的一致性。
1） Logo 需要在顶部和页脚都存在
2） 网站页面至少有 4 处不同的交互效果，相同的算一种
3） 每个章节图文列表不能为统一布局，每个章节至少包含一种图文交互效果。
注：在已完成的网页设计原型图 PNG 文件中添加适当的文字说明（注释），以描述自己实现的交互效果。

三、该模块要收集的文件

1. 网页设计原型图文件应保存文件名为：
   i. Desktop_XX_Module_A.png（PC 版）
   ii. Tablet_XX_Module_A.png（平板版）
   iii. Moble_XX_Module_A.png（手机版）
   iv. Logo_XX_Module_A.png（LOGO）
2. 将上述所有网页设计原型图文件，均保存到“XX_Module_A /design”文件夹下
3. 将用 H5 前端技术所实现的前端网站页面文件（包含 HTML，CSS，JS 等），均保存在“XX_Module_A”文件夹中

Module_B 后台模块开发:

Module_C 前端游戏设计:

一、游戏基本要求：

游戏视图宽度：1400
游戏视图高度：700
游戏单元格宽高：70
游戏行占用单元格：10
游戏列占用单元格：20

二、具体要求

1.开始游戏页面应包含以下元素：
游戏介绍
展示游戏内敌人和炮塔的详细属性
开始游戏按钮
2.游戏内页面应该包括以下元素：
炮塔选项及购买价格（三个不同类型的炮塔选项）
倒计时
金币
道路
游戏背景
敌人
o 敌人需显示血条（敌人共有三个不同类型）
炮塔
o 炮塔子弹（不同的炮塔子弹不同）
o 炮塔攻击范围提示（不同的炮塔攻击范围不同）
3.游戏结束表单页面应包含以下元素：
昵称输入框
提交按钮
4.排行榜页面应包含以下元素：
排名
昵称
游戏时间
金币
重新开始按钮
上述文本元素和按钮可以根据需要简化或替换为图标

三、该模块要收集的文件

1. 设计文件命名为：
   i.Start_XX_Module_C.png（游戏开始界面）
   ii. Game_XX_Module_C.png（游戏中界面）
   iii. Form_XX_Module_C.png（表单输入界面）
   iv. Ranking_XX_Module_C.png（排行榜界面）
   2.将上述所有设计文件保存到“XX_Module_C/design”文件夹下
   3.将所设计游戏的前端页面应用程序文件（HTML，CSS 等）均保存在“XX_Module_C”
   文件夹中。 五、 竞赛选手须知
2. 该模块需提交的所有作品均需存放在命名为“XX_Module_C”的文件夹中，其中 XX 是您的
   机器编号，例如 “01_Module_C”。 并将前端页面应用程序的入口文件“index.html”，保存在文件夹根目录。
   2.多个相同截图页面可以添加数字标识，例如：
   Start_XX_Module_C_1.png，
   Start_XX_Module_C_2.png，
   Start_XX_Module_C_3.png。

Module_D 前端功能实现与交互:

一、游戏基本逻辑

1. 浏览根目录对应显示主页
2. 进入页面后显示游戏介绍，展示游戏内炮塔和敌人的详细属性
3. 游戏内所有按钮要有动态效果
4. 点击开始按钮之后显示游戏界面，道路按照提供的坐标正确渲染，计时器初始化为 0，金币初始化为 100，炮塔选择区和游戏背景正确渲染。
5. 根据游戏介绍提供的炮塔基本属性进行渲染创建可放置的炮塔选项，点击选择炮塔跟随鼠标移动，并显示攻击范围，若鼠标移动到不可放置的单元格，比如道路和已经放置过炮塔的单元格上，攻击范围会显示为红色警示，此时不能放置，为蓝色范围则可以放置。
6. 敌人总共有 15 个，分别有三个等级，前 5 个是敌人一，5 至 10 个是敌人二，10 至 15 个是敌人三，根据游戏时间生成怪物，初级怪物间隔 3 秒生成一个，中级怪物间隔 4 秒生成一个，高级怪物间隔 5 秒生成一个，生成的怪物根据道路进行前进。敌人的血条也是根据敌人的属性生成，炮塔的子弹攻击威力不同血条减小值不同。
7. 炮塔子弹根据敌人是否进入攻击范围进行生成，并根据炮塔属性里限制每次生成的最大子弹数，比如限制为 3，那么此怕炮塔发出的子弹和渲染到页面上的子弹最多为 3 个。敌人一和敌人二子弹限制为最大 3 个子弹，敌人三限制为最大 1 个子弹。子弹会自动跟踪敌人，直至击毁敌人，子弹和敌人一起摧毁，剩余锁定已经击毁敌人的子弹也会一起摧毁。
8. 放置炮塔时根据炮塔价格进行减少金币，金币小于要放置炮塔的价格则无法放置炮塔，金币不能为负数；放置的炮塔属性不同，价格不同，子弹不同，攻击范围不同，子弹的威力不同，子弹攻击敌人后，敌人血量根据子弹威力进行减少，敌人摧毁后根据摧毁的敌人价格进行金币增加。
9. 炮塔可以进行删除，点击已放置的炮塔显示一个删除图标，然后点击图标删除已经放置的炮塔，并清空炮塔位置，可重新放置新炮塔。
10. 如果敌人走完全段路程或者击败第 15 个敌人时候，游戏结束
11. 游戏结束后显示输入昵称的表单，输入框提交禁止为空，提交之后显示排行榜
12. 在排行榜中，用户根据游戏时间排序，游戏时间相同根据金币排序，若两个用户游戏时间和金币都相同则并列排名，只显示前十名的排行。

二、详情图示

炮塔详情图当玩家开始游戏之后，炮塔选项区有三个炮塔，游戏面板可放置炮塔，不能与道路和炮塔重叠。
游戏中的炮塔下列任选其三：
敌人详情图

当游戏开始后，生成的敌人和敌人血条只能根据道路进行前进，不能走出道路外。游戏中的敌人下列任选其三：
注：
已提供游戏内道路的静态变量和需要注入到游戏中的manifest.json 文件，都可根据需求进行修改。游戏内炮塔参数和敌人参数要根据“游戏介绍”进行设置。
二、 该模块要收集的文件
将所设计游戏的前端页面应用程序文件（HTML，CSS，JS 等）均保存在“XX_Module_D”文件夹中。