网页设计课程设计报告书(同名9952)

武汉理工大学华夏学院课程设计报告书课程名称：网页设计题目：俄罗斯方块游戏系名：信息工程系专业班级：姓名：学号：指导教师:2016年1月14日

课程设计任务书课程名称：网页设计课程设计指导教师：苏永红班级名称：软件1131开课系、教研室：软件与信息安全一、课程设计目的与任务网页设计与制作课程设计是《网页设计与制作》课程的后续实践课程，旨在通过一周的实践训练，加深学生对网页设计中的概念，原理和方法的理解，加强学生综合运用HTML、CSS、JavaScript、asp网页设计技术进行实际问题处理的能力，进一步提高学生进行分析问题和解决问题的能力，包含系统分析、系统设计、系统实现和系统测试的能力。学生将在指导老师的指导下，完成从需求分析，系统设计，编码到测试的全过程。二、课程设计的内容与基本要求1、课程设计题目俄罗斯方块游戏的设计与实现2、课程设计内容俄罗斯方块游戏是一个单击休闲小游戏。在俄罗斯方块的游戏界面中，有一组正在“下落”的方块(通常有4个，组成各种不同的形状)，游戏玩家需要做的事情就是控制正在“下落”的方块的移动，将这组方块摆放到合适的位置。只要下面“某一行”全部充满方块，没有空缺，那么这行就可以“消除”，上面的所有“方块”会“整体掉下来”。对于HTML5、JavaScript学习者来说，学习开发这个小程序难度适中，而且能很好地培养学习者的学习乐趣。开发者需要从程序员的角度来看待玩家面对的游戏界面，游戏界面上的每个方块(既可以涂上不同的颜色，也可以绘制不同图片)在底层只要使用一个数值标识来代表即可，不同的方块使用不同的数值标识。开发俄罗斯方块游戏除了需要理解游戏界面的数据模型之外，开发者还需要理解为游戏添加监听方法，通过事件监听可以监控玩家的按键动作，当玩家按下不同按键时，程序控制正在“下落”的方块移动或旋转。本程序稍微有点复杂的地方是，当方块组合旋转时，开发者需要计算每个方块旋转后的坐标。具体要求为：(1)开发游戏界面。游戏界面大致分为两个区域：速度、积分显示区和主游戏界面区。(2)建立游戏的状态数据模型。对于游戏玩家而言，游戏界面上看到的“元素”千差万别、变化多端，但对于游戏开发者而言，游戏界面上的元素在底层都是一些数据，只是不同数据所绘制的图片存在差异而已，因此，建立游戏的状态数据模型是实现游戏逻辑的重要步骤。(3)实现游戏逻辑。定义了游戏状态模型后，接下来程序需要处理方块组合“掉落”，还需要处理方块组合“左移”、“右移”、“旋转”等，通过事件监听可以监控玩家的按键动作，当玩家按下不同按键时，程序控制正在“下落”的方块移动或旋转。此处使用LocalStorage来记录游戏状态。俄罗斯方块 俄罗斯方块游戏操作游戏环境显示游戏操作游戏环境显示右键右移左键左移下键加速下落上键变换形状最高积分当前积分速度右键右移左键左移下键加速下落上键变换形状最高积分当前积分速度图1系统结构图4系统详细设计与实现4.1游戏区模块（创建游戏区、处理玩家操作、显示操作结果）主界面采用canvas绘图元素，该<canvas.../>的大小是由程序动态计算得到的。部分代码如下所示：//定义一个创建canvas组件的函数varcreateCanvas=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="1pxsolidblack"; //获取canvas上的绘图API tetris_ctx=tetris_canvas.getContext('2d'); //开始创建路径 tetris_ctx.beginPath(); //绘制横向网络对应的路径 for(vari=1;i<TETRIS_ROWS;i++) { tetris_ctx.moveTo(0,i*CELL_SIZE); tetris_ctx.lineTo(TETRIS_COLS*CELL_SIZE,i*CELL_SIZE); } //绘制竖向网络对应的路径 for(vari=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所示：游戏开局游戏开局随机选择方块类随机选择方块类否是否到顶部？否是否到顶部？ 是方块下落是方块下落处理玩家操作处理玩家操作否是否到顶部？否是否到顶部？Gameover是Gameover是结束结束图2游戏区流程图4.2游戏控制模块为了处理方块的移动，程序要先给键盘绑定事件监听器，游戏时可通过按下键盘上的上、下、左、右键来控制方块的移动，下面是程序为按键事件绑定监听器的代码：window.onkeydown=function(evt){ switch(evt.keyCode) { //按下了“向下”箭头 case40: if(!isPlaying) return; moveDown(); break; //按下了“向左”箭头 case37: if(!isPlaying) return; moveLeft(); break; //按下了“向右”箭头 case39: if(!isPlaying) return; moveRight(); break; //按下了“向上”箭头 case38: if(!isPlaying) return; rotate(); break; }}游戏控制流程图如图3所示：开始开始顶端出现方块顶端出现方块否是否可下落？否是否可下落？是是上下右左否是否充满游戏区？上下右左否是否充满游戏区？ 否是否是是否能变形？下落加速是否能变形？下落加速否是否能移位？否是否能移位？游戏结束游戏结束是是是是左右移位变形左右移位变形图3游戏控制流程图5运行结果及结果分析5.1游戏打开界面，如图4所示图4游戏打开界面5.2游戏进行中界面游戏玩的过程中,根据当前所玩分数变换速度，当达到500分速度为2，分数达到2000分速度为3，后面变换类似，相关界面如图5和图6所示：图5速度为2界面图6速度为3界面5.3游戏失败界面方块填满之后，游戏失败结束，如图7所示图7游戏失败界面6自我评价与总结本次课程设计开发的是基于HTML5的俄罗斯方块，通过这几天的开发，充分激发了我对网页设计的学习热情。这个游戏难度适中，对HTML5、JavaScript学习者来说是一个不错的选择，通过这次课程设计，我学会了单机游戏的界面分析与数据建模的能力，游戏玩家眼中看到的是游戏界面，而我们眼中看到的则是数据模型。本次课程设计提醒我还要多加学习几何变换、数学计算能力。网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，你不断的学习不要掉入技术的陷阱，你的网页设计技术一流，你对软件的掌握程度已经达到一定水平，但是你设计的网页确不堪目睹，这是因为网页设计是是介于平面设计和编程技术两者之间的"边缘科学."不仅涉及到美学,心理学,平面构成,色彩搭配等平面设计的方面的知识,还涉及到HTML,Javascript,css,ASP,php等编程语言技术方面的知识.只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的web页面,才能全面展现互联网这一新型媒体的独特魅力和多维空间的超强功能.注重实用，个人认为网页设计应该注重实用性，因为它是让人浏览的，是用户可以抚摸，可以评论，可以交互的。7参考文献［1］库少平.《网页设计基础教程》.北京邮电大学出版社，北京2010年1月 设计过程中质疑（或答辩