《软件项目开发与实践 1》项目方案 （三）
HTML5 应用开发
2018 年 11 月
目
录 1 训练目标 ....................................................................................................... 错误! 未定义书签。
2 教学计划 ....................................................................................................... 错误! 未定义书签。
3 集中培训项目简介 ....................................................................................... 错误! 未定义书签。
3.1 项目功能 .................................................................................... 错误! 未定义书签。
3.2 训练方法 ................................................................................... 错误! 未定义书签。
3.3 开发环境 ................................................................................... 错误! 未定义书签。
4 选做项目简介 ............................................................................................... 错误! 未定义书签。
4.1 项目 A ........................................................................................ 错误! 未定义书签。
4.1.1 项目需求 ............................................................................... 错误! 未定义书签。
4.1.2 版本规划 ............................................................................... 错误! 未定义书签。
4.1.3 开发环境 ............................................................................. 错误! 未定义书签。
4.2 项目 B ...................................................................................... 错误! 未定义书签。
4.2.1 项目需求 ............................................................................. 错误! 未定义书签。
4.2.2 版本规划 ............................................................................. 错误! 未定义书签。
4.2.3 开发环境 ............................................................................. 错误! 未定义书签。
4.3 项目 C ...................................................................................... 错误! 未定义书签。
4.3.1 项目需求 ............................................................................. 错误! 未定义书签。
4.3.2 版本规划 ............................................................................. 错误! 未定义书签。
4.3.3 开发环境 ............................................................................. 错误! 未定义书签。
4.4 项目 D ...................................................................................... 错误! 未定义书签。
4.4.1 项目需求 ............................................................................. 错误! 未定义书签。
4.4.2 版本规划 ............................................................................. 错误! 未定义书签。
4.4.3 开发环境 ............................................................................. 错误! 未定义书签。
4.5 项目 E ...................................................................................... 错误! 未定义书签。
4.5.1 项目需求 ............................................................................. 错误! 未定义书签。
4.5.2 版本规划 ............................................................................. 错误! 未定义书签。
4.5.3 开发环境 ............................................................................. 错误! 未定义书签。
1 训练目标 1、理解软件开发基本模型，并能陈述软件项目开发过程中的主要过程、活动和任务。能够将软件开发瀑布模型理论应用于课程项目的需求分析、设计、实现、测试过程中。
2、具备根据课程项目需求、运用软件工程专业相关的工具、开发技术，制定设计方案的能力。
3、能使用 IDE 集成开放工具进行项目实现及调试。
4、掌握简单的软件功能测试技术，分析验证课程项目的功能需求。
5、理解软件工程开发文档的撰写必要性，并能编写基础的软件开发需求、设计、测试过程文档。
2 教学计划 课程教学分为集中培训、分散指导和答辩三个阶段，每个阶段的教学安排及学生任务如表 1 所示。学生在集中培训阶段使用统一项目案例（《学生基本信息管理系统设计与实现》）
表 1 阶段教学计划
时间 阶段 训练内容 目标 提交材料 6 天
集 中培训 1. 开发平台和工具的配置及使用（HbuilderX）
2. HTML 基本元素与布局 3. CSS 选择器和熟悉使用 4. JavaScript 基本语法（变量、函数）
5. HTML5 canvas 使用 6. Dom 事件处理 7. 案例 1：踩格子小应用 8. 案例 2：页面截图小应用 9. 浏览器开发者工具调试 10. 编码规范和文档规范 1. 掌握 HTML5 小应用程序开发，包括 HTML、CSS 和 JavaScript，本次限定以html5 canvas为中心的开发 2. 能在应用设计中充分使用数据结构方法进行数据组织和存取 3、能在应用设计开发中进行必要的计算 4. 能熟悉 IDE 上项目的组织的开发 5、能用浏览器开发者工具调试查看页面元素、调试代码 6 .熟悉编码规范和文档规范，能用图文方法阐述设计思路 1. 需求文档初稿（建议写设计思路描述）
2. 初步代码框架 30 天 分 散指导 1. 设计思路指导 2. 调试技巧指导 3. 文档撰写指导 1. 进一步理解和掌握设计思路细分 2. 进一步掌握调试技巧 3. 进一步学会表达 1. 修正后的软件需求文档 2. 规范后设计文档 3. 规范后代码
1 天 答辩
提高表达能力 1. 完整设计文档 2. 完整代码 3. 答辩 PPT 4. 项目演示视频 5. 项目包 集中训练阶段以《学生基本信息管系统设计与实现》为案例进行讲解和训练，内容安排如表 2 所示。
表 2 集中培训计划
时间 阶段 训练内容 目标（关键点评审）
第 1 天 基础 1. 开发平台和工具的配置及使用（HbuilderX）
2. 案例 1：踩格子小程序开发 HTML 页面、标签、和结构 JavaScript 引入、基本语法、变量、函数、运算 Css 引入、选择器、属性 Canvas、canvas 绘图 JS 数组操作和绘图 3. 浏览器开发者工具调试 掌握开发平台和工具的配置及使用（HbuilderX）
会用浏览器开发者工具调试进行错误查看，简单调试 会创建移动项目并能运行、发布、真机调试 能创建 html5 页面，能布局canvas，能用 CSS 设置canvas 大小、边框 能引入 JavaScript，能在canvas 上绘制简单几何图形 能构建 JS 数组，存取数组成员 第 2 天 提高 1. 继续案例 1 Dom 事件监听和事件处理 事件坐标计算 Canvas 绘制 定时器 setInterval 建立、清除、时间事件监听、计时计分 JS 数组移位、push 操作 2. 浏览器开发者工具调试 能注册事件监听器 能编监听器，获取点击坐标 能把坐标转换成行列，计算和目标方块是否重复 能建立定时器，设置间隔时间长度 能在定时器中计算并输出信息 能进行 JS 数组移位、push操作 继续增加调试工具熟悉程度 第 3 天 基础 1. 案例 2：网页截图应用开发 展示并说明功能构成 HTML 布局（position）
CSS 选择符和属性 Canvas 绘图 drawImage 2. 按钮事件监听与处理 3. 浏览器开发者工具调试 能用 CSS 布局目标（绝对布局、相对布局）
能绘制图片资源到 cnavas上 能处理按钮事件（注册、监听、处理）
继续增加调试工具熟悉程度
第 4 天 提高 1. 案例 2 继续 鼠标拖拽操作 触摸屏拖拽（选）
JS 对象简单应用（JSON）
图片缩放移动后的计算 2. 浏览器开发者工具调试 能 理 解 鼠 标 拖 拽 的mousedown、mousemove、mouseup 的一体化，并设置标识点（JSON 方式）
能进行图片缩放、位移后截图坐标起点和尺寸的计算 继续增加调试工具熟悉程度 第 5 天 扩展 1. 案例 1 的功能扩展 设计思路 本地存储 localstorage 2. 案例 2 的功能扩展 设计思路 Base64 编码与图片下载保存 简单了解 localStorge，会存取 localstorage 能 把 canvas 内 容 转 成base64 编码，能保存成文件 第 6 天 扩展 设计题目分解 设计方案撰写方法 文档撰写方法 知晓项目开发中需要注意的问题及难点分析，熟悉文档的规范和写法 3 集中培训项目简介 3.1 项目功能 《HTML5 应用小程序开发》主要应用 HTML5、CSS 和 JavaScript 完成两个基于 Web 页面的交互小程序开发，在学习了 HTML 页面内容组织、CSS 页面修饰的基础上，综合应用 HTML5 Canvas 绘图、JavaScript 事件处理和数据结构进行程序设计，训练问题拆分能力、设计构思能力和代码编写的实际动手能力。
3.2 训练方法 通过简短、实际且有趣的项目训练同学们的设计构思能力、代码编写能力、代码调试能和文档写作能力。在技术上通过案例引导方式，在设计思路讲解同时穿插 HTML、CSS 的具体使用，熟悉 JavaScript 的语法、函数、运行机制；通过对 HTML 页面元素布局、CSS 修饰、HTML canvas 绘制、事件处理等具体编程，从项目实际需求出发，引入数据结构知识的实际使用，在课堂中以现场操作方式，示例、引导同学们积极跟进，保证训练进度和目标。在集中训练过程中，随着课堂推进布置课堂提问、课堂作业、课堂讨论，激发同学们积极思考、扩展思路、提高表达能力。
3.3 开发环境 （1）集成开发环境：HbuilderX 1.0
（2）浏览器 firefox 或 chrome 或 IE9 以上 （3）自带手机（android、ios、wp 均可），自己下载手机联机驱动
4 选做项目简介 4.1 项目 A
题目：HTML 绘图板程序开发
4.1.1 项目需求 开发一个网页绘图板程序，可以在网页上绘制各种图形，包括原型、矩形、三角形、直线、弧线；可以设置图形轮廓线颜色、宽度；可以填充封闭图形，填充可选择颜色，图形可重叠。
4.1.2 版本规划 根据项目的实际，预先定义了一些需要完成的功能，学生应该选择适合自己当前水平的版本完成设计和编码，每一个版本都要求应用适当的数据结构。
表 1 项目 A 版本规划 版本号 功能点 非功能点 备注 1.0 绘制各种图形，包括原型、矩形、三角形、直线、弧线；可以设置图形轮廓线颜色、宽度；可以填充封闭图形，填充可选择颜色，图形可重叠。
界面布局信息明确
1.1 在 1.0 版本的基础上，使用数据结构方式保存绘制内容到 HTML5 的 localstorage 界面美观，布局合理输入输出方便
1.2 具有撤销、恢复功能
4.1.3 开发环境 （1）集成开发环境：HbuilderX 1.0
（2）浏览器 firefox 或 chrome 或 IE9 以上 4.2 项目 B
题目：HTML 可编辑数码相框
4.2.1 项目需求 网页中个人头像上传、图片上传大量存在，上传图片需要剪切以适配规范性需要，直接在网页上进行图片编辑也大量存在。本项目要求对存在的图片进行裁剪后以备它用。
4.2.2 版本规划 根据项目的实际，预先定义了一些需要完成的功能，学生应该选择适合自己当前水平的版本完成设计和编码，每一个版本都要求应用适当的数据结构。
表 2 项目 B 版本规划 版本号 功能点 非功能点 备注 1.0 图片、显示框、图片镜头框布局，支持图片移动、缩放和裁剪，裁剪后的图片显示在目标框中。
布局合理
1.1 在 1.0 版本的基础上，增加图片 base64 编码并存入 LocalStorage，具备多个裁剪结果，支持裁剪结果删除。
界面友好
1.2 在完成 1.1 版本的基础上，支持裁剪结果图片的再组合成大照片，组合规则和自由发挥。
界面美观，有裁剪单元片之间距离调整、裁剪片的旋转、滤镜效果使用。
4.2.3 开发环境 （1）集成开发环境：HbuilderX 1.0
（2）浏览器 firefox 或 chrome 或 IE9 以上 4.3 项目 C
题目：HTML 射击砖块小游戏开发
4.3.1 项目需求 网页类的小游戏以其不需要安装、使用方便的特点受到人们的欢迎。射击砖块小游戏是通过底部小平台来发射弹珠，在左右移动时改变弹珠的入射角度，弹珠通过反射来打掉上方的砖块，通过若干次射击打掉所有砖块。
4.3.2 版本规划 根据项目的实际，预先定义了一些需要完成的功能，学生应该选择适合自己当前水平的版本完成设计和编码，每一个版本都要求应用适当的数据结构。
表 3 项目 C 版本规划 版本号 功能点 非功能点 备注 1.0 生成游戏界面，小平台左右移动并可以发射弹珠，通过反射打掉小砖块 布局合理，移动方式合理
1.1 在 1.0 版本的基础上，增加计分、计时、等级等功能 界面友好，弹珠发射和反射路径合理
1.2 在完成 1.1 版本的基础上，增加多关卡、多种砖块堆叠形状功能。
界面美观，至少三个关卡
4.3.3 开发环境 （1）集成开发环境：HbuilderX 1.0
（2）浏览器 firefox 或 chrome 或 IE9 以上 4.4 项目 D
题目：HTML 排雷游戏小程序开发
4.4.1 项目需求 网页类的小游戏以其不需要安装、使用方便的特点受到人们的欢迎。本排雷小游戏是在生成的界面中移动排雷机器人，上下左右四个方向去排雷，前进路径上有路障或其他干扰，机器人需要将雷全部排完。
4.4.2 版本规划 根据项目的实际，预先定义了一些需要完成的功能，学生应该选择适合自己当前水平的版本完成设计和编码，每一个版本都要求应用适当的数据结构。
表 4 项目 D 版本规划 版本号 功能点 非功能点 备注 1.0 生成一个固定排雷地图，实现排雷机器人四个方向移动，能绕过障碍物，完成排雷 布局合理，雷的位置合理
1.1 在完 1.0 版本的基础上，增加干扰物，增加计分或计时， 界面友好，易操作，规则合理
1.2 在完成 1.1 版本的基础上，增加多关卡，课随机生成排雷地图 界面美观，至少三个关卡
4.4.3 开发环境 （1）集成开发环境：HbuilderX 1.0
（2）浏览器 firefox 或 chrome 或 IE9 以上 4.5 项目 E
题目：HTML 计算器开发
4.5.1 项目需求 计算器是一个常用的工具，也是程序设计中常见的编程题。通常包含有四则运算、乘方开方、记忆清零等功能，还可以扩展出常见科学计算、单位换算等功
能，扩展性强，开发较灵活。
4.5.2 版本规划 根据项目的实际，预先定义了一些需要完成的功能，学生应该选择适合自己当前水平的版本完成设计和编码，每一个版本都要求应用适当的数据结构。
表 4 项目 D 版本规划 版本号 功能点 非功能点 备注 1.0 完成四则运算、乘方开方、退格、清零功能的基本计算，可以连加连减 布局合理，计算正确
1.1 在完 1.0 版本的基础上，增加连续输入的四则运算 界面友好，计算精度合理
1.2 在完成 1.1 版本的基础上，增加科学计算等功能 界面美观，不同模式可切换
4.5.3 开发环境 （1）集成开发环境：HbuilderX 1.0
（2）浏览器 firefox 或 chrome 或 IE9 以上 4.6 项目 F
题目：HTML 组织结构管理可视化程序设计 4.6.1 项目需求 企事业单位等机构的组织结构一般是树形结构或星型结构，机构的管理由这样的组织结构来构成并运行。机构的组织结构也会出现在机构的网站或者宣传材料中，需要一种通用、美观和灵活的组织结构图及其管理程序来生成、展示和管理机构的组织结构。
4.6.2 版本规划 根据项目的实际，预先定义了一些需要完成的功能，学生应该选择适合自己当前水平的版本完成设计和编码，每一个版本都要求应用适当的数据结构。
表 4 项目 D 版本规划 版本号 功能点 非功能点 备注 1.0 能通过读取文件的方式绘制和生成组织结构树形结构图，并能折叠或打开子树 层次结构和数据一致，合理布局
1.1 在完 1.0 版本的基础上，增加添加或删除节点功能 添加和删除能保存
1.2 在完成 1.1 版本的基础上，合理运用所学知识，增加名称显示、子树节点统计等功能 界面美观，操作方便
4.6.3 开发环境 （1）集成开发环境：HbuilderX 1.0
（2）浏览器 firefox 或 chrome 或 IE9 以上 4.7 项目 G
题目：HTML 多路径游走计时程序开发 4.7.1 项目需求 路径游走问题中典型的是迷宫游戏，从入口寻找合适的路径可以走到出口，右手法则可以很容易走出去，但实际上会有多条路径可以走到出口。多路径游走计时程序需要实现生成迷宫、线路计算、计时等功能，游戏规则扩展性强。
4.7.2 版本规划 根据项目的实际，预先定义了一些需要完成的功能，学生应该选择适合自己当前水平的版本完成设计和编码，每一个版本都要求应用适当的数据结构。
表 4 项目 D 版本规划 版本号 功能点 非功能点 备注 1.0 完成迷宫生成，游走移动绘制、单路径计算及计时 合理布局，路径展示合理
1.1 在完 1.0 版本的基础上，增加多路径游走设计及设计，路径比较及计时比较 路径显示有区分度，计时统计合理
1.2 在完成 1.1 版本的基础上，增加多关卡设计，迷宫可随机生成 界面美观，至少三个关卡
4.7.3 开发环境 （1）集成开发环境：HbuilderX 1.0
（2）浏览器 firefox 或 chrome 或 IE9 以上 4.8 项目 H
题目：炮弹发射计算小程序设计
4.8.1 项目需求 炮弹发射是设计类游戏的基本要素，其发射炮弹的模拟包含了很多的因素，
比如射击角度、速度、重力以及障碍物位置、高度等，合理计算这些因素，并以适当的布局和外观进行模拟是比较有趣的事情。
4.8.2 版本规划 根据项目的实际，预先定义了一些需要完成的功能，学生应该选择适合自己当前水平的版本完成设计和编码，每一个版本都要求应用适当的数据结构。
表 4 项目 D 版本规划 版本号 功能点 非功能点 备注 1.0 完成大炮、炮弹、障碍物等射击场景的生成，能完成射击并打中目标。
合理布局，不同参数命中情况不同
1.1 在完 1.0 版本的基础上，增加速度、重力等因素，障碍物可变化，射击角度调整灵活。
命中有一定的外观效果
1.2 在完成 1.1 版本的基础上，增加多关卡设计，迷宫可随机生成 界面美观，至少三个关卡
4.8.3 开发环境 （1）集成开发环境：HbuilderX 1.0
（2）浏览器 firefox 或 chrome 或 IE9 以上
相关热词搜索： 项目 实践 方案