HTML5如何实现开心消消乐小游戏

最新推荐文章于 2024-09-08 12:18:13 发布

初尘屿风

最新推荐文章于 2024-09-08 12:18:13 发布

阅读量3.1k

点赞数 4

分类专栏： JavaScript 初尘屿风前端文章标签： javascript html5 github js 数据挖掘

本文链接：https://blog.csdn.net/qinluyu111/article/details/116404286

版权

初尘屿风同时被 3 个专栏收录

191 篇文章 10 订阅

订阅专栏

前端

19 篇文章 0 订阅

订阅专栏

JavaScript

16 篇文章 0 订阅

订阅专栏

HTML5如何实现开心消消乐小游戏

HTML5的强大之处令人震惊，我最近手敲了一个开心消消乐小游戏，网页上也有类似的效果，但亲身操作的感觉不一样，几乎还原原场景，供大家参考浏览。

文章目录

HTML5如何实现开心消消乐小游戏？
前言
一、pandas是什么？
二、使用步骤
- 1.引入库
- 2.读入数据
总结

前言

随着人工智能的不断发展，编程这门技术也越来越重要，很多人都开启了学习编程学习，本文就介绍了HTML的基础案例。HTML（Hyper Text Markup Language）是超文本编辑语言，HTML不是编程语言，不同于C语言、java或C#等编程语言，而是一种标记语言(markup language)，标记语言是由一套标记标签（markup tag）如<html></html>、<head></head>、<title></title>、<body></body>等组成。HTML就使用这些标记标签来描述网页。

一、HTML是什么？

1.HTML·的历史

HTML1是1993年IETF(互联网工作任务组)团队的一个工作草案，并不是成型的标准；1995年11月作为RFC1866发布，于2000年6月RFC2854发布之后宣布过时；1996年W3C撰写新规范，并于1997年1月推出HTML3.2；2000年5月15日发布，基于HTML4.01成为了国际标准化组织和国际电工委员会的标准，一直被沿用至今，虽然有小的改动，但大体方向没有四年大变化；HTML5 是对 HTML 标准的第五次修订，其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。而HTML5本身并非技术，而是标准。它所使用的技术早已很成熟，国内通常所说的html5实际上是html与css3及JavaScript和api等的一个组合，大概可以用以下公式说明：HTML5≈HTML+CSS3+JavaScript+API.

2.HTML的优点

兼容性好，HTML其突出的特点就是强化了web页的表现性,追加了本地数据库，可以用作离线应用的开发，离线应用就是把需要的资源先缓存到本地，下次再查看时无需联网。HTML开发能提供更快、更简便的服务，代码可高度重用，服务发布方便。.并且HTML入行门槛很低，如果你是没有基础来学习HTML5，好好清楚这几点，那么在学习过程当中，你会更好、更快掌握所学内容。

二、案例展示

开发环境：Sublime Text

1.效果预览

视频上传不成功，只能以图片为展示标准。

2.部分源代码展示

HTML：

<html class="SG-game-show" style="background:none;background-color:transparent; width:100%;" manifest="manifest.mf">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<script type="text/javascript">
var SpilGamesBrandTimer = +new Date(),
_SPTimer={w:{},start:function(a){this.w[(a||"_")]=+new Date()},end:function(a){window._gaq=window._gaq||[],a=a||"_";if(this.w[a]){ 
}}};
_SPTimer.start('pageLoad');
</script>
	
<title>开心消消乐</title>		
<style type="text/css"> * { padding: 0px; margin: 0px; cursor: default; } body { font: 12px/20px Palatino; }</style>	
</head>
<body>


<div id="spilgames-root"></div>

JavaScript：

SpilGamesBrand = function() {
	var d = window.document;
	documentElement = d.documentElement || {};
	element = d.createElement("div");
	container = d.getElementById("spilgames-root");
	emptyFn = function() {};
	globalSettings = {};
	api = {};
	updateBodyCheck = function(d) {
		var a, b = d,
			c = !1;
		return function(d, f) {
			b = d || b;
			c = f || c;
			clearTimeout(a);
			c && (a = setTimeout(function() {
				updateBodyCheck = function(a) {
					b = a || b;
					b()
				};
				b()
			}, 100))
		}
	}(emptyFn);
	updateSize = function() {
		var h = d.body || d.getElementsByTagName("body")[0];
		updateSize = function(a) {
			a = h.getElementsByTagName("*");
			for (var b = a.length, c = 0, k = element.style.zIndex, f = 0; f < b; f++) c++, a[f] !== element && a[f].style.zIndex > c && (c = a[f].style.zIndex), c > k && (k = c, updateBodyCheck());
			element.style.zIndex = k;
			element.style.width = (window.innerWidth || documentElement.clientWidth || d.getElementsByTagName("body")[0].clientWidth) + "px";
			element.style.height = (window.innerHeight || documentElement.clientHeight || d.getElementsByTagName("body")[0].clientHeight) + "px";
			waitId = setTimeout(updateSize, updateSpeed)
		};
		updateSize()
	};
	und = function(d) {
		return void 0 === d
	};
	fadeOut = function(d) {
		var a = d.style,
			b = function() {
				_SPTimer.end("splashscreen");
				clearTimeout(waitId);
				globalSettings.container.removeChild(d)
			};
		return und(a.webkitTransition) && und(a.MozTransition) && und(a.transition) ? (a.opacity = 1, function() {
			console.info("opacity")
		}) : function() {
			a.opacity = 0;
			a.webkitTransition = a.MozTransition = a.transition = "opacity 500ms ease 0ms";
			d.addEventListener("webkitTransitionEnd", b);
			d.addEventListener("mozTransitionEnd", b);
			d.addEventListener("transitionend", b)
		}
	}(element);
	waitId = null;
	updateSpeed = 100;
	endTriggered = !1;
	element.id = "splashscreen";
	api.show = function(d) {
		d = d || {};
		globalSettings = {
			time: d.time || 2500,
			onEnd: d.onEnd || emptyFn,
			onStart: d.onStart || emptyFn,
			container: d.container || container,
			css: d.css || ""
		};
		0 > globalSettings.time && (globalSettings.time = 0);
		setTimeout(function() {
			updateSpeed = 300
		}, 3E4);
		updateSize();
		globalSettings.container.appendChild(element);
		element.style.cssText = globalSettings.css;
		_SPTimer.start("splashscreen");
		globalSettings.onStart()
	};