html5课程论文基于html5的贪吃蛇游戏.docx
- 文档编号:11799576
- 上传时间:2023-06-02
- 格式:DOCX
- 页数:18
- 大小:106.37KB
html5课程论文基于html5的贪吃蛇游戏.docx
《html5课程论文基于html5的贪吃蛇游戏.docx》由会员分享,可在线阅读,更多相关《html5课程论文基于html5的贪吃蛇游戏.docx(18页珍藏版)》请在冰点文库上搜索。
html5课程论文基于html5的贪吃蛇游戏
HTML5课程设计
题目:
基于html5的贪吃蛇游戏
学院:
__商学院___________
专业:
__信息管理与信息系统
*****
*******
2015年6月10日
摘要
随着互联网技术的不断发展和计算机性能的不断提升,用户享受互联网的方式也开始不断的变化,越来越多的应用可以直接以浏览器打开的方式使用,数据则是存储在云端,更加的安全可靠,方便用户共享数据。
在各种应用不断的趋于更加网络话的同时,一种新的技术标准也随之产生,那就是HTML5(HTML是一种标记语言也是一种标准,互联网开发居于此)。
HTML5是近十年来Web(互联网)标准最巨大的飞跃,和以前的版本不同,HTML5并非仅仅用来表示Web内容,它的使命是将Web带入一个成熟的应用平台,在这个平台上,视频、音频、图象和动画,以及同电脑的交互都被标准化。
也就是说HTML5是通过开放的技术和标准来实现一个无插件模式的富客户端,这个客户端可以在移动终端、PC(个人计算机)或者其他可以有网络的地方轻松的运行。
所以此时研究HTML5,并且大胆的实践有着重要的意义。
课题内容是使用HTML5技术基于Web的环境来制作一个网络版的“坦克大战”游戏应用,该游戏使用了HTML5中的Canvas(画布)、WebSocket(HTML5中最新使用的一种网络连接协议,用于实时通讯)、Audio(HTML5中控制声音的技术)等最新的技术。
目前HTML5标准尚未成熟,很多地方仍在变动,API(应用程序接口)仍不是很稳定,所以还无法真正的完全商用或者全部普及开,但这并不会影响我们来研究它。
服务器端采用的Nodejs(一种Javascript程序语言框架,可以在服务器端运行Javascript语言)这种新型的框架来开发,Nodejs使用Javascript语言来开发,使整个应用从客户端到服务器端编程都是使用Javascript,大大的减少学习成本和开发成本,并且Nodejs性能强大,有很大的研究价值。
。
1绪论
1.1开发背景
随着互联网的不断发展,互联网对人们的生活也在不断地变化和加强,人们渐渐地已经开始习惯于互联网所带来的各类服务与应用,并且享受着它带来的便利和丰富。
当然随着互联网的基础用户和开发者不断增多,人们不断地去创造和完善它的速度也越来越快,无论从技术层面还是商业层面,新的模式和方法层出不穷,整个行业新陈代谢不断加速,新的应用和新的公司不断地挑战着新的技术和新的模式,由于整个行业存在创业成本很低、技术成本门槛却较高等特点,大公司也不断地推动着新的技术,基于此来创建一定的技术壁垒,同时基于此建立全新的服务和技术。
但是毕竟整个互联网是一个开放的环境,大家需要一种标准,而不是一家独大的竞争下去,这样就一定会失去民心,所以HTML5这种更加新的标准和技术体系在不断地革新中发展壮大。
HTML5是近十年来Web标准最巨大的飞跃,和以前的版本不同,HTML5并非仅仅用来表示Web内容,它的使命是将Web带入一个成熟的应用平台,在这个平台上,视频、音频、图象和动画,以及同电脑的交互都被标准化。
尽管HTML5的实现还有很长的路要走,但HTML5正在改变Web。
另外,目前的互联网不仅仅是传统意义上面的互联网,所有的传统应用和模式正在向着更加移动和便捷发展,人们可能通过手机、平板电脑等各类移动设备来获取信息和使用更加丰富的应用,如物理位置定位信息等新的数据采集和多点触控、重力感应等新的交互方式的应用,未来必将也会改变人们生活的方方面面。
HTML5中也加入了以上各类新的元素和功能,同时也考虑到了非健全人事使用互联网时可能带来的问题[1]。
所以,研究HTML5这种技术体系来尝试做一些应用是一个千载难逢的机遇,而基于这个变革的年代去使用类似的技术来创造更多新的应用更是能够改变这个世界的一次机会。
游戏软件是计算机诞生之后就开始有的产物,最开始是一些计算机极客们无聊时写着玩的代码,渐渐地发展成为了一个巨大的产业。
游戏可以带给人们快乐,可以使人们享受与人配合交流的快乐,也可以是打破尴尬的一种方式。
对于程序员而言能够编写一个游戏程序带给用户快乐,这无疑也会带给自己成就感并且是一件很有意义和价值的事情
随着网络用户的增加,网络用户已经突破了十亿,而其中的青少年占了大多数开发一款经典的耐玩的小游戏有很大的发展空间,贪吃蛇这一款小游戏是一代年轻人美好的回忆,用html5设计的小游戏方便又时尚可以迎合部分玩家的爱好。
1.2开发内容
基于hml5的贪吃蛇游戏开发与应用
2游戏开发相关技术
2.1开发工具介绍
VisualStudio2013将根据“go-live”许可证提供。
.Net4.5.1预览版是2013版预览版的一部分,也包含在Windows8.1预览版所有的安装程序中。
新的.Net预览版还为Windows8、Windows7、WindowsVista和相应的Windows服务器发布版提供单独的安装版本。
微软高管表示,.NETFramework4.5.1预览版的许多功能的重点是改善调试和一般的诊断。
这个更新版本还允许开发者进行编辑和继续进行64位编程。
VisualStudio2013预览版进行了大量改进,可帮助您在编码时提高工作效率并集中精力。
某些功能首先在VisualStudioPowerTools扩展中以试验性质出现,经过改进后才纳入到VisualStudio中。
新版本中内置了多种提高工作效率的功能,如自动补全方括号、使用快捷键移动整行或整块的代码以及行内导航。
此外,VisualStudio2013预览版的团队资源管理器增强了主页设计,可以更简便地导航到团队协作功能,并可取消停靠“挂起更改”和“生成”,使其显示在一个单独的窗口中。
在处理大型代码文件时,可能难以了解当前所处的位置。
在VisualStudio2013预览版中,可轻松地在两种模式之间切换滚动条的行为。
在栏模式中,可更直接地查看脱字号位置等注释、更改所在位置和跟踪错误。
在图模式下,滚动条显示源代码的实时预览,而将鼠标悬停在代码上即可在工具提示中更详细地预览这段代码。
然后单击代码所在位置即可导航到该位置。
VisualStudio2013预览版引入了一种联网IDE体验,使您可更加迅速地开始使用VisualStudio2013预览版。
当您首次启动VisualStudio2013预览版时,将要求您使用Microsoft帐户(您可能已在MSDN或TeamFoundationService订阅中用到它)进行登录。
登录后,即注册您的VisualStudio2013预览版副本供您使用,无需任何额外步骤。
VisualStudio2013预览版还将自动在采用联网IDE体验的设备上同步设置。
同步的设置包括快捷键、VisualStudio外观(主题、字体等)各种类别,同时使您保持对“同步设置”选项的完全控制。
主要新功能
支持Windows8.1App开发
VisualStudio2013预览版提供的工具集非常适合生成利用下一波Windows平台创新(Windows8.1)的新式应用程序,同时在所有Microsoft平台上支持设备和服务。
支持在Windows8.1预览版中开发Windows应用商店应用程序,具体表现在对工具、控件和模板进行了许多更新、对于XAML应用程序支持新近提出的编码UI测试、用于XAML和HTML应用程序的UI响应能力分析器和能耗探查器、增强了用于HTML应用程序的内存探查工具以及改进了与Windows应用商店的集成。
2.2开发技术运用介绍
2.2.1JavaScript
JavaScript是一种互联网终端的扩建的语言。
它由网景的LiveScript进化而来,具有原模原样的继承、面向对象、非静态类型、分辨大小写等特点。
解决服务器端语言问题是其主要的目的。
增添JavaScript可以为网景的网页查看器Navigator供给检验数据的一些最基础的功用。
2.2.2html5
HTML5是HTML下一个的主要修订版本,现在仍处于发展阶段。
目标是取代1999年所定订的HTML4.01和XHTML1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。
广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。
它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-basedrichinternetapplication,RIA),如AdobeFlash、MicrosoftSilverlight,与OracleJavaFX的需求,并且提供更多能有效增强网络应用的标准集。
HTML5草案的前身名为WebApplications1.0。
于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。
在2008年1月22日,第一份正式草案已公布,在2010年9月正式向公众推荐。
HTML5是近十年来Web标准最巨大的飞跃。
和以前的版本不同,HTML5并非仅仅用来表示Web内容,它的使命是将Web带入一个成熟的应用平台,在这个平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。
目前Firefox、Chrome、Opera、Safari(版本4以上)、InternetExplorer9已支持HTML5技术。
HTML5提供了一些新的元素和属性,例如
这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如
一些过时的HTML4标记将被取消。
其中包括纯粹显示效果的标记,如和
除了原先的DOM接口,HTML5增加了更多API,如:
(1)实时二维绘图。
CanvasAPI:
有关动态产出与渲染图形、图表、图像和动画的API。
(2)定时媒体播放HTML5音频与视频:
HTML5里新增的元素,它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API,而无需安装任何插件。
(3)通信网络CommunicationAPIs:
构建实时和跨源(cross-origin)通信的两大基础:
跨文档通信(CrossDocumentMessaging)与XMLHttpRequestLevel2。
(4)GeolocationAPI:
用户可共享地理位置,并在Web应用的协助下享用位置感知服务(location-awareservices)。
(5)WebSQLDatabase,一个本地的SQL数据库。
中南财经政法大学2012届本科生毕业论文(设计)
-4-(6)WebSocket,一个基于浏览器的socket(一种网络协议,支持所有的互联网通信),支持实时性的数据传输。
(7)其他:
离线存储数据库(离线网络应用程序)、编辑、拖放等。
3可行性
3.1可行性
技术可行性,一般可从硬软件条件、开发环境条件、技术人员水平等方面去考虑和分析。
现如今计算机的发展突飞猛进,各行各业都开始与之接轨。
html5设计语言、javascrip飞速发展。
综上所述,说明技术的方面是可行的。
4小游戏的详细设计
4.1源代码
DOCTYPEhtml>
*{margin:
0;padding:
0;font-family:
"MicrosoftYaHei";}
#page{margin-right:
auto;margin-left:
auto;margin-top:
20px;height:
600px;width:
980px;}
#yard{width:
800px;border:
1pxsolidgray;box-shadow:
0010pxblack;float:
right;}
#mark{font-weight:
800;}
#mark_con{color:
red;}
button{width:
50px;}
a{text-decoration:
none;}
//伪常量
varBLOCK_SIZE=20;//格子大小
varCOLS=40;//列数
varROWS=30;//行数
//变量
varsnakes=[];//保存蛇坐标
varc=null;//绘图对象
vartoGo=3;//行进方向
varsnakecount=4;//蛇身数量
varinterval=null;//计时器
varfoodX=0;//食物X轴坐标
varfoodY=0;//食物Y轴坐标
varoMark=null;//分数显示框
varisPause=false;//是否暂停
4.1.1画面背景设计
//绘图函数
functiondraw(){
c.clearRect(0,0,BLOCK_SIZE*COLS,BLOCK_SIZE*ROWS);
//画出横线
for(vari=1;i<=ROWS;i++){
c.beginPath();
c.moveTo(0,i*BLOCK_SIZE);
c.lineTo(BLOCK_SIZE*COLS,i*BLOCK_SIZE);
c.strokeStyle="gray";
c.stroke();
}
//画出竖线
for(vari=1;i<=COLS;i++){
c.beginPath();
c.moveTo(i*BLOCK_SIZE,0);
c.lineTo(i*BLOCK_SIZE,BLOCK_SIZE*ROWS);
c.stroke();
}
4.1.2蛇的设计
//画出蛇
for(vari=0;i c.beginPath(); c.fillStyle="green";//蛇身的颜色是绿色 c.fillRect(snakes[i].x,snakes[i].y,BLOCK_SIZE,BLOCK_SIZE); c.moveTo(snakes[i].x,snakes[i].y); c.lineTo(snakes[i].x+BLOCK_SIZE,snakes[i].y); c.lineTo(snakes[i].x+BLOCK_SIZE,snakes[i].y+BLOCK_SIZE); c.lineTo(snakes[i].x,snakes[i].y+BLOCK_SIZE); c.closePath(); c.strokeStyle="white"; c.stroke(); } 4.1.3食物的出现 //画出食物 c.beginPath(); c.fillStyle="yellow";//食物的颜色是黄色 c.fillRect(foodX,foodY,BLOCK_SIZE,BLOCK_SIZE); c.moveTo(foodX,foodY); c.lineTo(foodX+BLOCK_SIZE,foodY); c.lineTo(foodX+BLOCK_SIZE,foodY+BLOCK_SIZE); c.lineTo(foodX,foodY+BLOCK_SIZE); c.closePath(); c.strokeStyle="red"; c.stroke(); } 4.1.4游戏初始化 //游戏初始化 functionstart(){ for(vari=0;i snakes[i]={x: i*BLOCK_SIZE,y: 0}; } addFood(); draw(); oMark.innerHTML=0; } 4.1.5控制蛇的移动模块 //移动函数 functionmove(){ switch(toGo){ case1: //左边 snakes.push({x: snakes[snakecount-1].x-BLOCK_SIZE,y: snakes[snakecount-1].y}); break; case2: //上边 snakes.push({x: snakes[snakecount-1].x,y: snakes[snakecount-1].y-BLOCK_SIZE}); break; case3: //右边 snakes.push({x: snakes[snakecount-1].x+BLOCK_SIZE,y: snakes[snakecount-1].y}); break; case4: //下边 snakes.push({x: snakes[snakecount-1].x,y: snakes[snakecount-1].y+BLOCK_SIZE}); break; default: ; } snakes.shift(); isEat(); isDie(); draw(); } 4.1.6食物判断模块 //吃到食物判断 functionisEat(){ if(snakes[snakecount-1].x==foodX&&snakes[snakecount-1].y==foodY){ oMark.innerHTML=(parseInt(oMark.innerHTML)+1).toString(); addFood(); addSnake(); } } //添加蛇身 functionaddSnake(){ snakecount++; snakes.unshift({x: BLOCK_SIZE*COLS,y: BLOCK_SIZE*ROWS}); } //交互响应函数 functionkeydown(keyCode){ switch(keyCode){ case37: //左边 if(toGo! =1&&toGo! =3)toGo=1;break; case38: //上边 if(toGo! =2&&toGo! =4)toGo=2;break; case39: //右边 if(toGo! =3&&toGo! =1)toGo=3;break; case40: //下的 if(toGo! =4&&toGo! =2)toGo=4;break; case80: //开始/暂停 if(isPause){ interval=setInterval(move,100); isPause=false; document.getElementById('pause').innerHTML="Pause"; }else{ clearInterval(interval); isPause=true; document.getElementById('pause').innerHTML="Start"; } break; } } //随机制造食物 functionaddFood(){ foodX=Math.floor(Math.random()*(COLS-1))*BLOCK_SIZE; foodY=Math.floor(Math.random()*(ROWS-1))*BLOCK_SIZE; //console.log(foodX+"--"+foodY); } 4.1.7死亡控制模块 //死亡判断 functionisDie(){ if(snakes[snakecount-1].x==-20||snakes[snakecount-1].x==BLOCK_SIZE*COLS ||snakes[snakecount-1].y==-20||snakes[snakecount-1].y==BLOCK_SIZE*ROWS){ alert("GameOver! "); clearInterval(interval); } for(vari=0;i if(snakes[snakecount-1].x==snakes[i].x&&snakes[snakecount-1].y==snakes[i].y){ clearInterval(interval); alert("GameOver! "); } } } //启动函数 window.onload=function(){ c=document.getElementById('canvas').getContext('2d'); oMark=document.getElementById('mark_con'); start(); interval=setInterval(move,100); document.onkeydown=function(event){ varevent=event||window.event; keydown(event.keyCode); } }
冰点文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
|