基于H5的角色扮演游戏.docx

1、基于H5的角色扮演游戏吉林大学珠海学院毕 业 设 计基于H5的角色扮演游戏系 别： 计算机科学与技术系专 业 名 称： 计算机科学与技术学 生 姓 名： 学 号： 指导教师姓名、职称： 讲师完成日期：2017年 4 月 10 日摘 要目前，游戏行业的发展，游戏的种类也是各式各样的，多姿多彩，主要分为6类：角色扮演、冒险、动作、休闲、模拟和其他，他们各有几十种分支，形成了庞大的游戏体系。然后按照游戏平台分类的话，可以分为街机游戏、手机游戏、主机游戏、电脑游戏、网页游戏等等。其中网页游戏是开发于Web浏览器的多人网络在线互动游戏，不需要下载游戏客户端，不会出现机器配置不够的问题，最重要的是开启、关

2、闭与切换极其方便，尤其适合时间比较闲散的人群。原本的网页游戏是Flash，但是HTML 5的出现，使得网页游戏有了很大的改变。开发者可以使用新特性Canvas和JavaScript开发游戏，更有强大的Webgl可以制作3D网页游戏。所以网页游戏的前景是一片光明。我这次所做的游戏是使用的Canvas开发的一款小型角色扮演游戏。使用了HTML 5 和JavaScript开的网页游戏。关键词: HTML 5；网页游戏；Canvas；JavaScriptAbstractAt present, the development of the game industry, the game is also

3、a variety of types, colorful, mainly divided into six categories: role-playing, adventure, action, leisure, simulation and other, they have dozens of branches, formed Huge game system. And then classified according to the game platform, can be divided into arcade games, mobile games, host games, com

4、puter games, web games and so on. Which is the development of web games in the Web browser multiplayer online interactive game, do not need to download the game client, the machine configuration will not be enough problems, the most important thing is to open, close and switch extremely convenient,

5、especially for more idle time Of the crowd. The original web game is Flash, but the emergence of HTML 5, making the web game has changed a lot. Developers can use the new features Canvas and JavaScript to develop games, more powerful Webgl can create 3D web games. So the prospects for web games are

6、brightThe game I made this time was a small role-playing game developed by Canvas. Use HTML 5 and JavaScript to open web games.Key words：HTML 5；Web games；Canvas；JavaScript 目 录绪 论 11 系统简介 11.1 网站简介 11.2 开发环境简介 11.2.1 HTML 5概述 21.2.2 JavaScript概述 22 游戏需求分析 42.1 系统需求 42.2 需求分析 42.3 系统功能分析图 53 游戏总体设计 63

7、.1 游戏流程图 63.2 总体功能设计 63.2.1 游戏设计目标 63.3 游戏角色和剧情介绍 73.3.1 游戏角色 73.3.2 剧情简单分析 73.4 游戏类型的分析 73.4.1 地图属性介绍 73.4.2游戏角色类的设计 93.5 游戏的键盘事件和主循环 123.5.1 游戏键盘事件的响应 123.5.2 游戏的主要循环函数 134设计思想与实现 154.1 游戏开始的界面 154.2 游戏场景 164.4 游戏失败界面 175系统测试与运行 185.1 系统运行环境 185.2 游戏测试 186总结与展望 196.1总结 196.2展望 19参 考 文 献 19致 谢 20绪

8、论网页游戏（Webgame）简称页游，是基于Web浏览器的网络在线多人互动游戏。网页游戏源于上个世纪90年代，但受浏览器技术不成熟等原因一直反响平平。近年，随着网络技术的飞速发展和网页游戏制作技术的不断提升，使网页游戏逐渐回到人们的视线之中，并且发展迅猛，特别是Unity引擎的搭载、HTML 5技术的普及，使网页游戏品质得到很大的提高，给网页游戏发展增添动力。网页游戏之所以的迅速发展，主要有以下原因：其一，电脑的普及与互联网的发展为网页游戏提供了良好的发展平台，其二，中国拥有网民1亿多，给网页游戏创造了庞大的消费市场，其三，现代生活节奏的加快，使得人们生活和工作压力加大，特别是城市的上班族和学

9、生，希望在游戏中得到自我的释放，但又受到工作和学习的时间限制，无法抽出大量的时间放到游戏上，网页游戏成为他们的首要选择，也给网页游戏奠定了用户根基，其四，网页游戏不需要下载客户端，想玩就能玩，在时间上具有可间断性，并且不受电脑硬件的限制，相对网络有端游戏相比具有节约时间上的优势。其五、网页游戏技术门槛低，开发周期短，开发资金少，较之其他有端游戏具有较大的成本优势。1 系统简介1.1 网站简介网站(Website)是指在Internet上根据一定的规则，使用HTML（标准通用标记语言下的一个应用）等工具制作的用于展示特定内容相关网页的集合。换句话说，网站是一种沟通工具，我们可以通过网站来发布自己

