JS小游戏之是男人坚持30秒

时间：2013-11-22 来源：互联网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS小游戏之是男人坚持30秒</title>
<style type="text/css">
/*科e互联CSS基础框架*/
*{padding:0; margin:0; font-size:12px; list-style:none}
.cor_bs,.cor_bs:hover{ color: #ffffff; text-decoration: none; font-size:16px;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center;font-weight:normal}
.kePublic{ background: #fff url(http://www.internetke.com/jsEffects/2013111805/images/bg.jpg) repeat; padding-top: 25px; }
.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; padding-bottom:25px}
.keTxtP{font-size:16px; color:#ffffff;}
.keUrl{color:#FFF; font-size:30px;}
.keUrl:hover{ text-decoration: underline; color: #FFF; }
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top,  #ed1c24,  #A51715);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top,  #c9151b,  #a11115); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
/*科e互联CSS基础框架结束，可删除*/
/*特效CSS代码 开始*/
a{color:#fff;}ul,li{list-style:none;}#div1{position:relative;width:450px;height:400px;background:#222;margin:30px auto;padding-top:50px;}#div2{width:350px;height:350px;background:#fff;margin:0 auto;}#son1{position:absolute;left:30px;top:0;background:#008040;height:20px;width:100px;filter:alpha(opacity=60);opacity:0.6;}#son2{position:absolute;right:30px;top:0px;background:#008040;height:100px;width:20px;filter:alpha(opacity=60);opacity:0.6;}#son3{position:absolute;left:0;bottom:0;background:#008040;height:70px;width:70px;filter:alpha(opacity=60);opacity:0.6;}#move{position:absolute;width:60px;height:60px;background:red;filter:alpha(opacity=60);opacity:0.6;cursor:move;}#divNavBar{border: 1px solid #5F91A6;border-radius: 6px 6px 6px 6px;padding: 0;width: 650px;margin:20px auto;}#divNavBar ul{zoom:1;}#divNavBar ul:after{clear:both;content:""; display:block;}#divNavBar li {background: url("http://www.qdway.com/THEMES/DeepBlue/STYLE/images/white_1.png") no-repeat scroll right 2px transparent;float:left;margin: 2px;padding: 0 2px;}#divNavBar a {float: left;height: 14px;margin: 0;padding: 6px 10px 4px;text-decoration: none;color:#fff;}
/*特效CSS代码 结束*/
</style>
</head>
<body class="keBody">
<h1 class="keTitle">JS小游戏之是男人坚持30秒</h1>
<div class="kePublic">
<!--效果html开始-->
<div id="mb" style="display:none;width:100%;height:100%;filter:alpha(opacity=60);opacity:0.6;background:#111;position:absolute;top:0;left:0;z-index:9999;"></div>
<div id="div1">
 <div id="div2">
  <div id="son1"></div>
  <div id="son2"></div>
  <div id="son3"></div>
  <div id="move"></div>
 </div>
</div>
<p id="p1" style="position:absolute;top:0px;left:0;width:100%;color:#fff;font-size:24px;text-align:center;z-index:-1;"></p>
<p style="width:500px;margin:0 auto;font-size:14px;line-height:22px;padding-bottom:25px">游戏规则：鼠标移动到红色部分，拖动红块，避免碰到绿色部分，不要碰到黑色区域，坚持的时间越长你越牛X！如果你能坚持30秒，记得给我留言哦！本游戏支持IE，Chrome，Firefox，safari等浏览器！</p>
<script type="text/javascript">
var game={ms:0,sec:0,minute:0,hour:0,isMove:true,timeStart:null,son:[],$id:function(id){return typeof id=="string"?document.getElementById(id):id;},redDiv:function(){return game.$id("move");},writeDiv:function(){return game.$id("div2");},move:function(obj1,obj2,v){var o=game.$id(obj2);var redDiv=game.$id("move");var changeSpeed=0;var x=o.offsetLeft,y=o.offsetTop,fx=1,fy=1;var iWidth=game.$id(obj1).offsetWidth-game.$id(obj2).offsetWidth;var iHeight=game.$id(obj1).offsetHeight-game.$id(obj2).offsetHeight;o.Timer=setInterval(function(){x+=v*fx;y+=v*fy;changeSpeed++;if(changeSpeed%300==0){v+=2;}if(x>iWidth||x<0){fx*=-1;}if(y>iHeight||y<0){fy*=-1;}o.style.left=x+'px';o.style.top=y+'px';if(game.crashCheck(o,redDiv)){game.clearSet();clearInterval(game.timeStart);game.timeStart=null;game.stopMove();alert("您坚持了"+game.$id("p1").innerHTML+"秒");setTimeout(game.iLoad,300);}},30);},oTime:function(){game.ms=parseInt(game.ms)+10;if(parseInt(game.ms)==100){game.sec++;game.ms=0;}if(parseInt(game.sec)==60){game.minute++;game.sec=0;}if(parseInt(game.minute==60)){game.hour++;game.minute=0;}if(parseInt(game.ms)<10){game.ms="0"+game.ms;}var show=game.$id("p1");if(game.sec<10)show.innerHTML=game.hour+":"+game.minute+":0"+game.sec+":"+game.ms+"";if(game.minute<10)show.innerHTML=game.hour+":0"+game.minute+":"+game.sec+":"+game.ms+"";if(game.sec<10&&game.minute<10)show.innerHTML=game.hour+":0"+game.minute+":0"+game.sec+":"+game.ms+"";else show.innerHTML=game.hour+":"+game.minute+":"+game.sec+":"+game.ms+"";},iMouse:null,oDiv:null,startMove:function(obj,ev){var oEvent=ev||event;if(game.isMove){game.move("div1","son1",3);game.move("div1","son2",3);game.move("div1","son3",3);game.ms=0;game.sec=0;game.minute=0;game.hour=0;game.timeStart=setInterval("game.oTime()",100);game.isMove=false;}game.iMouse={x:oEvent.clientX,y:oEvent.clientY};game.oDiv={x:obj.offsetLeft,y:obj.offsetTop};if(obj.setCapture){obj.onmousemove=game.doMove;obj.onmouseup=game.stopMove;obj.setCapture();}else
{document.addEventListener("mousemove",game.doMove,true);document.addEventListener("mouseup",game.stopMove,true);}},doMove:function(ev){var oEvent=ev||event;l=oEvent.clientX-game.iMouse.x+game.oDiv.x;t=oEvent.clientY-game.iMouse.y+game.oDiv.y;if(l<game.writeDiv().offsetLeft||l>(game.writeDiv().offsetWidth-game.redDiv().offsetWidth+game.writeDiv().offsetLeft)||t<game.writeDiv().offsetTop||t>(game.writeDiv().offsetHeight-game.redDiv().offsetHeight+game.writeDiv().offsetTop)){game.clearSet();clearInterval(game.timeStart);game.timeStart=null;game.stopMove();alert("您坚持了"+game.$id("p1").innerHTML+"秒");setTimeout(game.iLoad,100);}game.redDiv().style.left=l+"px";game.redDiv().style.top=t+"px";},stopMove:function(ev){if(game.redDiv().releaseCapture){game.redDiv().onmousemove=null;game.redDiv().onmouseup=null;game.redDiv().releaseCapture();}else
{document.removeEventListener("mousemove",game.doMove,true);document.removeEventListener("mouseup",game.stopMove,true);}},crashCheck:function(objDrag,oDiv){var dragDiv1={l1:objDrag.offsetLeft,r1:objDrag.offsetLeft+objDrag.offsetWidth,t1:objDrag.offsetTop,b1:objDrag.offsetTop+objDrag.offsetHeight};var moveDiv2={l1:oDiv.offsetLeft,r1:oDiv.offsetLeft+oDiv.offsetWidth,t1:oDiv.offsetTop,b1:oDiv.offsetTop+oDiv.offsetHeight};if(dragDiv1.r1<moveDiv2.l1||dragDiv1.l1>moveDiv2.r1||dragDiv1.b1<moveDiv2.t1||dragDiv1.t1>moveDiv2.b1){return false;}else
{return true;}},clearSet:function(){var divNum=game.$id("div2").getElementsByTagName("div");for(var i=0,l=divNum.length-1;i<l;i++){clearInterval(divNum[i].Timer);divNum[i].Timer=null;}},success:function(){var divNum=game.$id("div2").getElementsByTagName("div");for(var i=0,l=divNum.length-1;i<l;i++){game.son.push(divNum[i].offsetLeft);game.son.push(divNum[i].offsetTop);}game.$id("move").style.left=(game.$id("div1").offsetWidth-game.$id("move").offsetWidth)/2+"px";game.$id("move").style.top=(game.$id("div1").offsetHeight-game.$id("move").offsetHeight)/2+"px";game.$id("move").onmousedown=function(ev){game.startMove(this,ev);};document.write("<scr"+"ipt src=\"http://js.tongji.linezing.com/2360374/tongji.js\" language=\"JavaScript\" charset=\"gb2312\"></sc"+"ript>");},iLoad:function(){game.isMove=true;game.$id("move").style.left=(game.$id("div1").offsetWidth-game.$id("move").offsetWidth)/2+"px";game.$id("move").style.top=(game.$id("div1").offsetHeight-game.$id("move").offsetHeight)/2+"px";var divNum=game.$id("div2").getElementsByTagName("div");for(var i=0,l=divNum.length-1;i<l;i++){var n=2*i;divNum[i].style.left=game.son[n]+"px";divNum[i].style.top=game.son[n+1]+"px";}}};game.success();
   </script>
<!--效果html结束-->
</div>
<div class="keBottom">
<p class="keTxtP">科e互联网页特效集锦---更多特效请访问 <a class="keUrl" href="http://www.internetke.com" target="_blank">www.internetke.com</a></p>
<p class="keTxtP">本站导航：
<a href="http://www.internetke.com/" target="_blank" class="cor_bs">网站建设</a> | 
<a href="http://www.internetke.com/material/" target="_blank" class="cor_bs">网页素材</a> | 
<a href="http://www.internetke.com/effects/" target="_blank" class="cor_bs">网页特效</a> | 
<a href="http://www.internetke.com/share/" target="_blank" class="cor_bs">设计分享</a> | 
<a href="http://www.internetke.com/tutorial/" target="_blank" class="cor_bs">建站教程</a> | 
<a href="http://www.internetke.com/model/" target="_blank" class="cor_bs">网站模版</a> | 
<a href="http://www.internetke.com/appreciate/" target="_blank" class="cor_bs">酷站赏析</a>
</p>
<p class="keTxtP">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码为【科e整理/原创特效】仅供学习交流，请勿用于商业用途。
<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=a7df3558c291e0407375b9ad649d96a6e507286ffeb0650c65a221d1500a0779" class="button red" title="北京网站建设,网页特效QQ交流群-科e互联">加入QQ交流群</a></p>
</div>
<!--广告代码开始-->
<div style="text-align:center"><script src='/plus/ad_js.php?aid=22' language='javascript'></script></div>
<!--广告代码结束-->
</body>
</html>

运行代码保存代码收藏分享评论提示：您可以先修改部分代码再运行。

特效说明：

游戏完成时测试了IE6.7.8,Chrome8.0,firefox4.0,safari等浏览器，兼容性良好！游戏规则：鼠标移动到红色部分，拖动红块，避免碰到绿色部分，不要碰到黑色区域，坚持的时间越长你越牛X！本游戏支持IE,Chrome，Firefox，safari等浏览器！如果你能坚持30秒，就一定是纯爷们！（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）

标签 JS游戏

JS采用VUE制作无限极树形结构菜单展开收缩代码

2019-04-12
HTML5绘制动态线条像素背景动画特效

2019-04-12
jQuery网页视频在线播放器代码

2019-04-12
HTML5科幻空间动画背景网页特效

2019-04-12
jQuery滑动验证解锁插件slideunlock.js

2019-04-10

JS小游戏之是男人坚持30秒

分类导航

最新更新特效

JS采用VUE制作无限极树形结构菜单展开收缩代码

HTML5绘制动态线条像素背景动画特效

jQuery网页视频在线播放器代码

HTML5科幻空间动画背景网页特效

jQuery滑动验证解锁插件slideunlock.js