HTML5小游戏灭蚊大作战

来源:https://www.sucaihuo.com/js/2972.html 2017-09-10 12:57浏览(611) 收藏

一款HTML5小游戏灭蚊大作战,点击“预备,上”的按钮开始游戏,按照文字出现的先后顺序不停的拍文字,每次游戏时间为20秒,一轮结束后可以重新开始游戏。
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>&nbsp;
		</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>
标签: 游戏小游戏
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2