毕业论文-html5课程论文-基于html5的贪吃蛇游戏.doc

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 绪论 4
1.1 开发背景 4
1.2 开发内容 5
2 游戏开发相关技术 5
2.1 开发工具介绍 5
2.2 开发技术运用介绍 6
2.2.1 JavaScript 6
2.2.2 html5 7
3可行性 8
3.1 可行性 8
4小游戏的详细设计 8
4.1源代码 8
4.1.1画面背景设计 9
4.1.2蛇的设计 9
4.1.3食物的出现 10
4.1.4 游戏初始化 10
4.1.5 控制蛇的移动模块 10
4.1.6 食物判断模块 11
4.1.7 死亡控制模块 12
4.2界面设计 14
4.3 游戏玩法 14
4.4算法流程 15
5游戏测试图 16
6.结论 16
7.参考文献 17

1 绪论
1.1 开发背景
随着互联网的不断发展，互联网对人们的生活也在不断地变化和加强，人们渐渐地已经开始习惯于互联网所带来的各类服务与应用，并且享受着它带来的便利和丰富。当然随着互联网的基础用户和开发者不断增多，人们不断地去创造和完善它的速度也越来越快，无论从技术层面还是商业层面，新的模式和方法层出不穷，整个行业新陈代谢不断加速，新的应用和新的公司不断地挑战着新的技术和新的模式，由于整个行业存在创业成本很低、技术成本门槛却较高等特点，大公司也不断地推动着新的技术，基于此来创建一定的技术壁垒，同时基于此建立全新的服务和技术。但是毕竟整个互联网是一个开放的环境，大家需要一种标准，而不是一家独大的竞争下去，这样就一定会失去民心，所以HTML5这种更加新的标准和技术体系在不断地革新中发展壮大。 HTML5是近十年来Web标准最巨大的飞跃，和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图象和动画，以及同电脑的交互都被标准化。尽管HTML5的实现还有很长的路要走，但HTML5正在改变Web。另外，目前的互联网不仅仅是传统意义上面的互联网，所有的传统应用和模式正在向着更加移动和便捷发展，人们可能通过手机、平板电脑等各类移动设备来获取信息和使用更加丰富的应用，如物理位置定位信息等新的数据采集和多点触控、重力感应等新的交互方式的应用，未来必将也会改变人们生活的方方面面。 HTML5中也加入了以上各类新的元素和功能，同时也考虑到了非健全人事使用互联网时可能带来的问题[1]。所以，研究HTML5这种技术体系来尝试做一些应用是一个千载难逢的机遇，而基于这个变革的年代去使用类似的技术来创造更多新的应用更是能够改变这个世界的一次机会。
游戏软件是计算机诞生之后就开始有的产物，最开始是一些计算机极客们无聊时写着玩的代码，渐渐地发展成为了一个巨大的产业。游戏可以带给人们快乐，可以使人们享受与人配合交流的快乐，也可以是打破尴尬的一种方式。对于程序员而言能够编写一个游戏程序带给用户快乐，这无疑也会带给自己成就感并且是一件很有意义和价值的事情
随着网络用户的增加，网络用户已经突破了十亿，而其中的青少年占了大多数开发一款经典的耐玩的小游戏有很大的发展空间，贪吃蛇这一款小游戏是一代年轻人美好的回忆，用html5设计的小游戏方便又时尚可以迎合部分玩家的爱好。
1.2 开发内容
基于hml5的贪吃蛇游戏开发与应用

2 游戏开发相关技术
2.1 开发工具介绍
Visual Studio 2013将根据“go-live”许可证提供。.Net 4.5.1预览版是2013版预览版的一部分，也包含在Windows 8.1预览版所有的安装程序中。新的.Net预览版还为Windows 8、Windows 7、Windows Vista和相应的Windows服务器发布版提供单独的安装版本。
微软高管表示，.NET Framework 4.5.1预览版的许多功能的重点是改善调试和一般的诊断。这个更新版本还允许开发者进行编辑和继续进行64位编程。
Visual Studio 2013 预览版进行了大量改进，可帮助您在编码时提高工作效率并集中精力。某些功能首先在 Visual Studio Power Tools 扩展中以试验性质出现，经过改进后才纳入到 Visual Studio 中。新版本中内置了多种提高工作效率的功能，如自动补全方括号、使用快捷键移动整行或整块的代码以及行内导航。此外，Visual Studio 2013 预览版的团队资源管理器增强了主页设计，可以更简便地导航到团队协作功能，并可取消停靠“挂起更改”和“生成”，使其显示在一个单独的窗口中。
在处理大型代码文件时，可能难以了解当前所处的位置。在 Visual Studio 2013 预览版中，可轻松地在两种模式之间切换滚动条的行为。在栏模式中，可更直接地查看脱字号位置等注释、更改所在位置和跟踪错误。在图模式下，滚动条显示源代码的实时预览，而将鼠标悬停在代码上即可在工具提示中更详细地预览这段代码。然后单击代码所在位置即可导航到该位置。

