网页设计课程设计报告书.docx
《网页设计课程设计报告书.docx》由会员分享,可在线阅读,更多相关《网页设计课程设计报告书.docx(14页珍藏版)》请在冰豆网上搜索。
网页设计课程设计报告书
武汉理工大学华夏学院
课程设计报告书
课程名称:
网页设计
题目:
俄罗斯方块游戏
系名:
信息工程系
专业班级:
姓名:
学号:
指导教师:
2016年1月14日
课程设计任务书
课程名称:
网页设计课程设计指导教师:
苏永红
班级名称:
软件1131开课系、教研室:
软件与信息安全
一、课程设计目的与任务
网页设计与制作课程设计是《网页设计与制作》课程的后续实践课程,旨在通过一周的实践训练,加深学生对网页设计中的概念,原理和方法的理解,加强学生综合运用HTML、CSS、JavaScript、asp网页设计技术进行实际问题处理的能力,进一步提高学生进行分析问题和解决问题的能力,包含系统分析、系统设计、系统实现和系统测试的能力。
学生将在指导老师的指导下,完成从需求分析,系统设计,编码到测试的全过程。
二、课程设计的内容与基本要求
1、课程设计题目
俄罗斯方块游戏的设计与实现
2、课程设计内容
俄罗斯方块游戏是一个单击休闲小游戏。
在俄罗斯方块的游戏界面中,有一组正在“下落”的方块(通常有4个,组成各种不同的形状),游戏玩家需要做的事情就是控制正在“下落”的方块的移动,将这组方块摆放到合适的位置。
只要下面“某一行”全部充满方块,没有空缺,那么这行就可以“消除”,上面的所有“方块”会“整体掉下来”。
对于HTML5、JavaScript学习者来说,学习开发这个小程序难度适中,而且能很好地培养学习者的学习乐趣。
开发者需要从程序员的角度来看待玩家面对的游戏界面,游戏界面上的每个方块(既可以涂上不同的颜色,也可以绘制不同图片)在底层只要使用一个数值标识来代表即可,不同的方块使用不同的数值标识。
开发俄罗斯方块游戏除了需要理解游戏界面的数据模型之外,开发者还需要理解为游戏添加监听方法,通过事件监听可以监控玩家的按键动作,当玩家按下不同按键时,程序控制正在“下落”的方块移动或旋转。
本程序稍微有点复杂的地方是,当方块组合旋转时,开发者需要计算每个方块旋转后的坐标。
具体要求为:
(1)开发游戏界面。
游戏界面大致分为两个区域:
速度、积分显示区和主游戏界面区。
(2)建立游戏的状态数据模型。
对于游戏玩家而言,游戏界面上看到的“元素”千差万别、变化多端,但对于游戏开发者而言,游戏界面上的元素在底层都是一些数据,只是不同数据所绘制的图片存在差异而已,因此,建立游戏的状态数据模型是实现游戏逻辑的重要步骤。
(3)实现游戏逻辑。
定义了游戏状态模型后,接下来程序需要处理方块组合“掉落”,还需要处理方块组合“左移”、“右移”、“旋转”等,通过事件监听可以监控玩家的按键动作,当玩家按下不同按键时,程序控制正在“下落”的方块移动或旋转。
此处使用LocalStorage来记录游戏状态。
(4)初始化游戏状态。
在游戏过程中,程序使用了LocalStorage来保存游戏状态,包括游戏的当前积分、游戏速度、已有方块的状态等。
为了正常使用LocalStorage所记录的游戏状态,程序可以为window对象的onload事件绑定事件监听器,程序可以在windows装载完成时通过LocalStorage读取这些数据,并把这些数据显示出来。
为了提高分析问题和解决实际问题的能力。
每个人需要检查游戏运行结果,设计报告文档,并提交纸质版的课程报告和电子版的网站设计资料,包括:
源程序,网站运行效果截图,电子版的资料以班为单位刻成光盘后由学习委员统一提交。
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分
按上述六项分别记分后求和,总分按五级记分法记载最后成绩。
优秀(100~90分),良好(80~89分),中等(70~79分),及格(60~69分),
不及格(0~59分)
1设计题目与要求
1.1设计题目
课设题目:
俄罗斯方块游戏的设计与实现
1.2设计要求
(1)开发游戏界面。
游戏界面大致分为两个区域:
速度、积分显示区和主游戏界面区。
(2)建立游戏的状态数据模型。
对于游戏玩家而言,游戏界面上看到的“元素”千差万别、变化多端,但对于游戏开发者而言,游戏界面上的元素在底层都是一些数据,只是不同数据所绘制的图片存在差异而已,因此,建立游戏的状态数据模型是实现游戏逻辑的重要步骤。
(3)实现游戏逻辑。
定义了游戏状态模型后,接下来程序需要处理方块组合“掉落”,还需要处理方块组合“左移”、“右移”、“旋转”等,通过事件监听可以监控玩家的按键动作,当玩家按下不同按键时,程序控制正在“下落”的方块移动或旋转。
此处使用LocalStorage来记录游戏状态。
(4)初始化游戏状态。
在游戏过程中,程序使用了LocalStorage来保存游戏状态,包括游戏的当前积分、游戏速度、已有方块的状态等。
为了正常使用LocalStorage所记录的游戏状态,程序可以为window对象的onload事件绑定事件监听器,程序可以在windows装载完成时通过LocalStorage读取这些数据,并把这些数据显示出来。
2设计思想
俄罗斯方块游戏是一个单击休闲小游戏。
在俄罗斯方块的游戏界面中,有一组正在“下落”的方块(通常有4个,组成各种不同的形状),游戏玩家需要做的事情就是控制正在“下落”的方块的移动,将这组方块摆放到合适的位置。
只要下面“某一行”全部充满方块,没有空缺,那么这行就可以“消除”,上面的所有“方块”会“整体掉下来”。
开发者需要从程序员的角度来看待玩家面对的游戏界面,游戏界面上的每个方块(既可以涂上不同的颜色,也可以绘制不同图片)在底层只要使用一个数值标识来代表即可,不同的方块使用不同的数值标识。
开发俄罗斯方块游戏除了需要理解游戏界面的数据模型之外,开发者还需要理解为游戏添加监听方法,通过事件监听可以监控玩家的按键动作,当玩家按下不同按键时,程序控制正在“下落”的方块移动或旋转。
本程序稍微有点复杂的地方是,当方块组合旋转时,开发者需要计算每个方块旋转后的坐标。
3系统结构
系统结构图如图1所示:
图1系统结构图
4系统详细设计与实现
4.1游戏区模块(创建游戏区、处理玩家操作、显示操作结果)
主界面采用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_ctx.moveTo(0,i*CELL_SIZE);
tetris_ctx.lineTo(TETRIS_COLS*CELL_SIZE,i*CELL_SIZE);
}
//绘制竖向网络对应的路径
for(vari=1;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所示:
图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月
设计过程中质疑(或答辩)记载:
1.主界面使用什么元素制成?
答:
主界面采用canvas绘图元素
2.怎样用键盘控制界面?
答:
对按键绑定事件监听器。
3.用什么记录游戏的最高积分数据?
答:
读取LocalStorage读取记录。
指导教师评语:
签名:
年月日
欢迎您的下载,
资料仅供参考!
致力为企业和个人提供合同协议,策划案计划书,学习资料等等
打造全网一站式需求