《网页设计课程设计报告书》由会员分享，可在线阅读，更多相关《网页设计课程设计报告书（13页珍藏版）》请在金锄头文库上搜索。
1、武汉理工高校华夏学院课程设计报告书课程名称： 网页设计 题 目： 俄罗斯方块嬉戏 系 名： 信息工程系 专业班级： 姓 名： 学 号： 指导老师: 2016 年 1月 14 日课 程 设 计 任 务 书课程名称： 网页设计课程设计 指导老师： 苏永红 班级名称： 软件1131 开课系、教研室： 软件与信息平安 一、课程设计目的与任务网页设计与制作课程设计是网页设计与制作课程的后续实践课程，旨在通过一周的实践训练，加深学生对网页设计中的概念，原理和方法的理解，加强学生综合运用HTML、CSS、JavaScript、asp网页设计技术进行实际问题处理的实力，进一步提高学生进行分析问题和解决问题的实
2、力，包含系统分析、系统设计、系统实现和系统测试的实力。学生将在指导老师的指导下，完成从需求分析，系统设计，编码到测试的全过程。二、课程设计的内容与基本要求1、课程设计题目 俄罗斯方块嬉戏的设计与实现2、课程设计内容俄罗斯方块嬉戏是一个单击休闲小嬉戏。在俄罗斯方块的嬉戏界面中，有一组正在“下落”的方块(通常有4个，组成各种不同的形态)，嬉戏玩家须要做的事情就是限制正在“下落”的方块的移动，将这组方块摆放到合适的位置。只要下面“某一行”全部充溢方块，没有空缺，那么这行就可以“消退”，上面的全部“方块”会“整体掉下来”。对于HTML5、JavaScript学习者来说，学习开发这个小程序难度适中，而且
3、能很好地培育学习者的学习乐趣。开发者须要从程序员的角度来看待玩家面对的嬉戏界面，嬉戏界面上的每个方块(既可以涂上不同的颜色，也可以绘制不同图片)在底层只要运用一个数值标识来代表即可，不同的方块运用不同的数值标识。开发俄罗斯方块嬉戏除了须要理解嬉戏界面的数据模型之外，开发者还须要理解为嬉戏添加监听方法，通过事务监听可以监控玩家的按键动作，当玩家按下不同按键时，程序限制正在“下落”的方块移动或旋转。本程序略微有点困难的地方是，当方块组合旋转时，开发者须要计算每个方块旋转后的坐标。具体要求为：(1) 开发嬉戏界面。嬉戏界面大致分为两个区域：速度、积分显示区和主嬉戏界面区。(2) 建立嬉戏的状态数据模
4、型。对于嬉戏玩家而言，嬉戏界面上看到的“元素”千差万别、改变多端，但对于嬉戏开发者而言，嬉戏界面上的元素在底层都是一些数据，只是不同数据所绘制的图片存在差异而已，因此，建立嬉戏的状态数据模型是实现嬉戏逻辑的重要步骤。(3) 实现嬉戏逻辑。定义了嬉戏状态模型后，接下来程序须要处理方块组合“掉落”，还须要处理方块组合“左移”、“右移”、“旋转”等，通过事务监听可以监控玩家的按键动作，当玩家按下不同按键时，程序限制正在“下落”的方块移动或旋转。此处运用Local Storage来记录嬉戏状态。(4) 初始化嬉戏状态。在嬉戏过程中，程序运用了Local Storage来保存嬉戏状态，包括嬉戏的当前积分
5、、嬉戏速度、已有方块的状态等。为了正常运用Local Storage所记录的嬉戏状态，程序可以为window对象的onload事务绑定事务监听器，程序可以在windows装载完成时通过Local Storage读取这些数据，并把这些数据显示出来。为了提高分析问题和解决实际问题的实力。每个人须要检查嬉戏运行结果，设计报告文档，并提交纸质版的课程报告和电子版的网站设计资料，包括：源程序，网站运行效果截图，电子版的资料以班为单位刻成光盘后由学习委员统一提交。 3、设计报告撰写格式要求1设计题目与要求 2 设计思想3系统结构 4 系统具体设计与实现，内容包括各个模块的设计，模块的算法流程图，相关学问点
6、的运用，可以截取少量代码说明，并加上注释，图居中显示，图下方要有图编号和图名称。5运行结果及结果分析6 自我评价与总结7 参考文献三、课程设计步骤刚好间进度和场地支配本课程设计将支配在第20周, 教化技术中心。具体支配如下：第一天 下发任务书，学生查阅资料其次、三天 系统设计和原型开发，系统功能实现第四天 书写课程设计报告，系统调试 测试 打包和验收周次星期一星期二星期三星期四星期五第20周第3-6节第3-6节第3-6节第3-6节地点现教212现教212现教212现教212四、课程设计考核及评分标准课程设计考核将综合考虑学生考勤和参加度，系统设计方案正确性，系统设计和开发效果以及课程设计报告书
7、的质量。具体评分标准如下：设置六个评分点（1）设计方案正确，具有可行性、创新性； 25分（2）系统开发效果较好； 25分（3）看法仔细、刻苦钻研、遵守纪律； 10分（4）设计报告规范、课程设计报告质量高、参考文献充分 20分（5）课程设计答辩概念清楚，内容正确 10分（6）课程设计期间的课堂考勤、答疑与统筹考虑。 10分 按上述六项分别记分后求和，总分按五级记分法记载最终成果。优秀（10090分），良好（8089分），中等（7079分），及格（6069分），不及格（059分）1设计题目与要求 1.1设计题目课设题目：俄罗斯方块嬉戏的设计与实现1.2设计要求(1) 开发嬉戏界面。嬉戏界面大致分为
8、两个区域：速度、积分显示区和主嬉戏界面区。(2) 建立嬉戏的状态数据模型。对于嬉戏玩家而言，嬉戏界面上看到的“元素”千差万别、改变多端，但对于嬉戏开发者而言，嬉戏界面上的元素在底层都是一些数据，只是不同数据所绘制的图片存在差异而已，因此，建立嬉戏的状态数据模型是实现嬉戏逻辑的重要步骤。(3) 实现嬉戏逻辑。定义了嬉戏状态模型后，接下来程序须要处理方块组合“掉落”，还须要处理方块组合“左移”、“右移”、“旋转”等，通过事务监听可以监控玩家的按键动作，当玩家按下不同按键时，程序限制正在“下落”的方块移动或旋转。此处运用Local Storage来记录嬉戏状态。(4) 初始化嬉戏状态。在嬉戏过程中，
9、程序运用了Local Storage来保存嬉戏状态，包括嬉戏的当前积分、嬉戏速度、已有方块的状态等。为了正常运用Local Storage所记录的嬉戏状态，程序可以为window对象的onload事务绑定事务监听器，程序可以在windows装载完成时通过Local Storage读取这些数据，并把这些数据显示出来。2 设计思想俄罗斯方块嬉戏是一个单击休闲小嬉戏。在俄罗斯方块的嬉戏界面中，有一组正在“下落”的方块(通常有4个，组成各种不同的形态)，嬉戏玩家须要做的事情就是限制正在“下落”的方块的移动，将这组方块摆放到合适的位置。只要下面“某一行”全部充溢方块，没有空缺，那么这行就可以“消退”，上
10、面的全部“方块”会“整体掉下来”。开发者须要从程序员的角度来看待玩家面对的嬉戏界面，嬉戏界面上的每个方块(既可以涂上不同的颜色，也可以绘制不同图片)在底层只要运用一个数值标识来代表即可，不同的方块运用不同的数值标识。开发俄罗斯方块嬉戏除了须要理解嬉戏界面的数据模型之外，开发者还须要理解为嬉戏添加监听方法，通过事务监听可以监控玩家的按键动作，当玩家按下不同按键时，程序限制正在“下落”的方块移动或旋转。本程序略微有点困难的地方是，当方块组合旋转时，开发者须要计算每个方块旋转后的坐标。3系统结构 系统结构图如图1所示：俄罗斯方块嬉戏操作嬉戏环境显示右键右移左键左移下键加速下落上键变换形态最高积分当前
11、积分速度 图1 系统结构图4 系统具体设计与实现4.1嬉戏区模块（创建嬉戏区、处理玩家操作、显示操作结果） 主界面采纳canvas绘图元素，该的大小是由程序动态计算得到的。部分代码如下所示：/ 定义一个创建canvas组件的函数var createCanvas = function(rows , cols , cellWidth, cellHeight)tetris_canvas = document.createElement(canvas);/ 设置canvas组件的高度、宽度tetris_canvas.width = cols * cellWidth;tetris_canvas.heig
12、ht = rows * cellHeight;/ 设置canvas组件的边框tetris_canvas.style.border = 1px solid black;/ 获得canvas上的绘图APItetris_ctx = tetris_canvas.getContext(2d);/ 起先创建路径 tetris_ctx.beginPath();/ 绘制横向网络对应的路径for (var i = 1 ; i TETRIS_ROWS ; i+)tetris_ctx.moveTo(0 , i * CELL_SIZE);tetris_ctx.lineTo(TETRIS_COLS * CELL_SIZ
13、E , i * CELL_SIZE);/ 绘制竖向网络对应的路径for (var i = 1 ; i TETRIS_COLS ; i+)tetris_ctx.moveTo(i * CELL_SIZE , 0);tetris_ctx.lineTo(i * CELL_SIZE , TETRIS_ROWS * CELL_SIZE);tetris_ctx.closePath(); / 设置笔触颜色tetris_ctx.strokeStyle = #aaa;/ 设置线条粗细tetris_ctx.lineWidth = 0.3;/ 绘制线条tetris_ctx.stroke(); 起先嬉戏区流程图如图2所示： 嬉戏开局 随机选择方块类否是否到顶部？是 方块下落处理玩家操作否是否到顶部？Game over是 结束 图2 嬉戏区流程图 4.2嬉戏限制模块 为了处理方块的移动，程序要先给键盘绑定事务监听器，嬉戏时可通过按下键盘上的上、下、左、右键来限制方块的移动，下面是程序为按键事务绑定监听器的代码：window.onkeydown = function(evt)switch(evt.keyCode)/ 按下了“向下”箭头c
