一款HTML5小游戏灭蚊大作战,点击“预备,上”的按钮开始游戏,按照文字出现的先后顺序不停的拍文字,每次游戏时间为20秒,一轮结束后可以重新开始游戏。
页面的head部分,需加载必要的javascript代码并设置好页面样式,部分代码如下:
<script type="text/javascript">
//var i = new Date().getTime() % 5;
//if (i < 3) {
// document.write('<script type="text/javascript" src="game1/tt/scripts/createjs.js"><\/script>');
//}
//else {
// document.write('<script type="text/javascript" src="game1/tt/scripts/createjs.js"><\/script>');
//}
var isDesktop = navigator['userAgent'].match(/(ipad|iphone|ipod|android|windows phone)/i) ? false : true;
var fontunit = isDesktop ? 20 : ((window.innerWidth > window.innerHeight ? window.innerHeight : window.innerWidth) / 320) * 10;
document.write('<style type="text/css">' +
'html,body {font-size:' + (fontunit < 30 ? fontunit : '30') + 'px;}' +
(isDesktop ? '#welcome,#GameTimeLayer,#GameLayerBG,#GameScoreLayer.SHADE{position: absolute;}' :
'#welcome,#GameTimeLayer,#GameLayerBG,#GameScoreLayer.SHADE{position:fixed;}@media screen and (orientation:landscape) {#landscape {display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox;}}') +
'</style>');
</script>
<script type="text/ecmascript" src="scripts/createjs.js"></script>
页面的body部分,需设置好游戏的相关参数,部分代码如下:
window.shareData = {
"tTitle": "我是蚊子君,专治血气旺盛的2B青年,你敢pia我?",
"tContent": "就咬你,有脾气?"
};
if (isDesktop)
document.write('<div id="gameBody">');
var body, blockSize, GameLayer = [], GameLayerBG, touchArea = [], GameTimeLayer;
var transform, transitionDuration;
function init(argument) {
showWelcomeLayer();
body = document.getElementById('gameBody') || document.body;
body.style.height = window.innerHeight + 'px';
transform = typeof (body.style.webkitTransform) != 'undefined' ? 'webkitTransform' : (typeof (body.style.msTransform) != 'undefined' ? 'msTransform' : 'transform');
transitionDuration = transform.replace(/ransform/g, 'ransitionDuration');
GameTimeLayer = document.getElementById('GameTimeLayer');
GameLayer.push(document.getElementById('GameLayer1'));
GameLayer[0].children = GameLayer[0].querySelectorAll('div');
GameLayer.push(document.getElementById('GameLayer2'));
GameLayer[1].children = GameLayer[1].querySelectorAll('div');
GameLayerBG = document.getElementById('GameLayerBG');
if (GameLayerBG.ontouchstart === null) {
GameLayerBG.ontouchstart = gameTapEvent;
} else {
GameLayerBG.onmousedown = gameTapEvent;
document.getElementById('landscape-text').innerHTML = '点我开始pia蚊虫';
document.getElementById('landscape').onclick = winOpen;
}
gameInit();
window.addEventListener('resize', refreshSize, false);
var rtnMsg = "true";
setTimeout(function(){
if(rtnMsg == 'false'){
var btn = document.getElementById('ready-btn');
btn.className = 'btn';
btn.innerHTML = '蚊子已经快被你pia成稀有物种了,手下留情啊!'
}else{
var btn = document.getElementById('ready-btn');
btn.className = 'btn';
btn.innerHTML = ' 预备,上!'
btn.style.backgroundColor = '#F00';
btn.onclick = function(){
closeWelcomeLayer();
}
}
}, 500);
}
function winOpen() {
window.open(location.href + '?r=' + Math.random(), 'nWin', 'height=500,width=320,toolbar=no,menubar=no,scrollbars=no');
var opened = window.open('about:blank', '_self'); opened.opener = null; opened.close();
}
var refreshSizeTime;
function refreshSize() {
clearTimeout(refreshSizeTime);
refreshSizeTime = setTimeout(_refreshSize, 200);
}
接着设置好部分信息所需的容器和内容,代码如下:
<div id="GameScoreLayer" class="BBOX SHADE bgc1" style="display:none;">
<div style="padding:0 5%;">
<div id="GameScoreLayer-text"></div><br/>
<div id="GameScoreLayer-score" style="margin-bottom:1em;">得分</div>
<div id="GameScoreLayer-bast">最佳</div><br/>
<div id="GameScoreLayer-btn" class="BOX">
<div class="btn BOX-S" onClick="replayBtn()">重来</div>
</div><br/>
<div id="GameScoreLayer-share" class="BOX"></div><br>
<div id="GameScoreLayer-share" class="BOX"></div>
</div>
</div>
<div id="welcome" class="SHADE BOX-M">
<div class="welcome-bg FILL"></div>
<div class="FILL BOX-M" style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:5;">
<div style="margin:0 8% 0 9%;">
<div style="font-size:2.6em; color:#FEF002;">蚊子统治世界了!</div><br/>
<div style="font-size:2.2em; color:#fff; line-height:1.5em;">从离你最近的蚊子开始,<br/>20秒内看你能pia死多少只!<br/></div><br/><br/>
<div id="ready-btn" class="btn loading" style="display:inline-block; margin:0 auto; width:8em; height:1.7em; line-height:1.7em; font-size:2.2em; color:#fff;"></div>
<br/><br/>
</div>
</div>
</div>
<div id="landscape" class="SHADE BOX-M" style="background:rgba(0,0,0,.9);">
<div class="welcome-bg FILL"></div>
<div id="landscape-text" style="color:#fff;font-size:3em;">请竖屏玩耍</div>
</div>
<div id="share-wx"><p style="text-align: right; padding-left: 10px;"><img src="img/2000.png" id="share-wx-img" style="max-width: 280px; padding-right: 25px;"></p></div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791