基于H5的角色扮演游戏.docx
《基于H5的角色扮演游戏.docx》由会员分享，可在线阅读，更多相关《基于H5的角色扮演游戏.docx（19页珍藏版）》请在冰豆网上搜索。
基于H5的角色扮演游戏
吉林大学珠海学院
毕业设计
基于H5的角色扮演游戏
系别：
计算机科学与技术系
专业名称：
计算机科学与技术
学生姓名：
学号：
指导教师姓名、职称：
讲师
完成日期：
2017年4月10日
摘要
目前，游戏行业的发展，游戏的种类也是各式各样的，多姿多彩，主要分为6类：
角色扮演、冒险、动作、休闲、模拟和其他，他们各有几十种分支，形成了庞大的游戏体系。
然后按照游戏平台分类的话，可以分为街机游戏、手机游戏、主机游戏、电脑游戏、、网页游戏等等。
其中网页游戏是开发于Web浏览器的多人网络在线互动游戏，不需要下载游戏客户端，不会出现机器配置不够的问题，最重要的是开启、关闭与切换极其方便，尤其适合时间比较闲散的人群。
原本的网页游戏是Flash，但是HTML5的出现，使得网页游戏有了很大的改变。
开发者可以使用新特性Canvas和JavaScript开发游戏，更有强大的Webgl可以制作3D网页游戏。
所以网页游戏的前景是一片光明。
我这次所做的游戏是使用的Canvas开发的一款小型角色扮演游戏。
使用了HTML5和JavaScript开的网页游戏。
关键词:
HTML5；网页游戏；Canvas；JavaScript
Abstract
Atpresent,thedevelopmentofthegameindustry,thegameisalsoavarietyoftypes,colorful,mainlydividedintosixcategories:
role-playing,adventure,action,leisure,simulationandother,theyhavedozensofbranches,formedHugegamesystem.Andthenclassifiedaccordingtothegameplatform,canbedividedintoarcadegames,mobilegames,hostgames,computergames,webgamesandsoon.WhichisthedevelopmentofwebgamesintheWebbrowsermultiplayeronlineinteractivegame,donotneedtodownloadthegameclient,themachineconfigurationwillnotbeenoughproblems,themostimportantthingistoopen,closeandswitchextremelyconvenient,especiallyformoreidletimeOfthecrowd.TheoriginalwebgameisFlash,buttheemergenceofHTML5,makingthewebgamehaschangedalot.DeveloperscanusethenewfeaturesCanvasandJavaScripttodevelopgames,morepowerfulWebglcancreate3Dwebgames.Sotheprospectsforwebgamesarebright
ThegameImadethistimewasasmallrole-playinggamedevelopedbyCanvas.UseHTML5andJavaScripttoopenwebgames.
Keywords：
HTML5；Webgames；Canvas；JavaScript
目录
绪论1
1系统简介1
1.1网站简介1
1.2开发环境简介1
1.2.1HTML5概述2
1.2.2JavaScript概述2
2游戏需求分析4
2.1系统需求4
2.2需求分析4
2.3系统功能分析图5
3游戏总体设计6
3.1游戏流程图6
3.2总体功能设计6
3.2.1游戏设计目标6
3.3游戏角色和剧情介绍7
3.3.1游戏角色7
3.3.2剧情简单分析7
3.4游戏类型的分析7
3.4.1地图属性介绍7
3.4.2游戏角色类的设计9
3.5游戏的键盘事件和主循环12
3.5.1游戏键盘事件的响应12
3.5.2游戏的主要循环函数13
4设计思想与实现15
4.1游戏开始的界面15
4.2游戏场景16
4.4游戏失败界面17
5系统测试与运行18
5.1系统运行环境18
5.2游戏测试18
6总结与展望19
6.1总结19
6.2展望19
参考文献19
致谢20
绪论
网页游戏（Webgame）简称页游，是基于Web浏览器的网络在线多人互动游戏。
网页游戏源于上个世纪90年代，但受浏览器技术不成熟等原因一直反响平平。
近年，随着网络技术的飞速发展和网页游戏制作技术的不断提升，使网页游戏逐渐回到人们的视线之中，并且发展迅猛，特别是Unity引擎的搭载、HTML5技术的普及，使网页游戏品质得到很大的提高，给网页游戏发展增添动力。
网页游戏之所以的迅速发展，主要有以下原因：
其一，电脑的普及与互联网的发展为网页游戏提供了良好的发展平台，其二，中国拥有网民1亿多，给网页游戏创造了庞大的消费市场，其三，现代生活节奏的加快，使得人们生活和工作压力加大，特别是城市的上班族和学生，希望在游戏中得到自我的释放，但又受到工作和学习的时间限制，无法抽出大量的时间放到游戏上，网页游戏成为他们的首要选择，也给网页游戏奠定了用户根基，其四，网页游戏不需要下载客户端，想玩就能玩，在时间上具有可间断性，并且不受电脑硬件的限制，相对网络有端游戏相比具有节约时间上的优势。
其五、网页游戏技术门槛低，开发周期短，开发资金少，较之其他有端游戏具有较大的成本优势。
1系统简介
1.1网站简介
网站（Website）是指在Internet上根据一定的规则，使用HTML（标准通用标记语言下的一个应用）等工具制作的用于展示特定内容相关网页的集合。
换句话说，网站是一种沟通工具，我们可以通过网站来发布自己想要公共的资讯、新闻，或者使用网站来提供相关的网络服务。
我们可以通过网页浏览器来访问网站，来得到自己需要的资讯或者享受网络服务。
1.2开发环境简介
该网页游戏是利用HTML5＋JavaScript进行开发的。
HTML5的canvas搭配JavaScript脚本语言，可以开发各种网页游戏和传统的flash相比较：
HTML5自适应屏幕大小，自动调节排版，版面无论是pc还是平板或者手机打开都能看到很合理的版面展示，不用放大缩小来浏览，方便，还有一点就是加载速度比flash快很多，体验感更好
1.2.1HTML5概述
HTML是一种超文本标记语言，标准通用标记语言的应用。
“超文本”是指页面可以包含图片、链接，甚至音乐、程序等非文字元素。
HTML5，万维网的核心语言、标准通用标记语言下的应用超文本标记语言（HTML）的第五次重大变动。
HTML5能够让你摆脱对平台的依赖，用户只要轻易打开浏览器，直接就可以使用你的应用，而不需要经过Store的审核，和安装的步骤。
实时更新，通常平台的审核都需要很长的一段时间，如果你发布之后发现问题会变得非常糟糕和难解决。
Web方式就不需要考虑这种问题。
HTML5可以做到跨平台，多数核心代码不用重写，Javascript的代码可以在许多地方都可以用到，包括移动应用、移动网站、PC网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。
所以说，这种方式并非完全跨平台，但这样就可以减轻大量的工作量了，特别是关系到后期的工作的开展。
HTML5有着这些特征：
语义特性、本地存储特性、设备兼容性、连接特性、网页多媒体特性、三维图形及特效特性、CSS3特性。
Canvas是HTML5的新元素，CanvasAPI（画布）是在HTML5中新增的标签用于在网页实时生各种有趣成图像，并且可以操作图像的改变，基本上它是一个可以使用JavaScript来操作的位图（bitmap）。
我们可以利用Canvas的循环画画和擦拭，开发游戏。
1.2.2JavaScript概述
JavaScript是一种直译脚本语言，是一种动态类型，弱类型，基于原型语言，内置支持型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
JavaScript提供了许多内置的功能来访问HTML文档的各个部分，包括CSS元素中的样式。
JavaScript由浏览器逐行解释。
还有就是JavaScript不需要复杂的编程工具只需要记事本和浏览器就可以进行编程和测试，简单方便。
在客户端脚本语言语言（如JavaScript）出现之前，客户端的浏览器通过网络将传统的数据提交和身份验证操作执行到服务器。
如果数据量大，对于网络和服务器资源来说，真的是一个隐患。
但是使用JavaScript就可以在客户端进行数据操作。
JavaScript的对象可以方便地操作各种浏览器，可以使用JavaScript来控制浏览器的外观，甚至操作模式，可以根据用户的需求“定制”浏览器，使更简单方便。
JavaScript可以使各种任务只有在用户端完成，而无需参与网络和服务器，支持分布式计算和处理。
2游戏需求分析
2.1系统需求
角色扮演游戏的本质就是游戏人物的属性，即把现实中人的属性虚拟到游戏中，使得游戏人有生命值，可以走路，跑步，交谈以及打斗等等，为了游戏性的提高，角色通常会有一些特有的技能，或是恢复生命值，或是增加攻击力等等。
诸如此类都是RPG游戏设计的要素。
一个成功的角色扮演游戏离不开一个成功的故事剧情，一个成功的故事剧情可以增加玩家的代入感，使得有引人入胜的作用。
同时一个成功的战斗系统也是必不可少的，一个战斗系统不仅能使游戏更加饱满、绚丽，它就可以给玩者带来更大的满足与成就。
2.2需求分析
首先，设计游戏的前提就是要以游戏玩家为中心。
人们认识客观事物，主要就是通过感觉、知觉、注意、印象、思维想象等来进行。
实际上，也就是运用信息论以及计算机的类比、模拟、验证等方法来研究知识是如何获取、储存、交流、利用的。
一般地，人们将信息加工心理学又称为狭义的认知心理学。
根据玩家心理学和认知科学，有了如下设计基本原则：
（1）一致性原则。
即从任务、信息的表达、界面控制操作等方面与玩家体会熟悉的形式尽可能保持一致。
（2）兼容性。
在玩家憧憬和界面设计的现实之间符合，要基于玩家以前的经验。
（3）适应性。
玩家应处于控制地位，因此界面应在多方面适应玩家。
（4）指导性。
界面设计任务提醒和反馈信息来指导用户，做到以玩家为本。
2.3系统功能分析图
下图列出游戏里各个部件的功能。
图2-1系统功能分析图
3游戏总体设计
3.1游戏流程图
游戏流程图：
图3-1游戏流程图
3.2总体功能设计
3.2.1游戏设计目标
游戏总的设计是为了达到以下目标：
HTML5游戏游戏剧情的完整，主角各种属性的完整，怪物属性，游戏地图的渲染。
3.3游戏角色和剧情介绍
3.3.1游戏角色
游戏主角：
一个来异世界的青年人，传说中的救世主，被赋予了拯救嘉德世界的重任。
神秘NPC：
出场为主角介绍了嘉德世界的以及游戏操作和主角的任务。
火把：
可以恢复主角的生命值。
小怪物：
是击败魔王之前的历练，为主角增加攻击力。
大魔王（夏朔德）：
游戏最后的BOSS。
公主（伊莲蒙碧）：
主角要拯救的人。
拳师嘉德：
创造游戏世界的人，没有出现。
3.3.2剧情简单分析
如同其他穿越小说一样，主角在糊糊涂涂中醒来，发现自己身处于一个陌生的世界。
对这个陌生的世界一无所知。
这个时候，需要一个NPC对主角介绍了这个游戏世界叫做拳师嘉德创造的游戏世界。
但是这个世界最近诞生了一个魔王夏朔德，掳走了美丽的公主伊莲蒙碧，扬言要毁灭掉这个世界。
然后如同预言一样，主角穿越到这个世界成为传说中的救世主。
然后主角踏上了消灭大魔王并拯救公主的道路。
在路上，主角遇到了很多大魔王的小弟，并把它们消灭，获得了攻击力的加成。
同时通过小火把恢复生命值。
最后战胜了大魔王拯救了公主和嘉德世界。
3.4游戏类型的分析
3.4.1地图属性介绍
本游戏游戏地图是由一个二维数组进行存储的，并通过JavaScript渲染到Canvas上，地图的二维数组定义如下：
varmap=new Array（）;
for（var i=0;i<10;i++）{
map[i]=new Array（）;
for（var j=0;j<10;j++）{
map[i][j]=mapArray[j*10+i];
}
}
在map数组的数值为0是草地为不可行走区域，map数组的数值为1为道路可行走区域。
渲染地图函数为：
context.drawImage（img,sx,sy,swidth,sheight,x,y,width,height）
各个参数如下表：
img
规定要使用的图像、画布或视频。
sx
可选。
开始剪切的x坐标位置。
sy
可选。
开始剪切的y坐标位置。
swidth
可选。
被剪切图像的宽度。
sheight
可选。
被剪切图像的高度。
x
在画布上放置图像的x坐标位置。
y
在画布上放置图像的y坐标位置。
width
可选。
要用的图像的宽度。
（伸展或缩小图像）
height
可选。
要用的图像的高度。
（伸展或缩小图像）
游戏地图渲染实现如下：
functiondrawMap（）{
varimgm=newImage（）;
imgm.src="meadow.jpg";
varimgl=newImage（）;
imgl.src="road.jpg";
varcanvas=document.getElementById（"Canvas"）;
varcxt=canvas.getContext（"2d"）;
for（vari=0;i<10;i++）{
for（varj=0;j<10;j++）{
if（map[i][j]=="0"）{
cxt.drawImage（imgm,i*50,j*50,50,50）;
}
if（map[i][j]=="1"）{
cxt.drawImage（imgl,i*50,j*50,50,50）;
}
}
}
}
图3-1游戏地图
3.4.2游戏角色类的设计
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。
同时它也是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。
但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。
所以Javascript的Object（对象）最难。
因为Javascript的Object模型很独特，和其他语言都不一样。
角色类型的设计如下：
functionrole（）{
this.HP=1000;//角色生命值
this.Power=1000;//角色攻击力
this.Defense=100;//角色防御
this.axisX=0;//角色位置的X坐标
this.axisY=9;//角色位置的Y坐标
this.img="";//角色图片位置
this.Left=function（）{//向左移动函数
if（map[this.axisX-1][this.axisY]=="1"）{
this.axisX=this.axisX-1;
}
};
this.Right=function（）{//向右移动函数
if（map[this.axisX+1][this.axisY]=="1"）{
this.axisX=this.axisX+1;
}
};
this.Up=function（）{//向上移动函数
if（map[this.axisX][this.axisY-1]=="1"）{
this.axisY=this.axisY-1;
}
};
this.Down=function（）{//向下移动函数
if（map[this.axisX][this.axisY+1]=="1"）{
this.axisY=this.axisY+1;
}
};
}
varRole=newrole（）;
怪物类型的设计如下：
functionenemy（x,y,hp,power,defense）{
this.HP=hp;//怪物血量
this.Power=power;//怪物攻击力
this.Defense=defense;//怪物防御力
this.axisX=x;//怪物位置X坐标
this.axisY=y;//怪物位置Y坐标
this.hit=function（）{//碰撞触发函数
war（this.HP,this.Power,this.Defense）;//普通战斗函数
};
}
火把的类型设计如下：
functionfire（x,y）{
this.axisX=x;//火把位置X坐标
this.axisY=y;//火把位置Y坐标
this.hit=function（）{//火把碰撞触发函数
Role.HP=Role.HP+100;
this.axisX=-1;
this.axisY=1;
}
}
大BOSS的类型设计如下：
functionBOSS（x,y,hp,power,defense）{
this.HP=hp;//怪物血量
this.Power=power;//怪物攻击力
this.Defense=defense;//怪物防御力
this.axisX=x;//怪物位置X坐标
this.axisY=y;//怪物位置Y坐标
this.hit=function（）{//碰撞触发函数
};
this.Bosswar=function（）{//Boss战斗函数，胜利跳到胜利界面
war（this.HP,this.Power,this.Defense）;//普通战斗函数
if（this.HP=<"0"）
varcanvas=document.getElementById（"Canvas"）;
vargameWin=document.getElementById（"win"）;
canvas.style.display = "none";
gameoverDiv.style.display = "block";};
}
图3-2游戏元素精灵图
3.5游戏的键盘事件和主循环
3.5.1游戏键盘事件的响应
描述：
HTML5Canvas本身不支持键盘事件监听与获取，常用的有两种方法来解决这个问题：
通过windows对象来实现Canvas键盘事件监听与处理
通过windows对象来实现Canvas键盘事件监听与处理
这里是通过方法b实现的，实现代码如下：
canvas.addEventListener（'keyup', doKeyDown）; canvas.focus（）; setInterval（"ffit（Role,enemy1）",100）;
functiondoKeyDown（e）{
var keyID = e.keyCode;
if（keyID === 38 || keyID === 87）{// up arrow and W
Role.Up（）;
e.preventDefault（）;
drawrole（）;
}
if（keyID === 39 || keyID === 68）{// right arrow and D
Role.Right（）;
e.preventDefault（）;
drawrole（）;
}
if（keyID === 40 || keyID === 83）{// down arrow and S
Role.Down（）;
e.preventDefault（）;
drawrole（）;
}
if（keyID === 37 || keyID === 65）{// left arrow and A
Role.Left（）;
e.preventDefault（）;
drawrole（）;
}
}
3.5.2游戏的主要循
升级会员 