Visual Studio 2013 预览版引入了一种联网IDE 体验，使您可更加迅速地开始使用 Visual Studio 2013 预览版。当您首次启动 Visual Studio 2013 预览版时，将要求您使用 Microsoft 帐户（您可能已在 MSDN 或 Team Foundation Service 订阅中用到它）进行登录。登录后，即注册您的 Visual Studio 2013 预览版副本供您使用，无需任何额外步骤。Visual Studio 2013 预览版还将自动在采用联网 IDE 体验的设备上同步设置。同步的设置包括快捷键、Visual Studio 外观（主题、字体等）各种类别，同时使您保持对“同步设置”选项的完全控制。

主要新功能
支持 Windows 8.1 App 开发
Visual Studio 2013 预览版提供的工具集非常适合生成利用下一波 Windows 平台创新 (Windows 8.1) 的新式应用程序，同时在所有 Microsoft 平台上支持设备和服务。支持在 Windows 8.1 预览版中开发 Windows 应用商店应用程序，具体表现在对工具、控件和模板进行了许多更新、对于 XAML 应用程序支持新近提出的编码 UI 测试、用于 XAML 和 HTML 应用程序的 UI 响应能力分析器和能耗探查器、增强了用于 HTML 应用程序的内存探查工具以及改进了与 Windows 应用商店的集成。

2.2 开发技术运用介绍
2.2.1 JavaScript
JavaScript是一种互联网终端的扩建的语言。它由网景的LiveScript进化而来，具有原模原样的继承、面向对象、非静态类型、分辨大小写等特点。解决服务器端语言问题是其主要的目的。增添JavaScript可以为网景的网页查看器Navigator供给检验数据的一些最基础的功用。
2.2.2 html5
HTML5是HTML下一个的主要修订版本，现在仍处于发展阶段。目标是取代1999年所定订的HTML 4.01和XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。HTML5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案已公布,在2010年9月正式向公众推荐。HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。目前Firefox、Chrome、Opera、Safari（版本4以上）、Internet Explorer 9已支持HTML5技术。 HTML5提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如<audio>和<video>标记。一些过时的HTML4标记将被取消。其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。除了原先的DOM接口，HTML5增加了更多API,如： (1) 实时二维绘图。Canvas API：有关动态产出与渲染图形、图表、图像和 动画的API。 (2) 定时媒体播放HTML5 音频与视频：HTML5 里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。 (3) 通信网络Communication APIs：构建实时和跨源（cross-origin）通信的 两大基础： 跨文档通信（Cross Document Messaging）与XMLHttpRequest Level 2。 (4) Geolocation API：用户可共享地理位置，并在Web 应用的协助下享用 位置感知服务（location-aware services）。 (5) Web SQL Database，一个本地的SQL 数据库。
中南财经政法大学2012届本科生毕业论文（设计）
- 4 - (6) WebSocket，一个基于浏览器的socket（一种网络协议，支持所有的互 联网通信），支持实时性的数据传输。 (7) 其他：离线存储数据库（离线网络应用程序）、编辑、拖放等。
3可行性
3.1 可行性
技术可行性，一般可从硬软件条件、开发环境条件、技术人员水平等方面去考虑和分析。
现如今计算机的发展突飞猛进，各行各业都开始与之接轨。html5设计语言、javascrip飞速发展。综上所述，说明技术的方面是可行的。

