网页设计课程设计报告书.docx
网页设计课程设计报告书 武汉理工大学华夏学院课程设计报告书 课程名称：网页设计 题目：俄罗斯方块游戏 系名：信息工程系 专业班级： 姓名： 学号： 指导教师: 2022 年1月14 日 课程设计任务书 课程名称：网页设计课程设计指导教师：苏永红 班级名称：软件1131 开课系、教研室：软件与信息安全一、课程设计目的与任务 网页设计与制作课程设计是网页设计与制作课程的后续实践课程，旨在通过一周的实践训练，加深学生对网页设计中的概念，原理和方法的理解，加强学生综合运用HTML、CSS、JavaScript、asp网页设计技术进行实际问题处理的能力，进一步提高学生进行分析问题和解决问题的能力，包含系统分析、系统设计、系统实现和系统测试的能力。 学生将在指导老师的指导下，完成从需求分析，系统设计，编码到测试的全过程。 二、课程设计的内容与基本要求 1、课程设计题目 俄罗斯方块游戏的设计与实现 2、课程设计内容 俄罗斯方块游戏是一个单击休闲小游戏。在俄罗斯方块的游戏界面中，有一组正在“下落”的方块(通常有4个，组成各种不同的形状)，游戏玩家需要做的事情就是控制正在“下落”的方块的移动，将这组方块摆放到合适的位置。只要下面“某一行”全部充满方块，没有空缺，那么这行就可以“消除”，上面的所有“方块”会“整体掉下来”。 对于HTML5、JavaScript学习者来说，学习开发这个小程序难度适中，而且能很好地培养学习者的学习乐趣。开发者需要从程序员的角度来看待玩家面对的游戏界面，游戏界面上的每个方块(既可以涂上不同的颜色，也可以绘制不同图片)在底层只要使用一个数值标识来代表即可，不同的方块使用不同的数值标识。 开发俄罗斯方块游戏除了需要理解游戏界面的数据模型之外，开发者还需要理解为游戏添加监听方法，通过事件监听可以监控玩家的按键动作，当玩家按下不同按键时，程序控制正在“下落”的方块移动或旋转。本程序稍微有点复杂的地方是，当方块组合旋转时，开发 者需要计算每个方块旋转后的坐标。 具体要求为： (1) 开发游戏界面。游戏界面大致分为两个区域：速度、积分显示区和主游戏界面区。 (2) 建立游戏的状态数据模型。对于游戏玩家而言，游戏界面上看到的“元素”千差万别、变化多端，但对于游戏开发者而言，游戏界面上的元素在底层都是一些数据，只是不同数据所绘制的图片存在差异而已，因此，建立游戏的状态数据模型是实现游戏逻辑的重要步骤。 (3) 实现游戏逻辑。定义了游戏状态模型后，接下来程序需要处理方块组合“掉落”，还需要处理方块组合“左移”、“右移”、“旋转”等，通过事件监听可以监控玩家的按键动作，当玩家按下不同按键时，程序控制正在“下落”的方块移动或旋转。此处使用Local Storage 来记录游戏状态。 (4) 初始化游戏状态。在游戏过程中，程序使用了Local Storage来保存游戏状态，包括游戏的当前积分、游戏速度、已有方块的状态等。为了正常使用Local Storage所记录的游戏状态，程序可以为window对象的onload事件绑定事件监听器，程序可以在windows 装载完成时通过Local Storage读取这些数据，并把这些数据显示出来。 为了提高分析问题和解决实际问题的能力。每个人需要检查游戏运行结果，设计报告文档，并提交纸质版的课程报告和电子版的网站设计资料，包括：源程序，网站运行效果截图，电子版的资料以班为单位刻成光盘后由学习委员统一提交。 3、设计报告撰写格式要求 1设计题目与要求 2 设计思想 3系统结构 4 系统详细设计与实现，内容包括各个模块的设计，模块的算法流程图，相关知识点 的使用，可以截取少量代码说明，并加上注释，图居中显示，图下方要有图编号和图名称。 5运行结果及结果分析 6 自我评价与总结 7 参考文献 三、课程设计步骤及时间进度和场地安排 本课程设计将安排在第20周, 教育技术中心。具体安排如下： 第一天下发任务书，学生查阅资料 第二、三天系统设计和原型开发，系统功能实现 第四天书写课程设计报告，系统调试测试打包和验收 星期一星期二星期三星期四星期五周次 第20周第3-6节第3-6节第3-6节第3-6节 地点现教212 现教212 现教212 现教212 四、课程设计考核及评分标准 课程设计考核将综合考虑学生考勤和参与度，系统设计方案正确性，系统设计和开发效果以及课程设计报告书的质量。具体评分标准如下： 设置六个评分点 （1）设计方案正确，具有可行性、创新性；25分 （2）系统开发效果较好；25分 （3）态度认真、刻苦钻研、遵守纪律；10分 （4）设计报告规范、课程设计报告质量高、参考文献充分20分 （5）课程设计答辩概念清晰，内容正确10分 （6）课程设计期间的课堂考勤、答疑与统筹考虑。10分 按上述六项分别记分后求和，总分按五级记分法记载最后成绩。 优秀（10090分），良好（8089分），中等（7079分），及格（6069分）， 不及格（059分） 1设计题目与要求 1.1设计题目 课设题目：俄罗斯方块游戏的设计与实现 1.2设计要求 (1) 开发游戏界面。游戏界面大致分为两个区域：速度、积分显示区和主游戏界面区。 (2) 建立游戏的状态数据模型。对于游戏玩家而言，游戏界面上看到的“元素”千差万别、变化多端，但对于游戏开发者而言，游戏界面上的元素在底层都是一些数据，只是不同数据所绘制的图片存在差异而已，因此，建立游戏的状态数据模型是实现游戏逻辑的重要步骤。 (3) 实现游戏逻辑。定义了游戏状态模型后，接下来程序需要处理方块组合“掉落”，还需要处理方块组合“左移”、“右移”、“旋转”等，通过事件监听可以监控玩家的按键动作，当玩家按下不同按键时，程序控制正在“下落”的方块移动或旋转。此处使用Local Storage 来记录游戏状态。 (4) 初始化游戏状态。在游戏过程中，程序使用了Local Storage来保存游戏状态，包括游戏的当前积分、游戏速度、已有方块的状态等。为了正常使用Local Storage所记录的游戏状态，程序可以为window对象的onload事件绑定事件监听器，程序可以在windows 装载完成时通过Local Storage读取这些数据，并把这些数据显示出来。 2 设计思想 俄罗斯方块游戏是一个单击休闲小游戏。在俄罗斯方块的游戏界面中，有一组正在“下落”的方块(通常有4个，组成各种不同的形状)，游戏玩家需要做的事情就是控制正在“下落”的方块的移动，将这组方块摆放到合适的位置。只要下面“某一行”全部充满方块，没 有空缺，那么这行就可以“消除”，上面的所有“方块”会“整体掉下来”。 开发者需要从程序员的角度来看待玩家面对的游戏界面，游戏界面上的每个方块(既可以涂上不同的颜色，也可以绘制不同图片)在底层只要使用一个数值标识来代表即可，不同的方块使用不同的数值标识。 开发俄罗斯方块游戏除了需要理解游戏界面的数据模型之外，开发者还需要理解为游戏添加监听方法，通过事件监听可以监控玩家的按键动作，当玩家按下不同按键时，程序控制正在“下落”的方块移动或旋转。本程序稍微有点复杂的地方是，当方块组合旋转时，开发者需要计算每个方块旋转后的坐标。 3系统结构 系统结构图如图1所示： 俄罗斯方块 游戏环境显示游戏操作 图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.height = rows * cellHeight; / 设置canvas 组件的边框 速度 当前积分 最高积分 上键变换形状 下键加速下落 左键左移 右键右移 tetris_canvas.style.border = "1px solid black" / 获取canvas上的绘图API tetris_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_SIZE , 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) / 按下了“向下”箭头 case 40: if(!isPlaying) return; moveDown(); break; / 按下了“向左”箭头 case 37: if(!isPlaying) return; moveLeft(); break; / 按下了“向右”箭头 case 39: if(!isPlaying)