10、想要公共的资讯、新闻，或者使用网站来提供相关的网络服务。我们可以通过网页浏览器来访问网站，来得到自己需要的资讯或者享受网络服务。1.2 开发环境简介该网页游戏是利用HTML 5JavaScript进行开发的。HTML 5的canvas搭配JavaScript脚本语言，可以开发各种网页游戏和传统的flash相比较：HTML 5 自适应屏幕大小，自动调节排版，版面无论是pc还是平板或者手机打开都能看到很合理的版面展示，不用放大缩小来浏览，方便，还有一点就是加载速度比flash快很多，体验感更好1.2.1 HTML 5概述HTML是一种超文本标记语言，标准通用标记语言的应用。“超文本”是指页面可以包

11、含图片、链接，甚至音乐、程序等非文字元素。HTML 5，万维网的核心语言、标准通用标记语言下的应用超文本标记语言（HTML）的第五次重大变动。HTML 5能够让你摆脱对平台的依赖，用户只要轻易打开浏览器，直接就可以使用你的应用，而不需要经过Store的审核，和安装的步骤。实时更新，通常平台的审核都需要很长的一段时间，如果你发布之后发现问题会变得非常糟糕和难解决。Web方式就不需要考虑这种问题。HTML 5可以做到跨平台，多数核心代码不用重写，Javascript的代码可以在许多地方都可以用到，包括移动应用、移动网站、PC网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。所以

12、说，这种方式并非完全跨平台，但这样就可以减轻大量的工作量了，特别是关系到后期的工作的开展。HTML 5有着这些特征：语义特性、本地存储特性、设备兼容性、连接特性、网页多媒体特性、三维图形及特效特性、CSS3特性。Canvas是HTML 5的新元素， Canvas API（画布）是在HTML 5中新增的标签用于在网页实时生各种有趣成图像，并且可以操作图像的改变，基本上它是一个可以使用JavaScript来操作的位图（bitmap）。我们可以利用Canvas的循环画画和擦拭，开发游戏。1.2.2 JavaScript概述JavaScript是一种直译脚本语言，是一种动态类型，弱类型，基于原型语言，

13、内置支持型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。JavaScript提供了许多内置的功能来访问HTML文档的各个部分，包括CSS元素中的样式。 JavaScript由浏览器逐行解释。还有就是JavaScript不需要复杂的编程工具只需要记事本和浏览器就可以进行编程和测试，简单方便。在客户端脚本语言语言（如JavaScript）出现之前，客户端的浏览器通过网络将传统的数据提交和身份验证操作执行到服务器。如果数据量大，对于网络和服务器资源来说，真的是一个隐患。但是使用JavaScript就

14、可以在客户端进行数据操作。 JavaScript的对象可以方便地操作各种浏览器，可以使用JavaScript来控制浏览器的外观，甚至操作模式，可以根据用户的需求“定制”浏览器，使更简单方便。 JavaScript可以使各种任务只有在用户端完成，而无需参与网络和服务器，支持分布式计算和处理。2 游戏需求分析2.1 系统需求角色扮演游戏的本质就是游戏人物的属性，即把现实中人的属性虚拟到游戏中，使得游戏人有生命值，可以走路，跑步，交谈以及打斗等等，为了游戏性的提高，角色通常会有一些特有的技能，或是恢复生命值，或是增加攻击力等等。诸如此类都是RPG游戏设计的要素。一个成功的角色扮演游戏离不开一个成功的

15、故事剧情，一个成功的故事剧情可以增加玩家的代入感，使得有引人入胜的作用。同时一个成功的战斗系统也是必不可少的，一个战斗系统不仅能使游戏更加饱满、绚丽，它就可以给玩者带来更大的满足与成就。2.2 需求分析首先，设计游戏的前提就是要以游戏玩家为中心。人们认识客观事物，主要就是通过感觉、知觉、注意、印象、思维想象等来进行。实际上，也就是运用信息论以及计算机的类比、模拟、验证等方法来研究知识是如何获取、储存、交流、利用的。一般地，人们将信息加工心理学又称为狭义的认知心理学。根据玩家心理学和认知科学，有了如下设计基本原则： （1）一致性原则。即从任务、信息的表达、界面控制操作等方面与玩家体会熟悉的形式尽

16、可能保持一致。 （2）兼容性。在玩家憧憬和界面设计的现实之间符合，要基于玩家以前的经验。 （3）适应性。玩家应处于控制地位，因此界面应在多方面适应玩家。 （4）指导性。界面设计任务提醒和反馈信息来指导用户，做到以玩家为本。2.3 系统功能分析图下图列出游戏里各个部件的功能。图2-1 系统功能分析图3 游戏总体设计3.1 游戏流程图游戏流程图：图3-1 游戏流程图3.2 总体功能设计3.2.1 游戏设计目标游戏总的设计是为了达到以下目标：HTML 5游戏游戏剧情的完整，主角各种属性的完整，怪物属性，游戏地图的渲染。3.3 游戏角色和剧情介绍3.3.1 游戏角色游戏主角：一个来异世界的青年人，传说

