基于H5 网页的打豆豆小游戏的设计与实现

目录
摘要 I
Abstract II
第1章绪论 1
1.1研究背景及意义 1
1.2研究现状 2
1.3研究主要内容 3
第2章技术分析 4
2.1 HTML5简介 4
2.2游戏引擎 4
2.3开发环境 5
第3章打豆豆网页游戏的设计 7
3.1游戏的玩法 7
3.2需求分析 7
3.3初步设计 7
3.4游戏开始流程 9
第4章打豆豆网页游戏的实现 11
4.1部分程序界面的实现 11
4.2游戏玩家界面 14
第5章总结与展望 17
5.1项目学习阶段总结 17
5.2项目实施阶段总结 17
5.3扩展知识 18
致谢 19
参考文献 20
1.3研究主要内容
打豆豆小游戏的设计与实现，将通过搜集资料，参考相关文献，使用HBuild软件运用HTML/CSS和JavaScript完成框架和布局、实现各板块的功能等。
首先使用了HTML5新添加的元素标签，对音频进行添加，不再借助第三方软件，方便了我们的编程，只需添加相应的声音文件即可，代码减少了很多，也体现了在各浏览器中的兼容性。而且我们还可以隐藏播放时的界面，这样就不会影响界面的美观了。
音频功能是有了新的标签，那么人们更多的是注重视频的添加不再那么麻烦，针对这一点HTML5也为此创建了元素标签，使得视频的添加不再过于繁琐，代码也不再过于臃肿。很多人认为视频要比音频的添加困难，因为视频还包括了图像，但是对于HTML5来说只需要一个标签而已，与音频的添加完全相似。
对于游戏来说最主要的就是界面要美观，这就要说到我们HTML5最主要的新元素了，通过Canvas你可以创建绚丽的图形和游戏界面，不仅如此你还可以通过JavaScript API来控制Canvas进行交互应用，产生动态的图画，动态的更新数据。不再借助第三方的Flash软件来显示动画，还可以自定义动画内容，方便快捷。
HTML5还可以进行本地存储，这个新的功能可以用来存储分数或者是玩家的排行榜。尽可能的使用新的特性标签来设计实现游戏的基本功能。

第2章技术分析
2.1 HTML5简介
HTML5是万维网html语言的第五个版本，目前比较流行的版本是HTML4.01，虽然相较先前的版本有了很大的改善，但是随着移动应用的发展，以前的那些版本已经远远达不到人们对于科学技术的要求，Html需要在包括语言方面，语法方面和UI、API等各方面的更新，因此就产生了现在这个新的版本。
在HTML5之前人们更注重用html来制作一些静态的网页，那时候人们通过网络的交互还不是那么发达，从网络上了解外界信息的心情也不是那么迫切，博客，网店也没有兴起。但是近几年随着科技和经济的不断发展，人们更倾向于从网上获取信息，在网上购买商品，节省了人们很多的时间与精力。
因此再2010年HTML5正式被大家所认可，实现了Web领域近十几年来质的飞跃，将Web推向了一个更高、更成熟、更稳定的平台。[3]
在此基础上HTML5将音频，视频，动画等内容融为一体，更是增加了很多新的元素标签，去除了一些繁琐，冗长的标签，将一些相似标签融为一体，比如增加了表单验证标签，节省了表单输入时的麻烦，这些新的标签是网页结构更加紧凑合理。比如hgroup可以将标题进行分组，合成一个个的整体，使开发页面也更加整洁；还有新添加的导航标签nav，有利于搜索引擎的结果整理。HTML5相较其他版本的以大亮点就是将audio和video引入到标签中，这样网页播放音频和视频时就不必借助第三方插件，本身就可以做到了。
当然对于游戏来说最主要的还是图形动画的界面要美观，这样才可以吸引更多的人来玩，对于这方面不得不提的就是Canvas标签了，它与其他元素不同，不像audio等元素直接将现有元素插到网页中，而是可以独立的处理或创建2D图形，不仅如此，还可以通过JavaScript语言来控制Canvas的图形来响应与用户交互的动态图形与动画。
2.2游戏引擎
介绍完了主要的开发语言平台，那开发过游戏的人都应该了解，开发一款游戏最重要的莫过于引擎了，下面我将介绍一下本次研究课题中所使用到的引擎。
游戏引擎是整款游戏的核心，是游戏的心脏，它提供很多种模板供开发者使用，使游戏设计者不必从零开始，就已经有可用的人物，工具等，减轻了开发者的工作量，也降低了学习游戏开发的门槛。
一般的游戏引擎包括渲染、场景、摄像、脚本、物理因素（重力、摩擦等）、碰撞检测、音效等系统，游戏玩家所体验到的关卡、剧情、玩法等都由引擎来控制，它在整个游戏中扮演着发动机的角色，为整个游戏提供动力，也扮演着幕后角色，在后台指挥者游戏的进程。一款完整的游戏包括游戏资源（如声音、图片等）和游戏引擎共同组成，缺一不可。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>打豆豆网页游戏</title>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">var browser='';if($.browser.msie){browser='IE';var version=$.browser.version;if (version=='6.0'||version=='7.0'){alert('老兄，换浏览器吧，还在用这种古董么...\n推荐使用chrome,IE9,firefox,opera,safari这四种浏览器，抵制傲游，世界之窗，３６０之类的山寨产品');}}
</script>
<script type="text/javascript">
imgWidth = 24;
imgHeight = 24;
space = 2;
doudou_x = 20;
doudou_y = 18;
doudou_num = 300;
doudouImg = ['green.gif', 'orange.gif', 'blue.gif', 'rose.gif', 'red.gif', 'gray.gif'];function doudou() {this.makeCanvas = function() {var bgA = "#eeeeee";for (var i = 1; i < doudou_y + 1; i++) {for (var j = 1; j < doudou_x + 1; j++) {if (j % 2 != i % 2) var squareHTML = "<div id=\"s_" + j + "_" + i + "\" style=\"background-color:" + bgA + ";cursor:pointer\" onclick=\"dadoudou(" + j + "," + i + ")\" class=\"s\"></div>";else var squareHTML = "<div id=\"s_" + j + "_" + i + "\" style=\"cursor:pointer\" onclick=\"dadoudou(" + j + "," + i + ")\" class=\"s\"></div>";$("#doudou").append(squareHTML)}}$(".s").css({"width": imgWidth + "px","float": "left","margin": +space / 2 + "px","cursor": "pointer"});$(".s").css("height", imgHeight + "px")};this.randomString = function(all, num) {var arr = new Array();for (var i = 0; i < num; i++) {arr.push('1')}var str = '';for (var j in arr) {str = str + arr[j]}var randomPosition = 0;for (var j = 0; j < all - num; j++) {randomPosition = Math.floor(Math.random() * str.length);str = str.substr(0, randomPosition) + '0' + str.substr(randomPosition, str.length - randomPosition)}return str};this.loadImg = function() {var t = doudou_x * doudou_y;var str = this.randomString(t, doudou_num);var doudouImgHtml = "";var tmp = 0;for (var i = 1; i < doudou_y + 1; i++) {for (var j = 1; j < doudou_x + 1; j++) {if (str[tmp] == 1) {var imgId = Math.floor(Math.random() * doudouImg.length);doudouImgHtml = "<span x=\"" + j + "\" y=\"" + i + "\" img=\"" + imgId + "\"\"><img  class=\"scrollimg\" src=\"doudou/" + doudouImg[imgId] + "\" /></span>";$("#s_" + j + "_" + i).append(doudouImgHtml)}tmp++}}}
}

