基于H5 网页的打豆豆小游戏的设计与实现_飞道的博客

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

2022-11-08 18:15 270人阅读评论(0)

目录
摘要 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游戏引擎
介绍完了主要的开发语言平台，那开发过游戏的人都应该了解，开发一款游戏最重要的莫过于引擎了，下面我将介绍一下本次研究课题中所使用到的引擎。
游戏引擎是整款游戏的核心，是游戏的心脏，它提供很多种模板供开发者使用，使游戏设计者不必从零开始，就已经有可用的人物，工具等，减轻了开发者的工作量，也降低了学习游戏开发的门槛。
一般的游戏引擎包括渲染、场景、摄像、脚本、物理因素（重力、摩擦等）、碰撞检测、音效等系统，游戏玩家所体验到的关卡、剧情、玩法等都由引擎来控制，它在整个游戏中扮演着发动机的角色，本文转载自http://www.biyezuopin.vip/onews.asp?id=11750为整个游戏提供动力，也扮演着幕后角色，在后台指挥者游戏的进程。一款完整的游戏包括游戏资源（如声音、图片等）和游戏引擎共同组成，缺一不可。

<!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++
			}
		}
	}
}