HTML5小游戏灭蚊大作战

HTML5小游戏灭蚊大作战

添加时间:2021-03-05 19:37:12
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:益智
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

一款HTML5小游戏灭蚊大作战,点击“预备,上”的按钮开始游戏,按照文字出现的先后顺序不停的拍文字,每次游戏时间为20秒,一轮结束后可以重新开始游戏。
HTML5小游戏灭蚊大作战
分类:游戏 > 益智 难易:初级

页面的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>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:HTML5小游戏灭蚊大作战

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.114055s