设计参考题目基于HTML5的游戏与开发

前 绪 研究背景及意 国内外的研究现状和发展趋 研究的主要内 设计游 游戏游戏界面设 开发游 HTML5、CSS和JavaScript特 构建应 测试应 总结与展 本文完成的主要工 未来展 参考文 附 1997年12月，网（WorldWideWebConsortium,W3C）正式宣布将4.0W3CHTML4.0新功能如CSS和客户端这些特性极大地改变了人们开发的方法使人们脱了对表格式呈现技术的依赖，转而采用诸如JavaScript这样的语言来开发动在这之前HTML主要是一种静态且受限的环境基本上只是由文字和构成的，而缺少现代网页普遍具有的特性。HTML4.01199912HTML452005WHATWG（WebHypertextApplicationTechnologyWorkingGroup，Web）WebApplication1.0的草案规范发布，情况便开HTML4.0和XHTML1.0诞生时，还没有的博客、网店和等概念。这些版本们实质上是应用程序。WebApplication1.0加新的元素（用于标记内容的）和功能来扩展HTML，以适应这些类型的需求。2008WebApplication1.0W3CHTML5HTML5HTML5HTML5WebHTML5Web人们对HTML5的新功能热情高涨，甚至有人建议就用HTML5构建吸引人的动态、交已已经是不争的事实如今只使用HTML5CSS（CascadingStyleSheet,层叠样式表）和JavaScript就完全可以在屏幕上画出直线、弧线、圆和椭圆，还可以指定和事件处理来生成动画，并对用户的动作作出响应。可以使用标准控件在上加入音频，或者也可以根据需要在应用中放入或音频。可以创建提供输入验证的表单，并立即向用户提供反馈。还可以使用一个类似于的工具在客户计算机上信息。另外，可以使用一些新元素（headerfooter）帮助建立文档的结构。HTML5对旧的面向文档的Web进行了大量的改进。它创建了新的元素来标记动态的已经能够解决许多问题，但是W3C（归功于WHATWG）还不满足于此。例如表单验证（以前只能通过JavaScript实现）也成为了HTML5的一部分。特别是对于Web上用户生成与HTML5同时应运而生的其他一些技术一样也都希望解决相关的问题。其中一个例子就是现代的Web比10年前更具有移动特性。据估计，95%的安装了某种因特网浏HTML5动（）等方向发展，HTML4.01已经不能满足现代网在应用开发和移动性等方面的新需求了，HTML需要在语法、语言和API等方面进行革新，因此，HTML5HTML5具有巨大的发展潜力和创新意义。作为下一代Web开发标准，HTML5成为主HTML5HTML5的诸多新特性中，HTML5Canvas是其中最吸引人的特性之一它由JavaScript进行控制可以动态地绘制出各种2D图形，甚至可以对图像像素进行任意处理。目前，HTML5Canvas已经得到了大量浏览器HTML5开发的无插件网页游戏将广泛流行。由于htmlHTML5，游戏开发者现在拥有了这样的技术能力，即通过单HTML5HTML5移动游戏开发目前还是一项新技术，人们还不知道该如何看待这一技术。这很像是2008年时的智能游戏，苹果公司的应用商店（AppStore）就是在这一年推出的不过一些重量级的组织已经加入进来了力保HTML5游戏取得成功其中，20125月推出了它的应用中心（AppCenter，把基于HTML5Web应受制于苹果公司这种从其应用商店的应用内中抽取30%手续费的做法类似地如TT一类的运营商也把b应用看成一种从和苹果公司那里夺回失去收的一种。HTML5性能水准和屏幕分辨率，在HTML5移动游戏这一水域航行需要把握航向。如HTML5HTML5移动游戏的开发就还处于低，相比其他已被接受的媒介，制造轰动所需的代价更少。HTML5游戏，特别是移动设备上的这些游戏其预算仅为普通PC和控制台游戏所需的数百万的很少一部分。然而，由于网的式扩散本质，它们却有机会在瞬间创造出巨大的销量。HTML5移动游戏有着更大的式增长可能性，因为它们能够借助实现实时共享，不需要接受者从应用商店一个可能并不适用于所持设备的应用。HTML5人们对HTML5HTML5构建吸引人的动态、交互式，而不再需要其他的技术或产品。这可能有些夸张，不过这些新特性让人兴HTML5、CSS(CascadingStyleSheet,层叠样式表)和JavaScript就完全可以在屏幕上画出直线、弧线、圆和椭圆，还可以指定和事件处理来生成动画，并对用户的动作作出响应。可以使用标准控件在上加入和音频，或者也可以根据需要在应用中放入或音频。可以创建提供输入验证的表单，并立即向用户提供反馈。还可以使用一个类似于的工具在客户计算机上信息。另外，可以使用一些新元素（header和footer）帮助建立文档的结构。水准的、非常适合这项工作的环境。作为一种游戏媒介，HTML5仅用很短的时间就在删除处理。本课题是我们非常熟悉的一个游戏：用纸和笔完成的上吊小人游戏。它的是：一个玩家想出一个词，在纸上画几个短横线，使另一个玩家知道这个单词里有多少要把表示这个字母的短横线换成实际的字母。如果他猜的字母没有出现在词中，第择词。我们可以使用一个外部文件单词。玩家可以单击一个方块来选择一个字母。选择字母后，这个方块就会，大多数用纸2-17个字母的单词。注意，在2-1a2-2所示，这个字母没有出现在词中所以会在屏幕上画一个椭圆表示头另外对应字母a的方块2-2猜a继续猜元音，我猜了一个e。注意，词中如果存在两个或多个相同的字母时，2-3所示。2-3猜e接下来我猜了一个i,2-42-4猜i接着我猜o，o在词中没有，在头下画根竖线表示颈部。结果如图2-5所示2-5猜o下面我猜元音 词中没包含有，屏幕中画出一只右手，结果如图2-6所示2-6猜u接下来没有元音可猜了，我们可以尝试下别的字母，猜字母b，词中没有，所2-7所示。2-7猜b接着再猜g,2-82-8猜g2-92-9当玩家胜利时，屏幕会弹出“YouWin!Reloadthepagetotryagain家7次机会都用完时游戏失败小人就会被绳索吊在绞架上YouLost!Reloadthepagetotryagain.，并且词会立即显示出来。文件单词表。这个游戏中有多个回合，所以程序必须在内部管理游戏状态，并HTML5、CSSJavaScript实现这个游戏所需的HTML5、CSS和JavaScript特性。除了基本的HTML标记、函将单词表为一个在外部文件中定义的数var的。当然可以改变HTML文档。不过，在HTML5（或之前的HTML版本中，可以包含一个指向一个外部文件，来替换HTML文档中的script元素，或者可以作为这个script元素的补充。可以删除和定义变量words的3行代码，把它们放入一个words1.js的文件。在后面的文档中使用以下代码行包含这个文件：<scriptsrc=”words.js”这里指定了defer方法，它会导致加载这个文件的同时，浏览器会继续处理其余的（body生成和定位HTML字母表按钮和词短横线的创建要结合JavaScript和CSS来完成编写代码为程序的两部分创建HTML标记字母表图标和词空格对于HTML标记。.createElement(x):为类型为xHTML.body.appendChild(d):增加d元素作为body ementById(id):抽取id值为idHTML时，要为各个元素包含一个唯一的id。代码要设置一些属性。设置d.innerHTMLHTML。设置thingelem.style.top包含垂直位置。设置thingelem.style.left下面给出建立字母表按钮的代码。首先一个全局变量alphabet：varalphabet=“abcdefghijklmnopqrstuvwxyz”;setupgamevari;varvarvarvaran=alphabet.length;uniqueid=“a”+String(i);d d.innerHTML=(“<divclass=’letters’thingelem= x=alphabetx+alphabetwidth*I;y=thingelem.style.top=String(y)+”px”;thingelem.style.left=String(x)+”px”;}iid值由一个“a（索引值以0~25。新创建的元素中插入的HTML是一个div，其文本包含这个字母。个全局变量均已在文档前面，水平方面上逐个增加alphabetwidth。top和left属性创建对应词的元素也类似区别在于个元素的文本内容为两个下划线屏幕上这两个下划线看起来就像一个长下划线程序选择词的方法就是对（示选择hoic）赋值。varch=Math.floor(Math.random()*words.length);secret=words[ch];{uniqueid=d=d.innerHTML="<divclass='blanks'id='"+uniqueid+"'>thingelem=.geementById(uniqueid);x=secretx+secretwidth*i;y=thingelem.style.top=String(y)+"px";thingelem.style.left=}CSS。CSS绝对不只是用来设置字体和颜色的。样式可以为游戏中的关键部分提供特殊‘letters置为‘blanksStyle节包含以下两个样式：{position:absolute;left:0px;top:0px;border:2px;border-style:double;margin:5px;padding:5px;color:#F00;background-color:#0FC;font-family:"CourierNew",}{position:absolute;left:0px;top:0px;border:none;margin:5px;padding:5px;color:#006;background-color:white;font-family:"CourierNew",Courier,monospace;text-decoration:underline;color:black;}（form用于所有表单元素；另外也不同于#id些备份字体。S的这个特性为设计者提供了一个很宽的选择范围。这里我选择的是“ourierourier（采用等宽标并且可以在屏幕上均匀放置这些图标。margin属性设置为边框外的间隔，padding是varid= ementById(id).style.disy=游戏结束时，不论输赢，都要迭代所有元素以删除所有字母的单击处理for(j=0;j<alphabet.length;j++){uniqueid=“a”+String(j);thingelem= }removeEventListener顾名思义，就是要删除处理数字值来设置线宽，另外要把ctx.strokeStyle设置为一种颜色。使用不同的线宽和颜色来绘制不同的部分。下一行代码是ctx.beginPath（）;，后面是一系列操作，用来绘制线段或弧线，或者移动一个虚拟的画笔。方法ctx.moveTo只是移动画笔，而不具体绘制这个路径。在我们的绘制函数中，下一步将调用ctx.stroke();，最后一步是调用function{ctx.lineWidth=8;ctx.strokeStyle=gallowscolor;}时，要利用tx.rc的圆用弧度表示就是th.PI*2th.PI180（以及后面的绞索tx.le改变坐标系,tx.v()保存当前的tx.le(.6,1);x60%y轴不ctx.rtor();函数如下：function{ctx.lineWidth=3;ctx.strokeStyle=facecolor;ctx.arc(bodycenterx/.6,80,10,0,Math.PI*2,false);}drawnoose函数利用了同样的技术，只不过，对应绞索的椭圆是宽的而不是窄的，逐步绘制过程中的每一步都由函数表示，如drawhead和drawbody。所有这些函数列在一个名为steps的数组中：varsteps=[变量cur会当前步骤。当cur等于steps的长度时，游戏结束drawhead和调用放在drawnoose3.1.4游戏状态并确定输pickelement函数，关键动作就在这个函数检查玩家猜的字母（保存在变量picked中）是否与变量secret中包含的词中的某个字母一致。每次匹配时，将textContent设置为这个字母，使blank元素中相应使用变量lettersguessed已经猜过多少个字母letterguessedsecret.length，查看是否获胜。如果获胜，则删除表字母表按钮的处理，并显示适当的消息。true，用变量cursteps的索引，继续绘制过程。cursteps.length，查看是否失败。如果这两个值相等，则显示所有字母，删除处理，并显示适当的消息。不论是否分配，设置disy属性为none，使所单击的字母表按钮这些任务使用if和for的状态由secret、lettersguessed和cur变量表示。玩家会看到词中的下划线和已经填3.1.5检查猜测，设置textContent显示词中的字pickelement函数设置为各个字母图标的处理程序。因此，在这个函数中，可以使用this指示接收（并收到）单击的对象。相应地，表达式this.textContent会包含所选择的字母。因此，以下语句varpicked=将局部变量pickedsecret包含相应元素的textContent会设置为玩家所猜的字母（包含在picked中：for(i=0;i<secret.length;i++){if(picked==secret[i]){id= ementById(id).textContent=picked;not=false;…词中所有出现的次数。每次发现匹配时，都将变量not设置为falseCSSJavaScriptHTMLJavaScript（setupgamepickelement8个函数分别完成绘制上吊小人的各个步骤。3-1所示。3-1由……由<body>标记中onLoad由setupgame中通过steps[cur]()调用而具体pickelementstep[cur]()pickelementstep[cur]()pickelementstep[cur]()pickelementstep[cur]()pickelementstep[cur]()pickelementstep[cur]()pickelementstep[cur]()pickelementstep[cur]()n,s,tscaleHTML使用addEventListener和removeEventListener建立和删除各个元素的处理变量来游戏状态，利用计算确定输赢创建一个外部文件来保存单词表，从而提高灵活性使用CSS，包括font-family（选择字体、color和 ylettersguessedNewWord词的位置；另一个函数确保所有字母表图标都可见，并建立处理，然后选择秘会显示定义，为玩家提供一个提示。另外，还可以创建一个指向某个，如。 的帮助，衷心感谢馆提供大量的资料以供阅览。本课题虽然工作量不大，但是技术黄永慧,陈.HTML5在移动应用开发上的应用前景[J].计算机技术与发展,2013,07:207-210.[3]李慧云,何震苇,李丽,陆钢.HTML5[J].电信科学,2012,05:24-29.张奇伟.基于HTML5的移动应用的研究与开发[D].邮电大学,2013.[10]HTML5[D].郑州大学,2013.IanDevlin,"HTMLSMultimediaDevelopandDesign,"ThePragmaticBookshelf,PeterLubbers,BrianAlbers,Frank,Salim,"ProHTMLSProgramming,"Apress,TianyanLiu,"HTMLSandthefutureofweb tfonn,"附录1.{position:absolute;left:0px;top:0px;border:2px;border-style:double;margin:5px;padding:5px;color:#F00;background-color:#0FC;font-family:"CourierNew",}{position:absolute;left:0px;top:0px;border:none;margin:5px;padding:5px;color:#006;background-color:white;font-family:"CourierNew",Courier,monospace;text-decoration:underline;color:black;}<scriptsrc="words1.js"varctx;varvaralphabet="abcdefghijklmnopqrstuvwxyz";varalphabety=300;varalphabetx=20;varalphabetx=25;varsecret;varlettersguessed=0;varsecretx=160;varsecrety=varsecretwidth=vargallowscolor="brown";varfacecolor="tan";varbodycolor="tan";varnoosecolor="#F60";varbodycenterx=70;varsteps=varcur=function{ctx.lineWidth=8;ctx.strokeStyle=gallowscolor;}function{ctx.lineWidth=3;ctx.strokeStyle=facecolor;ctx.arc(bodycenterx/.6,80,10,0,Math.PI*2,false);}function{ctx.strokeStyle=bodycolor;}function{}<!--honey!,youcanfightme.-->functiondrawleftarm(){}function{}function{}function{ctx.strokeStyle=noosecolor;}function{}function{ctx= ctx.font="bold20pt}function{vari;varx;varvarvar