基于H5 网页的打豆豆小游戏的设计与实现相关推荐

html游戏开发开题报告,基于H5 网页的打豆豆小游戏的设计与实现毕业论文+开题报告+设计源码...
摘要网页游戏是一个用现实包装的快感反馈引擎,它的根本目的始终是让玩家能够得到舒畅的体验为了娱乐心神,所以开发出大家喜欢的,高品质的休闲游戏会受到人们的普遍欢迎.打豆豆小游戏这款游戏主要是利用cs ...
基于JavaSwing开发吃豆子小游戏课程设计大作业源码
基于JavaSwing开发吃豆子小游戏: (大作业) 开发环境: Windows操作系统开发工具: MyEclipse/Eclipse/idea+Jdk 运行效果图: 基于JavaSwing开发 ...
基于JavaSwing开发潜艇大战小游戏课程设计大作业源码
基于JavaSwing开发潜艇大战小游戏: (大作业) 开发环境: Windows操作系统开发工具: Eclipse+Jdk 运行效果图: 基于JavaSwing开发潜艇大战小游戏: (大作业) ...
基于python的毕业论文-基于python的飞机大战小游戏毕业论文设计和代码
python 飞机大战论文计说明: 完成敌机发射子弹功能(注意:子弹不是连发.移动速度不要太快) 实现敌机子弹和玩家飞机的碰撞检测实现敌机子弹和玩家飞机的碰撞检测为消失的飞机添加爆炸效果为消失的 ...
基于python的游戏设计与实现-基于python的飞机大战小游戏毕业论文设计和代码
python 飞机大战论文计说明: 完成敌机发射子弹功能(注意:子弹不是连发.移动速度不要太快) 实现敌机子弹和玩家飞机的碰撞检测实现敌机子弹和玩家飞机的碰撞检测为消失的飞机添加爆炸效果为消失的 ...
基于Java的石头迷阵小游戏的设计与实现
文章目录 1 搭建游戏主界面 1.1 用JFrame类来创建窗体 (知识点继承) 1.2 菜单制作JMenuBar 1.3 添加图片 1.4 代码 2 添加游戏功能 2.1 事件监听机制 2.2 设计 ...
【基于Swing+Java的连连看小游戏的设计与实现（效果+源代码+论文获取~~）】
快速阅读目录 (一)效果 (1)初始化游戏 (2)游戏过程(静态截图) (3)动态游戏示例: (二)源代码示例 (三)说明 (一)效果 (1)初始化游戏 (2)游戏过程(静态截图) 选择游戏难度:
2048网页版html项目报告,jQuery编写网页版2048小游戏
大致介绍看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起 ...
基于STM32的贪吃蛇小游戏
基于STM32的贪吃蛇小游戏初学32一个月,学的并不多,便想着做一个贪吃蛇小游戏,因为有51单片机做贪吃蛇的经验,所以实现出来并不困难. 作品简介游戏面版将在4.3寸480*800)液晶上显示,初 ...

基于H5 网页的打豆豆小游戏的设计与实现

基于H5 网页的打豆豆小游戏的设计与实现相关推荐

最新文章

热门文章