4小游戏的详细设计
4.1源代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style type="text/css">
*{margin:0;padding: 0;font-family: "Microsoft YaHei";}
#page{margin-right: auto;margin-left: auto; margin-top: 20px;height: 600px; width: 980px; }
#yard{ width: 800px;border: 1px solid gray;box-shadow: 0 0 10px black; float: right;}
#mark{font-weight: 800;}
#mark_con{ color: red; }
button{width: 50px; }
a{text-decoration:none;}
</style>
<script type="text/javascript">
//伪常量
var BLOCK_SIZE = 20; //格子大小
var COLS = 40; //列数
var ROWS = 30; //行数
//变量
var snakes = []; //保存蛇坐标
var c = null; //绘图对象
var toGo = 3; //行进方向
var snakecount = 4; //蛇身数量
var interval = null; //计时器
var foodX = 0; //食物X轴坐标
var foodY = 0; //食物Y轴坐标
var oMark = null; //分数显示框
var isPause = false; //是否暂停
4.1.1画面背景设计
// 绘图函数
function draw(){
c.clearRect(0,0,BLOCK_SIZE * COLS, BLOCK_SIZE * ROWS);
//画出横线
for( var i = 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(var i = 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 (var i = 0; i < snakes.length; 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 游戏初始化
//游戏初始化
function start(){
for( var i = 0; i < snakecount; i++){
snakes[i] = {x: i * BLOCK_SIZE, y: 0};
}
addFood();
draw();
oMark.innerHTML = 0;
}
4.1.5 控制蛇的移动模块
//移动函数
function move(){
switch(toGo){
case 1: //左边
snakes.push({x: snakes[snakecount - 1].x - BLOCK_SIZE, y: snakes[snakecount - 1].y});
break;
case 2: //上边
snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y - BLOCK_SIZE});
break;
case 3: //右边
snakes.push({x: snakes[snakecount - 1].x + BLOCK_SIZE, y: snakes[snakecount - 1].y});
break;
case 4: //下边
snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y + BLOCK_SIZE});
break;
default:;
}
snakes.shift();
isEat();
isDie();
draw();
}
4.1.6 食物判断模块
//吃到食物判断
function isEat(){
if (snakes[snakecount - 1].x == foodX && snakes[snakecount - 1].y == foodY) {
oMark.innerHTML = (parseInt(oMark.innerHTML) + 1).toString();
addFood();
addSnake();
}
}
//添加蛇身
function addSnake(){
snakecount++;
snakes.unshift({x:BLOCK_SIZE * COLS, y:BLOCK_SIZE * ROWS});
}
//交互响应函数
function keydown(keyCode){
switch(keyCode){
case 37: //左边
if(toGo != 1 && toGo != 3) toGo = 1;break;
case 38: //上边
if(toGo != 2 && toGo != 4) toGo = 2;break;
case 39: //右边
if(toGo != 3 && toGo != 1) toGo = 3;break;
case 40: //下的
if(toGo != 4 && toGo != 2) toGo = 4;break;
case 80: //开始/暂停
if(isPause){
interval = setInterval(move,100);
isPause = false;
document.getElementById('pause').innerHTML = "Pause";
}else{
clearInterval(interval);
isPause = true;
document.getElementById('pause').innerHTML = "Start";
}
break;
}
}
//随机制造食物
function addFood(){
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 死亡控制模块
//死亡判断
function isDie(){
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("Game Over!");
clearInterval(interval);
}
for(var i = 0; i < snakecount - 1; i++){
if(snakes[snakecount - 1].x == snakes[i].x && snakes[snakecount - 1].y == snakes[i].y){
clearInterval(interval);
alert("Game Over!");
}
}
}
// 启动函数
window.onload = function(){
c = document.getElementById('canvas').getContext('2d');
oMark = document.getElementById('mark_con');
start();
interval = setInterval(move,100);
document.onkeydown = function(event){
var event = event || window.event;
keydown(event.keyCode);
}
}
</script>
</head>
<body>
<div id="page">
<div id="yard"><canvas id="canvas" height="600px" width="800px"></canvas></div>
<div id="help">
<div id="mark">得分：<span id="mark_con"></span></div>
<div id="helper">
<table>
<tr>
<td></td>
<td><button onclick="keydown(38);">上</button></td>
<td></td>
</tr>
<tr>
<td><button onclick="keydown(37);">左</button></td>
<td><button onclick="keydown(80);" id="pause">暂停</button></td>
<td><button onclick="keydown(39);">右</button></td>
</tr>
<tr>
<td></td>
<td><button onclick="keydown(40);">下</button></td>
<td></td>
</tr>
</table><a href="index.html">再玩一次</a>
</div>
</div>
</div>
<div style="text-align:center;">
<p>来源:<a href=" target="_blank">卧槽游戏</a></p>
</div>
</body>
</html>
4.2界面设计

有方块构成的蛇与随即出现的黄色食物，画面简单耐看，符合大部分人的口味。
4.3 游戏玩法
方向键控制上下左右，控制蛇不撞到四周围墙，在食物出现的时候经过食物，然后蛇身变长，分数增加，在撞到墙壁或者吃到自己尾巴的时候游戏结束。

打开网页
4.4算法流程
蛇的长度增加一，分数增加1
判断是否吃到食物
通过算法随即出现食物
上下左右控制蛇身
点击开始游戏

判断是否出界或者咬到自己

否

则继续
是

游戏结束，弹出提示框。
否 是

5游戏测试图

6.结论
通过本课题对基于HTML5技术的研究和实践，完成了一个纯粹由WEB技术中开放的HTML5技术标准和Javascript语言实现的实时性对战游戏平台。这充分的说明了下一代互联网标准HTML5的强大能力，并且直接通过浏览器打开的应用具有非常好的用户体验和较高的客户端安全性，这是其他的技术所不具备的优势。
7.参考文献

[1]皮尔格林,常可,胡金埔,赵静.HTML5揭秘[M].北京：电子工业出版社，2010
[2]罗森,夏普.HTML5用户指南[M].北京：机械工业出版社，2011.
[3]陆凌牛.HTML5与CSS3权威指南[M].北京：机械工业出版社，2011.
[4]泽卡斯.JavaScript高级程序设计(第2版)[M].北京：人民邮电出版社，2010.

17