网页设计课程设计报告书

1、精品文档武汉理工大学华夏学院课程设计报告书课程名称：网页设计题目：俄罗斯方块游戏系名：信息工程系专业班级：姓名：学号：指导教师 :2016 年1 月14日。1 欢迎下载精品文档课程设计任务书课程名称：网页设计课程设计指导教师：苏永红班级名称：软件 1131开课系、教研室：软件与信息安全一、课程设计目的与任务网页设计与制作课程设计是网页设计与制作课程的后续实践课程，旨在通过一周的实践训练，加深学生对网页设计中的概念，原理和方法的理解，加强学生综合运用HTML、CSS、 JavaScript、 asp 网页设计技术进行实际问题处理的能力，进一步提高学生进行分析问题和解决问题的能力，包含系统分析、系

2、统设计、系统实现和系统测试的能力。学生将在指导老师的指导下，完成从需求分析，系统设计，编码到测试的全过程。二、课程设计的内容与基本要求1、课程设计题目俄罗斯方块游戏的设计与实现2、课程设计内容俄罗斯方块游戏是一个单击休闲小游戏。在俄罗斯方块的游戏界面中，有一组正在 “下落”的方块 ( 通常有 4个，组成各种不同的形状) ，游戏玩家需要做的事情就是控制正在“下落”的方块的移动，将这组方块摆放到合适的位置。只要下面“某一行”全部充满方块，没有空缺，那么这行就可以“消除”，上面的所有“方块”会“整体掉下来”。对于 HTML5、 JavaScript学习者来说，学习开发这个小程序难度适中，而且能很好地

3、培养学习者的学习乐趣。开发者需要从程序员的角度来看待玩家面对的游戏界面，游戏界面上的每个方块 ( 既可以涂上不同的颜色， 也可以绘制不同图片 ) 在底层只要使用一个数值标识来代表即可，不同的方块使用不同的数值标识。开发俄罗斯方块游戏除了需要理解游戏界面的数据模型之外，开发者还需要理解为游戏添加监听方法， 通过事件监听可以监控玩家的按键动作，当玩家按下不同按键时，程序控制正在“下落”的方块移动或旋转。本程序稍微有点复杂的地方是，当方块组合旋转时，开发者需要计算每个方块旋转后的坐标。具体要求为：(1) 开发游戏界面。游戏界面大致分为两个区域：速度、积分显示区和主游戏界面区。(2) 建立游戏的状态数

4、据模型。对于游戏玩家而言，游戏界面上看到的“元素”千差万别、 变化多端，但对于游戏开发者而言，游戏界面上的元素在底层都是一些数据，只是不同数据所绘制的图片存在差异而已， 因此，建立游戏的状态数据模型是实现游戏逻辑的重要步骤。(3) 实现游戏逻辑。定义了游戏状态模型后，接下来程序需要处理方块组合“掉落” ，还需要处理方块组合 “左移”、“右移”、“旋转” 等，通过事件监听可以监控玩家的按键动作，当玩家按下不同按键时， 程序控制正在 “下落” 的方块移动或旋转。 此处使用 Local Storage来记录游戏状态。2 欢迎下载精品文档(4)初始化游戏状态。在游戏过程中，程序使用了Local Sto

5、rage来保存游戏状态，包括游戏的当前积分、游戏速度、已有方块的状态等。为了正常使用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分按上述六项分别记分后求和，总分按五级记分法记载最后成绩。优秀（ 100 90分），良好（80 89分），中等（70 79分），及格（60 69分），不及格（ 0 59 分）。3 欢迎下载精品文档1 设计题目与要求1.1

8、设计题目课设题目：俄罗斯方块游戏的设计与实现1.2 设计要求(1) 开发游戏界面。游戏界面大致分为两个区域：速度、积分显示区和主游戏界面区。(2) 建立游戏的状态数据模型。对于游戏玩家而言，游戏界面上看到的“元素”千差万别、 变化多端，但对于游戏开发者而言，游戏界面上的元素在底层都是一些数据，只是不同数据所绘制的图片存在差异而已， 因此，建立游戏的状态数据模型是实现游戏逻辑的重要步骤。(3) 实现游戏逻辑。定义了游戏状态模型后，接下来程序需要处理方块组合“掉落” ，还需要处理方块组合 “左移”、“右移”、“旋转” 等，通过事件监听可以监控玩家的按键动作，当玩家按下不同按键时， 程序控制正在 “

9、下落” 的方块移动或旋转。 此处使用 Local Storage来记录游戏状态。(4)初始化游戏状态。在游戏过程中，程序使用了Local Storage来保存游戏状态，包括游戏的当前积分、游戏速度、已有方块的状态等。为了正常使用Local Storage 所记录的游戏状态，程序可以为window 对象的 onload 事件绑定事件监听器，程序可以在windows装载完成时通过Local Storage读取这些数据，并把这些数据显示出来。2 设计思想俄罗斯方块游戏是一个单击休闲小游戏。在俄罗斯方块的游戏界面中，有一组正在 “下落”的方块 ( 通常有 4个，组成各种不同的形状 ) ，游戏玩家需要做