17、中的救世主，被赋予了拯救嘉德世界的重任。神秘NPC：出场为主角介绍了嘉德世界的以及游戏操作和主角的任务。火把：可以恢复主角的生命值。小怪物：是击败魔王之前的历练，为主角增加攻击力。大魔王（夏朔德）：游戏最后的BOSS。公主（伊莲蒙碧）：主角要拯救的人。拳师嘉德：创造游戏世界的人，没有出现。3.3.2 剧情简单分析如同其他穿越小说一样，主角在糊糊涂涂中醒来，发现自己身处于一个陌生的世界。对这个陌生的世界一无所知。这个时候，需要一个NPC对主角介绍了这个游戏世界叫做拳师嘉德创造的游戏世界。但是这个世界最近诞生了一个魔王夏朔德，掳走了美丽的公主伊莲蒙碧，扬言要毁灭掉这个世界。然后如同预言一样，主角穿

18、越到这个世界成为传说中的救世主。然后主角踏上了消灭大魔王并拯救公主的道路。在路上，主角遇到了很多大魔王的小弟，并把它们消灭，获得了攻击力的加成。同时通过小火把恢复生命值。最后战胜了大魔王拯救了公主和嘉德世界。3.4 游戏类型的分析3.4.1 地图属性介绍本游戏游戏地图是由一个二维数组进行存储的，并通过JavaScript渲染到Canvas上，地图的二维数组定义如下：var map=newArray();for(vari=0;i10;i+)mapi=newArray();for(varj=0;j10;j+)mapij=mapArrayj*10+i;在map数组的数值为0是草地为不可行走区域，ma

19、p数组的数值为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可选。要用的图像的高度。（伸展或缩小图像）游戏地图渲染实现如下：function drawMap

20、() var imgm = new Image(); imgm.src = meadow.jpg; var imgl = new Image(); imgl.src = road.jpg; var canvas = document.getElementById(Canvas); var cxt=canvas.getContext(2d); for(var i=0;i10;i+) for(var j=0;j10;j+) if(mapij=0) cxt.drawImage(imgm,i*50,j*50,50,50); if(mapij=1) cxt.drawImage(imgl,i*50,j*5

21、0,50,50); 图3-1 游戏地图3.4.2游戏角色类的设计JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。同时它也是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。所以Javascript的Object（对象）最难。因为Javascript的Object模型很独特，和其他语言都不一样。角色类型的设计如下：function role() this.HP=1000;/角色生命值 this.Power=1000;/角色攻击力 this.Defen

22、se=100;/角色防御 this.axisX=0;/角色位置的X坐标 this.axisY=9;/角色位置的Y坐标 this.img=;/角色图片位置 this.Left = function() /向左移动函数 if(mapthis.axisX-1this.axisY=1) this.axisX=this.axisX-1; ; this.Right = function() /向右移动函数 if(mapthis.axisX+1this.axisY=1) this.axisX=this.axisX+1; ; this.Up = function() /向上移动函数 if(mapthis.ax

23、isXthis.axisY-1=1) this.axisY=this.axisY-1; ; this.Down= function() /向下移动函数 if(mapthis.axisXthis.axisY+1=1) this.axisY=this.axisY+1; ;var Role=new role();怪物类型的设计如下：function enemy(x,y,hp,power,defense) this.HP=hp;/怪物血量 this.Power=power;/怪物攻击力 this.Defense=defense;/怪物防御力 this.axisX=x;/怪物位置X坐标 this.axi

24、sY=y;/怪物位置Y坐标 this.hit=function()/碰撞触发函数 war(this.HP, this.Power, this.Defense);/普通战斗函数 ;火把的类型设计如下：function fire(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的类型设计如下：function BOSS(x,y,hp,power,defense) this.HP=h

25、p;/怪物血量 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) var canvas = document.getElementById(Canvas); var gameWin = docum

26、ent.getElementById(win); canvas.style.display=none; gameoverDiv.style.display=block;图3-2 游戏元素精灵图3.5 游戏的键盘事件和主循环3.5.1 游戏键盘事件的响应描述：HTML 5 Canvas本身不支持键盘事件监听与获取，常用的有两种方法来解决这个问题：通过windows对象来实现Canvas键盘事件监听与处理通过windows对象来实现Canvas键盘事件监听与处理这里是通过方法b实现的，实现代码如下：canvas.addEventListener(keyup,doKeyDown);canvas.fo

27、cus();setInterval( ffit(Role,enemy1),100);function doKeyDown(e)varkeyID=e.keyCode;if(keyID=38|keyID=87)/uparrowandWRole.Up(); e.preventDefault(); drawrole();if(keyID=39|keyID=68)/rightarrowandDRole.Right(); e.preventDefault(); drawrole();if(keyID=40|keyID=83)/downarrowandSRole.Down(); e.preventDefault(); drawrole();if(keyID=37|keyID=65)/leftarrowandARole.Left(); e.preventDefault(); drawrole();3.5.2 游戏的主要循