1. 引言
游戏介绍
《开心消消乐》是一款基于HTML5技术开发的网页游戏,以其简单的操作方式、轻松的游戏体验和高度的互动性,迅速在社交平台上获得了广泛的关注和传播。玩家通过消除相同类型的元素来获得分数,游戏设计巧妙,易于上手,同时富有挑战性,使其成为休闲娱乐的不错选择。
HTML5技术在现代网页游戏开发中的作用
HTML5技术为现代网页游戏开发带来了革命性的变化。它提供了一系列的新特性和改进,包括但不限于:
源码解析
逐步分析《开心消消乐》游戏的实现。
<!DOCTYPE html>
<html class="SG-game-show" style="background:none;background-color:transparent; width:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<!-- 其他meta标签 -->
<title>开心消消乐-杭州吃喝玩乐</title>
<style type="text/css">
* { padding: 0px; margin: 0px; cursor: default; }
body { font: 12px/20px Palatino; }
</style>
<!-- JavaScript性能监控脚本 -->
</head>
<body>
<!-- 游戏容器 -->
<div id="spilgames-root"></div>
<!-- 游戏逻辑脚本引入 -->
<script type="text/javascript" src="SeaTreasureMatch_files/game.min.js"></script>
<!-- 分享功能脚本 -->
<script>
// 分享功能实现的JavaScript代码
</script>
<!-- 其他脚本和统计代码 -->
</body>
</html>
2. 头部元数据(Head Metadata)
Content-Type
charset
apple-mobile-web-app-capable
robots
apple-touch-fullscreen
description
<meta>
标签在HTML文档中扮演着重要角色,它们不仅帮助搜索引擎更好地理解页面内容,还影响着页面在浏览器中的呈现和行为。正确使用这些标签,可以提升网页的可访问性、用户体验和搜索引擎优化(SEO)。
4. JavaScript性能监控
_SPTimer
对象及其作用
_SPTimer
对象是一个自定义的JavaScript对象,用于监控和记录页面加载以及特定事件的时间。在您提供的源码中,_SPTimer
对象通过以下方式定义和使用:
var _SPTimer = {
w: {}, // 存储开始时间的字典
start: function(a) {
this.w[(a || "_")] = +new Date(); // 记录事件开始的时间
},
end: function(a) {
var b;
a = a || "_";
if (this.w[a]) {
b = new Date() - this.w[a]; // 计算事件持续的时间
window._gaq = window._gaq || []; // 确保analytics数组存在
window._gaq.push(["_trackTime", a, b]); // 将时间数据发送到analytics服务
}
}
};
作用分析:
页面加载时间的监控方法
页面加载时间是衡量网站性能的关键指标之一。在您的源码中,_SPTimer
被用来监控页面加载时间:
var SpilGamesBrandTimer = +new Date(),
_SPTimer = {
// _SPTimer的定义
};
_SPTimer.start('pageLoad');
5. 游戏容器设置
div#spilgames-root
的作用
在HTML文档中,div
元素通常用于分组和组织内容。当 div
元素带有特定的 id
属性时,它充当了页面上一个独特部分的容器,这个部分可以被CSS样式化,或者作为JavaScript操作的目标。在您提供的源码中:
<div id="spilgames-root"></div>
div#spilgames-root
有以下作用:
游戏逻辑脚本 game.min.js
的引入方式
在网页中引入外部JavaScript文件是实现网页功能的重要步骤。在您的源码中,game.min.js
脚本是这样引入的:
<script type="text/javascript" src="SeaTreasureMatch_files/game.min.js"></script>
效果图:
源代码:
<!DOCTYPE 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 charset="UTF-8">
<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>
<meta http-equiv="Content-Type" content="text/html">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="robots" content="index,follow">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="description" content="">
<title>开心消消乐-杭州吃喝玩乐</title>
<style type="text/css"> * { padding: 0px; margin: 0px; cursor: default; } body { font: 12px/20px Palatino; }</style>
<!--<script type="text/javascript">document.write('<script type="text/javascript" src="../resource/js/resource_loader.js?ver='+Math.random()+'"><\/script>')</script>-->
</head>
<body>
<div id="spilgames-root"></div>
<script type="text/javascript" src="SeaTreasureMatch_files/game.min.js"></script>
<script>
function dp_Ranking() {
document.location.href = "http://www.yxkfw.com/forum.php";
}
</script>
<div id="share" style="display: none">
<img width="100%" src="bitmap/share.png" style="position: fixed; z-index: 9999; top: 0; left: 0; display: " ontouchstart="document.getElementById('share').style.display='none';">
</div>
<script>
var mebtnopenurl = "http://mp.weixin.qq.com/s?__biz=MzA5MzU2MjU3Mw==&mid=218850712&idx=1&sn=53bfed8c43391843a6268706ccda8eb2&scene=1&key=1936e2bc22c2ceb5b8b45ee0ef26a5cc01639c3411c2cfd0bd74efb6f0a180003056abc9700e348732a0a5c963462d2f&ascene=1&uin=MjgxMTA4MTUwMQ%3D%3D&devicetype=Windows+7&version=61000721&pass_ticket=w4kQ%2FSFhaY2mmOE87ChVgbTRWP%2BctOhqXukbldnl%2FXb4%2BOxgCyIxSdzUjax%2FUmHK";
var tit = "";
var DFW = {
appId: "",
TLImg: "http://www.51tingweikeji.com/youxi/icon/kaixinlian.jpg",
url: "http://www.51tingweikeji.com/youxi/games/kaixinlian/",
title: "开心消消乐-多多游戏",
desc: "我消,我消,我消...!"
};
var onBridgeReady = function () {
WeixinJSBridge.on('menu:share:appmessage', function (argv) {
WeixinJSBridge.invoke('sendAppMessage', {
"appid": DFW.appId,
"img_url": DFW.TLImg,
"img_width": "120",
"img_height": "120",
"link": DFW.url,
"title": DFW.title + tit,
"desc": DFW.desc
}
);
});
WeixinJSBridge.on('menu:share:timeline', function (argv) {
WeixinJSBridge.invoke('shareTimeline', {
"appid": DFW.appId,
"img_url": DFW.TLImg,
"img_width": "120",
"img_height": "120",
"link": DFW.url,
"title": DFW.title + tit,
"desc": DFW.desc
}
);
});
};
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
function do_share(score) {
document.title = "我获得了" + score + "分,一起来消星星吧!";
document.getElementById("share").style.display = "";
window.DFW.title = document.title;
}
function dp_submitScore(level,score) {
//alert("你获得" + score + "分");
if (score > 5000) {
if (confirm("你获得了" + score + " 要不要通知下小伙伴们呢?")) {
do_share(score);
}
}
}
</script>
<div style="display: none;"><script type="text/javascript" src="http://tajs.qq.com/stats?sId=36313548" charset="UTF-8"></script></div>
</body></html>
JS源码
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()
};
api.end = function() {
var d = !1,
a;
end = function() {
a = d ? 0 : globalSettings.time;
updateBodyCheck(emptyFn);
0 > a ? fadeOut() : setTimeout(fadeOut, a)
};
return function(b) {
endTriggered || (d = b || !1, endTriggered = !0, b ? end() : updateBodyCheck(end, !0))
}
}();
return api
}(window);
SpilGamesBrand.show({
css: "top: 0px; left: 0px; z-index: 9999; position: absolute; background: #d0e8fd url('logo.png') no-repeat center; -webkit-background-size: 320px 320px !important;"
});
window.FZ = {};
(function() {
window.Gamehub && (window.SpilGames = {
_: function(d) {
var h = arguments,
a = 0;
return d.replace(/%s/g, function(b) {
a++;
return void 0 !== h[a] ? h[a] : b
})
},
Highscores: {
insert: function(d) {
Gamehub.Score.submit(d.score)
},
showScoreboard: function(d) {
Gamehub.ShowScoreboard();
d && setTimeout(d, 100)
}
},
Settings: {
get: function(d) {
switch (d) {
case "currentGameInfo":
return {
splashScreen: Gamehub.Settings.splashScreen,
rotationLockSreen: {
portrait: Gamehub.Settings.rotationLockScreen.portrait,
landscape: Gamehub.Settings.rotationLockScreen.landscape
}
};
default:
return {}
}
}
}
});
FZ.SpilAPI = {
SubmitScore: function(d) {
FZ.SpilAPI.checkSpilAPI();
SpilGames.Highscores.insert({
score: d
})
},
ShowHighscore: function() {
FZ.SpilAPI.checkSpilAPI();
!FZ.SpilAPI.___noSpilGamesAPI && FZ.GameBase && FZ.GameBase.pauseGame();
SpilGames.Highscores.showScoreboard(function() {
FZ.GameBase && FZ.GameBase.resumeGame()
})
},
GetSplashScreenURL: function() {
FZ.SpilAPI.checkSpilAPI();
return FZ.SpilAPI.___noSpilGamesAPI ? "" :