10、的事情就是控制正在“下落”的方块的移动，将这组方块摆放到合适的位置。只要下面“某一行”全部充满方块，没有空缺，那么这行就可以“消除”，上面的所有“方块”会“整体掉下来”。开发者需要从程序员的角度来看待玩家面对的游戏界面，游戏界面上的每个方块( 既可以涂上不同的颜色，也可以绘制不同图片) 在底层只要使用一个数值标识来代表即可，不同的方块使用不同的数值标识。开发俄罗斯方块游戏除了需要理解游戏界面的数据模型之外，开发者还需要理解为游戏添加监听方法， 通过事件监听可以监控玩家的按键动作，当玩家按下不同按键时，程序控制正在“下落”的方块移动或旋转。本程序稍微有点复杂的地方是，当方块组合旋转时，开发者需要

11、计算每个方块旋转后的坐标。3 系统结构系统结构图如图1 所示：。4 欢迎下载精品文档俄罗斯方块游戏环境显示游戏操作速当最上下左右度前高键键键键积积变加左右分分换速移移形下状落图 1系统结构图4 系统详细设计与实现4.1 游戏区模块（创建游戏区、处理玩家操作、显示操作结果）主界面采用 canvas 绘图元素，该 <canvas./> 的大小是由程序动态计算得到的。部分代码如下所示：/ 定义一个创建 canvas 组件的函数var createCanvas = function(rows , cols , cellWidth, cellHeight)tetris_canvas = do

12、cument.createElement("canvas");/ 设置 canvas 组件的高度、宽度tetris_canvas.width = cols * cellWidth;tetris_canvas.height = rows * cellHeight;/ 设置 canvas 组件的边框tetris_canvas.style.border = "1px solid black"/ 获取 canvas 上的绘图 APItetris_ctx = tetris_canvas.getContext('2d');/ 开始创建路径tetris

13、_ctx.beginPath();/ 绘制横向网络对应的路径for (var i = 1 ; i < TETRIS_ROWS ; i+)tetris_ctx.moveTo(0 , i * CELL_SIZE);tetris_ctx.lineTo(TETRIS_COLS * CELL_SIZE , i * CELL_SIZE);/ 绘制竖向网络对应的路径for (var i = 1 ; i < TETRIS_COLS ; i+)tetris_ctx.moveTo(i * CELL_SIZE , 0);。5 欢迎下载精品文档tetris_ctx.lineTo(i * CELL_SIZE

14、 , TETRIS_ROWS * CELL_SIZE);tetris_ctx.closePath();/ 设置笔触颜色tetris_ctx.strokeStyle = "#aaa"/ 设置线条粗细tetris_ctx.lineWidth = 0.3;/ 绘制线条tetris_ctx.stroke();游戏区流程图如图2 所示：开始游戏开局随机选择方块类否是否到顶部？方块下落是处理玩家操作否是否到顶部？是Game over结束图 2游戏区流程图。6 欢迎下载精品文档4.2 游戏控制模块为了处理方块的移动， 程序要先给键盘绑定事件监听器， 游戏时可通过按下键盘上的上、下、左、右

15、键来控制方块的移动，下面是程序为按键事件绑定监听器的代码：window.onkeydown = function(evt)switch(evt.keyCode)/ 按下了“向下”箭头case 40:if(!isPlaying)return;moveDown();break;/ 按下了“向左”箭头case 37:if(!isPlaying)return;moveLeft();break;/ 按下了“向右”箭头case 39:if(!isPlaying)return;moveRight();break;/ 按下了“向上”箭头case 38:if(!isPlaying)return;rotate()

16、;break;。7 欢迎下载精品文档游戏控制流程图如图上否是否能变形？是变形3 所示：开始顶端出现方块否是否可下落？是下左右否是否充满游戏区？是下落加速否是否能移位？游戏结束是左右移位图 3游戏控制流程图。8 欢迎下载精品文档5 运行结果及结果分析5.1 游戏打开界面，如图4 所示图 4 游戏打开界面。9 欢迎下载精品文档5.2 游戏进行中界面游戏玩的过程中, 根据当前所玩分数变换速度，当达到500 分速度为2，分数达到2000分速度为3，后面变换类似，相关界面如图5 和图 6 所示：图 5 速度为 2界面图 6速度为 3界面。10 欢迎下载精品文档5.3 游戏失败界面方块填满之后，游戏失败结

17、束，如图7 所示图 7 游戏失败界面6 自我评价与总结本次课程设计开发的是基于 HTML5的俄罗斯方块， 通过这几天的开发， 充分激发了我对网页设计的学习热情。 这个游戏难度适中， 对 HTML5、JavaScript 学习者来说是一个不错的选择， 通过这次课程设计，我学会了单机游戏的界面分析与数据建模的能力，游戏玩家眼中看到的是游戏界面，而我们眼中看到的则是数据模型。本次课程设计提醒我还要多加学习几何变换、数学计算能力。网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，你不断的学习不要掉入技术的陷阱，你的网页设计技术一流，你对软件的掌握程度已经达到一定水平，但是你设计的网页确不堪目睹， 这是因为网页设计是是介于平面设计和编程技术两者之间的" 边缘科学 ." 不仅涉及到美学 , 心理学 , 平面构成 , 色彩搭配等平面设计的方面的知识, 还涉及到 HTML,Javascript,css,ASP,php等编程语言技术方面的知识 . 只有综合运用多种知识 , 才能设计出视听特效 , 动感十足 , 富于个性的 web页面 , 才能全面展现互联网这一新型媒体的独。11 欢迎下载精品文档特魅力和多维空间的超强功能 . 注重实用，个人认为网页设计应该注重实用性，因为它是让人浏览的，