web前端游戏项目-堆木头游戏【附源码】

发布时间:2023年12月22日

web前端游戏项目-堆木头游戏

《堆木头》游戏玩法简单,通过鼠标点击放木头的按钮,叠加在一起,构建出各种结构。游戏适合所有年龄段的孩子,可以锻炼孩子的动手能力和手眼协调能力,激发孩子的创造力和想象力

运行效果
在这里插入图片描述
在这里插入图片描述

HTML源码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width = 320,initial-scale=1,user-scalable=no" />
<link rel="apple-touch-icon-precomposed" href="icon.png"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon-precomposed" href="icon.png"/>
<link rel="apple-touch-startup-image" href="i/loader.png">
<meta name="description" content="堆木头游戏,简单好玩的小游戏,尽可能的精确对齐木头,堆木头达到最高,当你感觉木头和下面的对齐时,按下按钮放木头" />
<title>堆木头 反应速度测试小游戏</title>
<style type="text/css">
 body { font-family: helvetica, arial; background-color: #000000; color: #a3b3c3; border:0; padding:0; font-size:90%; overflow: hidden;
width: 320px;
margin: auto;}

 h1 {margin:.4em;}
 h3 { font-size:120%; margin:12px; padding-left:0;margin-bottom:.5em; color: #ffffff;}
 p {margin:0; margin:12px; margin-top:.5em; margin-bottom:.5em; font-size:84%;}
 a { color: #ffffff; }

 td{text-align:center; font-size: 70%;}
 
 .ibox {width:320px; height:315px; overflow:hidden; background-color: #000000; margin:auto;}
 .iboxcontent {width:320px; height:315px; float:left; overflow:hidden;}
 .ibc1 {background-color: #3b4859; background-image:url(./i/bg1.png);}
 .ibc2 {background-color: #404d5e; background-image:url(./i/bg2.png);}
 
 #alertbox {display:none;position:absolute; z-index:200;}
 #alertbox_flekk {position:absolute; width:320px; height: 356px; background-color:#000000; opacity: .8;}
 #alertbox_content {position:absolute; width:320px; height:286px; margin-top:70px; text-align:center; color:#ffffff;}
 #alertbox_content .fontostext {color:#a3b3c3;}
 #alertbox a {margin:10px; width:114px; height:54px; }
 img {border:0;}
 

 #imenu a:hover {opacity:.5;}


 #score,#combo,#level {color:#ffffff;} 

 #button_xwuz {position:absolute; display:block; width:48px; height:57px; margin: 5px 0 0 267px; background-image:url(./i/xwuz.png);z-index:1; cursor:pointer;}

 #yourbest { text-align:center; font-weight:bold; color:#ffffff;font-size: 300%; margin: .5em auto .5em auto; background-image:url(./i/flekk.png); width:296px; height:65px; padding-top:15px;}
 .fontostext {color: #ffffff;}

 #preload {width:320px;position:absolute; visibility:hidden; overflow:hidden;}
</style>

<script type="text/javascript" src="standard.js"  charset="utf-8"></script>
<script type="text/javascript" src="stack.js"  charset="utf-8"></script>
</head>
<body>


<div style="width:320px; height: 500px;">
<div style="width:100%; height:50px;text-align:center;overflow:hidden;margin:0 auto;margin-bottom: 10px;">

</div>
<div style="position: absolute;margin-top: 400px; width: 320px; heigth: 48px; background: #ffffff"></div>

<div id="alertbox"><div id="alertbox_flekk"></div><div id="alertbox_content"></div></div>
 <a id="button_xwuz" onclick="return menuswitch(document.getElementById('button_about'));" ontouchstart="return menuswitch(document.getElementById('button_about'));"></a>

<div id="imenu">
 <a id="button_game" href="#game" class="active" onclick="return menuswitch(this);" ontouchstart="return menuswitch(this);"><span style="display:none">重新开始</span></a>
 <a id="button_highscore" href="#highscore" onclick="return menuswitch(this);" ontouchstart="return menuswitch(this);"><span style="display:none">游戏排行榜</span></a>
 <a id="button_about" href="http://g.huceo.com/weixin/"  ontouchstart="return menuswitch(this);"><span style="display:none">更多游戏</span></a>
</div>

<div class="ibox" id="container"><div style="width:10000px;" id="container_scroller">
 <div id="ibox_game" class="iboxcontent ibc1" style="position: relative;">
  <div style="width: 237px; height:15px; overflow:hidden;margin-left: 13px;padding-top:10px; font-size:90%; position:absolute; z-index:20;">
  <div style="float:left"><div style="float:left" id="score_title">得分:&nbsp;</div><div id="score" style="float:left;  width:2em;">0</div></div>
  <div style="float:right"><div style="float:left">连击:&nbsp;</div><div id="combo" style="float:left; width:1.5em;">0</div></div>
  <div style="text-align:center">等级: <span id="level">1</span></div>
  </div>
  <div style="width:320px;height:316px; overflow:hidden; position: relative;" id="st_outerarea">
  </div>
 </div>
 <div id="ibox_highscore" class="iboxcontent ibc2">
  <h3>您目前的最高分是...</h3>
  <div id="yourbest"></div>
  <p>一般人努力点可以达到<span class="fontostext">2500</span> 分, 高手可以达到<span class="fontostext">3500</span> 分. 你可以分享给好友挑战下</p>
  <p>你已经玩了 <span id="gamesplayed" class="fontostext">0</span><span class="fontostext">堆木头</span>.</p>
  <p>点击右上角分享分数到朋友圈</p>
  
<div class="baidu_share">
<!-- Baidu Button BEGIN -->
<div id="share_label" style="border-bottom: none">
   <p><span>分享到 : </span></p>
</div>
<div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare" style="margin-left:20px;">
    <a class="bds_tsina"></a>
    <a class="bds_qzone"></a>
    <a class="bds_tqq"></a>
    <a class="bds_douban"></a>
    <a class="bds_renren"></a>
    <a class="shareCount"></a>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=603462" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>
<!-- Baidu Button END -->
<br style="clear: both">
</div>

 </div>
</div></div>
<script type="text/javascript"><!--
firstinit();
ialert('<h1>堆木头</h1><p style="margin: 0 20px 0 20px; text-align:left;"><img src="i/icon.png" alt="堆木头!" style="width:64px; height:64px;float:left; margin-right:5px;"/> 当木头移动到木头堆正上方时,按下按钮放木头,尽可能的对齐木头.</p>'+
'<div style="width:110px; margin:30px auto -30px auto;"></div>','restartgame()');
//-->

function play68_init() {
	updateShare(0);
}

function updateShare(bestScore) {
	imgUrl = 'http://g.huceo.com/weixin/feidegenggao/icon.png';
	lineLink = 'http://g.huceo.com/weixin/feidegenggao/';
	descContent = "创意跳高游戏,快来一起跳!";
	updateShareScore(bestScore);
	appid = '';
}

function updateShareScore(bestScore) {
	if(bestScore > 0) {
		shareTitle = "我跳我跳我跳跳跳到" + bestScore + "米,你跳你跳你跳跳跳看!";
	}
	else{
		shareTitle = "我跳我跳我跳跳跳,你跳你跳你跳跳跳!";
	}
}

play68_init();
</script>

</div></body>
</html>
CSS源码:
@CHARSET "UTF-8";#bdshare ul,#bdshare_s ul,#bdshare ul li,#bdshare_s ul li,#bdshare_l_c ul li,#bdshare_m_c ul li,#bdshare_pop ul,#bdshare_pop ul li{list-style:none;margin:0;padding:0}#bdshare{_overflow-x:hidden;z-index:999999;padding-bottom:2px;font-size:12px;float:left;text-align:left!important;zoom:1}#bdshare a,#bdshare_s a,#bdshare_pop a{text-decoration:none;cursor:pointer}#bdshare a:hover,#bdshare_s a:hover,#bdshare_pop a:hover{color:#333;opacity:.8;filter:alpha(opacity=80)}#bdshare img{border:0;margin:0;padding:0;cursor:pointer}#bdshare h6,#bdshare_s h6{width:100%;font:14px/22px '宋体';text-indent:.5em;font-weight:700;border-top:1px solid #fbfbfb;border-bottom:1px solid #f2f1f1;background-color:#f6f6f6;float:left;padding:5px 0;margin:0}#bdshare ul,#bdshare_s ul{width:98%;float:left;padding:8px 0;margin-left:2px;overflow:hidden}#bdshare ul li,#bdshare_s ul li{width:47%;_width:41%;float:left;margin:4px 2px}#bdshare ul li a,#bdshare_s ul li a{color:#565656;font:12px '宋体';display:block;width:98%;padding:6px 0;text-indent:2.4em;*text-indent:1.8em;_text-indent:1.8em;border:1px solid #fff}#bdshare ul li a:hover,#bdshare_s ul li a:hover{background-color:#f3f3f3;border:1px solid #eee;-webkit-border-radius:3px;-moz-border-radius:3px}#bdshare p,#bdshare_s p{width:100%;height:21px;font:12px '宋体';border-top:1px solid #f2f1f1;background-color:#f8f8f8;float:left;padding:0;margin:0}#bdshare p a,#bdshare_s p a{width:auto;text-align:right;float:right;padding:0 5px}#bdshare_l{width:212px;position:absolute;top:0;background:#fff;text-align:left}#bdshare_l_c{width:210px;float:left;border:1px solid #e9e9e9;text-align:left}#bdshare_l_c ul li{width:47%;height:26px;float:left;margin:2px}#bdshare_l_c ul li a{background:url(../images/is.png?cdnversion=20131219) no-repeat;height:auto!important}#bdshare_m{width:132px;float:right;position:absolute;zoom:1;background:#fff}#bdshare_m_c{width:130px;float:left;border:1px solid #e9e9e9;overflow:hidden;background:#fff}#bdshare_m_c ul li{width:97%;_width:90%;float:left;margin:2px}#bdshare_m_c ul li a{background:url(../images/is.png?cdnversion=20131219) no-repeat;height:auto!important}#bdshare_l,#bdshare_m{-webkit-box-shadow:0 0 7px #eee;-moz-box-shadow:0 0 7px #eee;z-index:99999}#bdshare_pop{width:300px;border:6px solid #8f8f8f;padding:0;background:#f6f6f6;position:absolute;z-index:1000000;text-align:left}#bdshare_pop{-webkit-border-radius:5px;-moz-border-radius:5px}#bdshare_pop{-webkit-box-shadow:0 0 7px #aaa;-moz-box-shadow:0 0 7px #aaa}#bdshare_pop div{border:1px solid #e9e9e9;float:left;overflow:hidden;text-align:left}#bdshare_pop h5{width:100%;height:28px;color:#626262;font:14px/28px '宋体';font-weight:700;text-indent:.5em;float:left;margin:0;overflow:hidden}#bdshare_pop h5 b{width:22px;height:23px;background:url(../images/pop_c.gif?cdnversion=20120720) no-repeat 0 0;cursor:pointer;position:absolute;right:8px;top:4px}#bdshare_pop ul{width:100%;height:256px;background:#fff;float:left;padding:8px 0;margin:0;border-top:1px solid #f2f1f1;border-bottom:1px solid #f2f1f1;overflow:auto;overflow-x:hidden}#bdshare_pop ul li{width:130px;float:left;padding:2px;margin-left:6px;_margin-left:3px;height:29px;overflow:hidden}#bdshare_pop ul li a{background:url(../images/is.png?cdnversion=20131219) no-repeat;color:#565656;font:12px '宋体';display:block;width:75%;padding:6px 0 6px 28px;border:1px solid #fff}#bdshare_pop ul li a:hover{background-color:#f3f3f3;border:1px solid #eee;-webkit-border-radius:3px;-moz-border-radius:3px}#bdshare_pop p{width:100%;font:12px '宋体';float:left;padding:5px 0 8px;margin:0;overflow:hidden}#bdshare_pop p a{width:auto;text-align:right;float:right;padding:0 5px}#bdshare_l_c p a.goWebsite,#bdshare_m_c p a.goWebsite,#bdshare_pop p a.goWebsite{text-align:right;background:url(../images/pi.gif?cdnversion=20120720) no-repeat 0 center;line-height:16px;padding-left:12px;color:#8c8c8c}#bdshare_l_c p a.goWebsite:hover,#bdshare_m_c p a.goWebsite:hover,#bdshare_pop p a.goWebsite:hover{color:#00a9e0}span.bds_more{background:url(../images/is.png?cdnversion=20131219) no-repeat 0 5px!important}span.bds_more,.bds_tools a{display:block;font-family:'宋体',Arial;height:16px;float:left;cursor:pointer;padding-top:6px;padding-bottom:3px;padding-left:22px}.bds_tools a{background:url(../images/is.png?cdnversion=20131219) no-repeat}.bds_tools_32 a{background:url(../images/is_32.png?cdnversion=20131219) no-repeat;width:37px;height:37px;display:block;float:left;margin-right:3px;text-indent:-100em;cursor:pointer}.bds_tools_32 span.bds_more{background:url(../images/is_32.png?cdnversion=20131219) no-repeat 0 5px!important;width:37px;height:32px;text-indent:-100em;padding-left:0}.bds_tools_24 a{background:url(../images/is_24.png?cdnversion=20131219) no-repeat;width:29px;height:29px;display:block;float:left;margin-right:3px text-indent:-100em;padding-left:0;cursor:pointer}.bds_tools_24 span.bds_more{background:url(../images/is_24.png?cdnversion=20131219) no-repeat 0 5px!important;width:29px;height:24px;text-indent:-100em;padding-left:0}.bds_more{background-image:url(../images/is.png?cdnversion=20131219)!important;background-position:0 4px!important}span.bds_nopic,.bds_tools_32 span.bds_nopic,.bds_tools_24 span.bds_nopic{background-image:none!important;padding-left:3px!important}.bdshare_b img{float:left}.bdshare_b a.shareCount,.bds_tools a.shareCount,.bds_tools_32 a.shareCount,.bds_tools_24 a.shareCount{float:left;background:url(../images/sc.png?cdnversion=20120720) no-repeat!important;margin:0;padding:0;text-align:center;padding-left:5px;color:#454545;font-family:'宋体'!important}.bdshare_b a.shareCount,.bds_tools_24 a.shareCount{width:39px;height:24px;background-position:0 0;font-size:12px;line-height:24px;margin-left:3px}.bdshare_b a.shareCount:hover,.bds_tools_24 a.shareCount:hover{color:#454545!important;background-position:-44px 0!important;opacity:1!important;filter:alpha(opacity=100)!important}.bds_tools a.shareCount{width:37px;height:16px;background-position:0 -30px!important;margin-top:5px;overflow:hidden;font-size:12px;line-height:16px}.bds_tools a.shareCount:hover{color:#454545!important;background-position:-42px -30px!important;opacity:1!important;filter:alpha(opacity=100)!important}.bds_tools_32 a.shareCount{width:43px;height:32px;background-position:0 -60px!important;margin-top:5px;overflow:hidden;font-size:14px;line-height:32px;text-indent:0!important}.bds_tools_32 a.shareCount:hover{color:#454545!important;background-position:-48px -60px!important;background-position:-48px -60px;opacity:1!important;filter:alpha(opacity=100)!important}.bds_tools_24 a.shareCount{margin-top:5px}.bds_qzone{background-position:0 -75px!important}.bds_tsina{background-position:0 -115px!important}.bds_bdhome{background-position:0 -155px!important}.bds_renren{background-position:0 -195px!important}.bds_tqq{background-position:0 -235px!important}.bds_kaixin001{background-position:0 -275px!important}.bds_tqf{background-position:0 -315px!important}.bds_hi{background-position:0 -355px!important}.bds_douban{background-position:0 -395px!important}.bds_tsohu{background-position:0 -435px!important}.bds_msn{background-position:0 -475px!important}.bds_qq{background-position:0 -515px!important}.bds_taobao{background-position:0 -555px!important}.bds_tieba{background-position:0 -595px!important}.bds_sohu{background-position:0 -675px!important}.bds_t163{background-position:0 -715px!important}.bds_qy{background-position:0 -755px!important}.bds_tfh{background-position:0 -795px!important}.bds_hx{background-position:0 -835px!important}.bds_fx{background-position:0 -875px!important}.bds_ff{background-position:0 -915px!important}.bds_xg{background-position:0 -955px!important}.bds_ty{background-position:0 -995px!important}.bds_s51{background-position:0 -1035px!important}.bds_fbook{background-position:0 -1115px!important}.bds_twi{background-position:0 -1155px!important}.bds_ms{background-position:0 -1195px!important}.bds_deli{background-position:0 -1235px!important}.bds_s139{background-position:0 -1275px!important}.bds_iguba{background-position:0 -1315px!important}.bds_linkedin{background-position:0 -1354px!important}.bds_copy{background-position:0 -1393px!important}.bds_ifeng{background-position:0 -1431px!important}.bds_tuita{background-position:0 -1470px!important}.bds_meilishuo{background-position:0 -1549px!important}.bds_mogujie{background-position:0 -1589px!important}.bds_diandian{background-position:0 -1629px!important}.bds_huaban{background-position:0 -1669px!important}.bds_leho{background-position:0 -1709px!important}.bds_wealink{background-position:0 -1749px!important}.bds_duitang{background-position:0 -1789px!important}.bds_thx{background-position:0 -1829px!important}.bds_mail{background-position:0 -1870px!important}.bds_print{background-position:0 -1910px!important}.bds_baidu{background-position:0 -1950px!important}.bds_share189{background-position:0 -1990px!important}.bds_youdao{background-position:0 -2030px!important}.bds_mshare{background-position:0 -2070px!important}.bds_mop{background-position:0 -2110px!important}.bds_yaoshi{background-position:0 -2150px!important}.bds_bdxc{background-position:0 -2190px!important}.bds_sqq{background-position:0 -2230px!important}.bds_sdo{background-position:0 -2270px!important}.bds_qingbiji{background-position:0 -2310px!important}.bds_people{background-position:0 -2350px!important}.bds_kanshou{background-position:0 -2390px!important}.bds_xinhua{background-position:0 -2430px!important}.bds_yaolan{background-position:0 -2470px!important}.bds_isohu{background-position:0 -2510px!important}.bds_bdysc{background-position:0 -2550px!important}.bds_ibaidu{background-position:0 -2590px!important}#bdshare .bds_fl5,#bdshare .bds_buzz,#bdshare .bds_zx{display:none}
JS文件:
1.logger.js
var bdShare=bdShare||{};bdShare._LogPool=bdShare._LogPool||[],bdShare.ApiPVLogger||function(e){function u(e,t){var n=[];for(var r in t){var i=typeof t[r];i!="function"&&i!="object"&&t.hasOwnProperty(r)&&n.push(e+"_"+r+"="+t[r])}return n.join("&")}function a(){var e=bdShare._LogPool||[],t={};for(var n=e.length-1;n>=0;n--){var r=e[n],i=t[r.key];i?(i.linkid=i.linkid||r.api.linkid,i.type=(i.type||0)|(r.api.type||0)):t[r.key]=r.api}e=[];for(var s in t)t.hasOwnProperty(s)&&e.push({key:s,api:t[s]});return bdShare._LogPool=e,e}function f(){var e=bdShare._LogPool||[],t=e.length;if(t>0){e=a(),t=e.length;var n=[],i="",s=null,f=[0,0,0,0,0,0,0,0];for(var l=0;l<t;l++)s=e[l],f[r[s.key]]=1,s.api.linkid&&(i=s.api.linkid,delete s.api.linkid),n.push(u(s.key,s.api));n.unshift("linkid="+i),n.unshift("apitype="+parseInt(f.reverse().join(""),2)),o(n.join("&"))}}function c(){l=!0,t.dom.ready(function(){setTimeout(function(){p(),h()},1e3)})}var t,n=t=n||{version:"1.5.2.2"};n.guid="$BAIDU$",n.$$=window[n.guid]=window[n.guid]||{global:{}},n.ajax=n.ajax||{},n.fn=n.fn||{},n.fn.blank=function(){},n.ajax.request=function(e,t){function v(){if(d.readyState==4){try{var e=d.status}catch(t){g("failure");return}g(e),e>=200&&e<300||e==304||e==1223?g("success"):g("failure"),window.setTimeout(function(){d.onreadystatechange=n.fn.blank,s&&(d=null)},0)}}function m(){if(window.ActiveXObject)try{return new ActiveXObject("Msxml2.XMLHTTP")}catch(e){try{return new ActiveXObject("Microsoft.XMLHTTP")}catch(e){}}if(window.XMLHttpRequest)return new XMLHttpRequest}function g(e){e="on"+e;var t=c[e],r=n.ajax[e];if(t){h&&clearTimeout(h);if(e!="onsuccess")t(d);else{try{d.responseText}catch(i){return t(d)}t(d,d.responseText)}}else if(r){if(e=="onsuccess")return;r(d)}}var r=t||{},i=r.data||"",s=r.async!==!1,o=r.username||"",u=r.password||"",a=(r.method||"GET").toUpperCase(),f=r.headers||{},l=r.timeout||0,c={},h,p,d;for(p in r)c[p]=r[p];f["X-Requested-With"]="XMLHttpRequest";try{d=m(),a=="GET"&&(i&&(e+=(e.indexOf("?")>=0?"&":"?")+i,i=null),r.noCache&&(e+=(e.indexOf("?")>=0?"&":"?")+"b"+ +(new Date)+"=1")),o?d.open(a,e,s,o,u):d.open(a,e,s),s&&(d.onreadystatechange=v),a=="POST"&&d.setRequestHeader("Content-Type",f["Content-Type"]||"application/x-www-form-urlencoded");for(p in f)f.hasOwnProperty(p)&&d.setRequestHeader(p,f[p]);g("beforerequest"),l&&(h=setTimeout(function(){d.onreadystatechange=n.fn.blank,d.abort(),g("timeout")},l)),d.send(i),s||v()}catch(y){g("failure")}return d},n.browser=n.browser||{},function(){var e=navigator.userAgent;n.browser.safari=/(\d+\.\d)?(?:\.\d)?\s+safari\/?(\d+\.\d+)?/i.test(e)&&!/chrome/i.test(e)?+(RegExp.$1||RegExp.$2):undefined}(),n.browser.ie=n.ie=/msie (\d+\.\d+)/i.test(navigator.userAgent)?document.documentMode||+RegExp.$1:undefined,n.browser.opera=/opera(\/| )(\d+(\.\d+)?)(.+?(version\/(\d+(\.\d+)?)))?/i.test(navigator.userAgent)?+(RegExp.$6||RegExp.$2):undefined,n.dom=n.dom||{},function(){var e=n.dom.ready=function(){function r(){if(!r.isReady){r.isReady=!0;for(var e=0,n=t.length;e<n;e++)t[e]()}}function i(){try{document.documentElement.doScroll("left")}catch(e){setTimeout(i,1);return}r()}function s(){if(e)return;e=!0;if(document.readyState==="complete")r.isReady=!0;else if(document.addEventListener)document.addEventListener("DOMContentLoaded",n,!1),window.addEventListener("load",r,!1);else if(document.attachEvent){document.attachEvent("onreadystatechange",n),window.attachEvent("onload",r);var t=!1;try{t=window.frameElement==null}catch(s){}document.documentElement.doScroll&&t&&i()}}var e=!1,t=[],n;return document.addEventListener?n=function(){document.removeEventListener("DOMContentLoaded",n,!1),r()}:document.attachEvent&&(n=function(){document.readyState==="complete"&&(document.detachEvent("onreadystatechange",n),r())}),s(),function(e){r.isReady?e():t.push(e)}}();e.isReady=!1}(),t.undope=!0;var r={cite:0,img:1,addto:2,video:3},i=window.location||document.location,s=function(){var e=[];return function(t){var n="bdsharelog__"+(new Date).getTime(),r=e[n]=new Image;r.onload=r.onerror=function(){e[n]=null},r.src=t,r=null}}(),o=function(e){var t=document.body.offsetWidth,n=document.body.offsetHeight,r=window.screen.availWidth,i=window.screen.availHeight,o=[t,n,r,i].join(","),u="http://nsclick.baidu.com/v.gif?pid=307&type=3071&sc="+o+"&desturl="+encodeURIComponent(document.referrer)+"&";s(u+e)},l=!1,h=function(){var e=+(new Date),n={spendTime:0,scrollTop:0,viewHeight:0},r=+(new Date),i=function(){var e=new Date-r;if(e>n.spendTime){var t=document.compatMode=="BackCompat"?document.body:document.documentElement;n={spendTime:e,scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,viewHeight:t.clientHeight}}r=new Date},o=function(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent("on"+t,n)},u=0,a=1e3;setInterval(function(){document.hasFocus()&&u++},a),o(window,"scroll",i),o(window,"beforeunload",function(){var r=new Date-e;if(r==0)return;i();var o=["http://nsclick.baidu.com/v.gif?pid=307","type=3075","l="+r,"t="+n.scrollTop,"s="+n.spendTime,"v="+n.viewHeight,"f="+u*a,"r="+encodeURIComponent(document.referrer),"u="+encodeURIComponent(window.location.href)].join("&");/firefox\/(\d+\.\d+)/i.test(navigator.userAgent)?t.ajax.request(o,{async:!1,timeout:300}):s(o)})},p=function(){var e=0;return function(){if(bdShare.velocity&&(!bdShare.velocity.mainJsLoaded||!bdShare.velocity.cssLoadEnd)&&e++<3)setTimeout(p,1e3);else{if(bdShare.velocity){var t=Math.max(bdShare.velocity.cssLoadEnd,bdShare.velocity.mainJsLoaded)-bdShare.velocity.start||0,n=bdShare.velocity.cssLoadEnd-bdShare.velocity.cssLoadStart||0,r=bdShare.velocity.mainJsLoaded-bdShare.velocity.start||0;bdShare._LogPool.length>0&&bdShare._LogPool.push({key:"velo",api:{load:t,cssload:n,jsLoad:r}})}f()}}}();e.ApiPVLogger={add:function(e,t){bdShare._LogPool.push({key:e,api:t})}},l||c()}(bdShare);
2.stack.js
 var logh=20;
 extraleft=new Array();
 extraleft[1]=6;
 extraleft[2]=4;
 extraleft[3]=5;
 extraleft[4]=5;
 extraright=10;
 var saw=308;
 var sah=247; 
 var stdir;
 var stwidth=new Array();
 var stmargin=new Array();
 var sttype=new Array();
 var ststart=new Array();
 var stscore=0;
 sts=0;
 stwidth[0]=260; //a ronk maga!
 ststart[0]=(stwidth[0]-270)*Math.random();
 stmargin[0]=(saw-stwidth[0])/2; //ronk margoja!
 sttype[0]=Math.floor(Math.random()*4)+1;
 var stinterval;
 var paddingtarget=0,paddingnow=0;
 var gameisover=1;
 var dnd=0;

 function firstinit() {
  document.body.addEventListener("touchmove", function(e) {
          e.preventDefault();
  }, false);

  gamesplayed=getCookie('stack_gamesplayed');
  if(gamesplayed == '') {gamesplayed=0;}
  document.getElementById('gamesplayed').innerHTML=gamesplayed;

  theirbest=getCookie('stack_bestscore');
  if(theirbest == '') {theirbest=0;}
  document.getElementById('yourbest').innerHTML=theirbest;

  imgpreload(new Array('i/dropshadow.png','i/11.png','i/12.png','i/13.png','i/21.png','i/22.png','i/23.png','i/31.png','i//32.png','i/33.png','i/41.png','i/42.png','i/43.png'));
  document.body.addEventListener("touchmove", function(e) {
          e.preventDefault();
  }, false);
 }

 function init() {
  tmp=document.createElement('div');
  tmp.style.position='absolute';
  tmp.style.cursor='pointer';
  if(typeof(tmp.ontouchstart) !== 'undefined') {
	  tmp.ontouchstart=handleclick;
  } else {
  	tmp.onmousedown=handleclick;
  	tmp.onclick = function() {return false;}
  }
  tmp.style.backgroundImage='url(i/stackthelog.png)';
tmp.style.backgroundPosition='center center';
tmp.style.backgroundRepeat='no-repeat';
  tmp.style.width='298px';
  tmp.style.height='55px';
tmp.style.padding='17px 11px 0 11px';
  tmp.style.zIndex='30';
  tmp.style.margin='243px 0 0 0';
  $('st_outerarea').appendChild(tmp);

  tmp=document.createElement('div')
  tmp.id='st_scrollarea';
  tmp.style.backgroundImage='url(i/bg1250.png)';
  tmp.style.backgroundPosition='bottom center';
  tmp.style.width='320px';
  tmp.style.height='315px';
  tmp.style.position='absolute';
  $('st_outerarea').appendChild(tmp);
  
  tmp=document.createElement('div');
  tmp.style.backgroundImage='url(i/fuhatul.png)';
  tmp.style.position='absolute';
  tmp.style.width='320px';
  tmp.style.height='87px';
  tmp.style.marginTop='228px';
  tmp.style.zIndex='10';
  $('st_scrollarea').appendChild(tmp);

  tmp=document.createElement('div');
  tmp.style.backgroundImage='url(i/fuelol.png)';
  tmp.style.position='absolute';
  tmp.style.width='311px';
  tmp.style.height='39px';
  tmp.style.marginTop='217px';
  tmp.style.zIndex='20';
  $('st_scrollarea').appendChild(tmp);

  tmp2=Math.floor(Math.random()*4)+1;

  tmp=document.createElement('div');
  tmp.id='stp_0';
  tmp.style.position='absolute';
  tmp.style.height=logh+'px';
  tmp.style.marginTop=sah-logh+'px';
  tmp.style.marginLeft=stmargin[0]-extraleft[sttype[0]]+7+'px';
  $('st_scrollarea').appendChild(tmp);
  showaronk('stp_0',sttype[0],ststart[0],stwidth[0]);
  //addshadow();
  stack_init();
 }

function stack_init() {
 if(sts>10) {
  paddingtarget=(sts-10)*(logh-4);
  if(sts > 15) {
   $('st_scrollarea').removeChild($('stp_'+(sts-16)));
   if(sts % 2 == 0 && sts>16) {   $('st_scrollarea').removeChild($('shd_'+(sts-16)));}
  }
 }

 sts++;

 stwidth[sts]=stwidth[sts-1];
 ststart[sts]=(stwidth[sts]-270)*Math.random();
 stmargin[sts]=0; stdir=Math.log(sts+1)*2; $('level').innerHTML=Math.floor(sts/10)+1;
 sttype[sts]=Math.floor(Math.random()*4)+1;
 if(Math.random()>.5) {stdir*=-1; stmargin[sts]=saw-stwidth[sts];}
 tmp=document.createElement('div');
 tmp.id='stp_'+sts;
// tmp.style.backgroundColor='#ffeb00';
// tmp.style.overflow='hidden';
 tmp.style.position='absolute';
 tmp.style.height=logh+'px';
 tmp.style.width=extraleft[sttype[sts]]+stwidth[sts]+extraright/2+'px';
 tmp.style.marginTop=sah-(sts+2)*(logh-4);
 tmp.style.marginLeft=stmargin[sts]-extraleft[sttype[sts]]+7+'px';
 $('st_scrollarea').appendChild(tmp);
 showaronk('stp_'+sts,sttype[sts],ststart[sts],stwidth[sts]);
 stinterval=setInterval('stack_dothemove()',50);
}

function stack_dothemove() {
  //if($('score').innerHTML < stscore) {
  // $('score').innerHTML=Math.floor((parseInt($('score').innerHTML)+stscore*3)/4);
  //}
  if(paddingtarget > paddingnow+1) {
   paddingnow=(paddingtarget+paddingnow)/2;
   $('st_scrollarea').style.paddingTop=paddingnow+'px';
  }
  stmargin[sts]+=stdir;
  if(stmargin[sts] < 0) {stmargin[sts]=-stmargin[sts]; stdir*=-1;}
  else if(stmargin[sts]+stwidth[sts] > saw) {stmargin[sts]=saw-stwidth[sts]-stmargin[sts]-stwidth[sts]+ saw; stdir*=-1;}
  document.getElementById('stp_'+sts).style.marginLeft=stmargin[sts]-extraleft[sttype[sts]]+7+'px';
}

function handleclick() {
 if(dnd==1) {return false;}
 dnd=1;
 clearTimeout(stinterval);
 stwo=stwidth[sts];
 hcf='';
 if(stmargin[sts] < stmargin[sts-1]) {stwidth[sts]-=stmargin[sts-1]-stmargin[sts]; stmargin[sts]=stmargin[sts-1]; hcf='left';}
 if(stmargin[sts]+stwidth[sts] > stmargin[sts-1]+stwidth[sts-1]) {stwidth[sts]-= stmargin[sts]+stwidth[sts] - stmargin[sts-1]-stwidth[sts-1]; hcf='right';}
 if(stwidth[sts] <= 0) {hcf='all'}
 cutaronk('stp_'+sts,sttype[sts],ststart[sts],stwidth[sts],hcf);
 if(stwidth[sts] <= 0) {stwidth[sts]=0;}
 if(sts % 2 == 0 && stwidth[sts] > 0) {
  addshadow();
 }
 bon=Math.floor(stwidth[sts]/10*Math.log(sts+1));
 if(Math.abs(stwidth[sts] - stwidth[sts-1])<3 && stwidth[sts]>0) {
  bon*=2;
  $('combo').innerHTML=parseInt($('combo').innerHTML)+1;
  tmp=document.createElement('div');
  tmp.innerHTML='<div style="padding:5px"><b>漂亮 完美!</b></div>';
  tmp.id='box_perfect';
  tmp.style.zIndex='10';
  tmp.style.position='absolute';
  tmp.style.textAlign='center';
  tmp.style.width='150px';
  tmp.style.backgroundColor='#333333';
  tmp.style.marginLeft='85px';
  tmp3=(sah-(sts+2)*(logh-4)-16);
  tmp.style.marginTop=tmp3+'px';
  $('st_scrollarea').appendChild(tmp);
  tmp2=new Array();
  tmp2[0]="";
  tmp2[1]="$('score_title').style.color='#ffffff'; $('box_perfect').style.marginTop='"+(tmp3-5)+"px';";
  tmp2[2]="$('box_perfect').style.marginTop='"+(tmp3-10)+"px';";
  tmp2[3]="$('box_perfect').style.marginTop='"+(tmp3-15)+"px';";
  tmp2[4]="$('st_scrollarea').removeChild($('box_perfect')); $('score_title').style.color=''";
  ttt=Math.random();
  stispace[ttt]=tmp2;
  setTI(ttt,50);
 }
 stscore+=bon;
 $('score').innerHTML=stscore;
 if(stscore>theirbest) {$('score').style.color='#ff0000';}
}

function addshadow() {
  tmp=document.createElement('img');
  tmp.src='i/dropshadow.png';
  tmp.id='shd_'+sts;
  tmp.style.zIndex='15';
  tmp.style.position='absolute';
  tmp.style.width=(extraleft[sttype[sts]]+stwidth[sts]+extraright/2)+'px';
  tmp.style.height='30px';
  tmp.style.marginLeft=(stmargin[sts]-extraleft[sttype[sts]]+7)+'px';
  tmp.style.marginTop=(sah-(sts+1)*(logh-4)-1)+'px';
  $('st_scrollarea').appendChild(tmp);
}

function cutaronk(crid,crtype,crstart,crstays,crfrom) {
 //srfrom: left: bal oldalrol vag le, right: jobb oldalrol vag le
 croriw=parseInt(document.getElementById(crid).getElementsByTagName('div')[0].getElementsByTagName('div')[0].style.width);
 if(crfrom == 'right') {
  document.getElementById(crid).getElementsByTagName('div')[0].getElementsByTagName('div')[0].style.width=crstays+'px';
  document.getElementById(crid).getElementsByTagName('div')[0].getElementsByTagName('img')[0].style.marginLeft=extraleft[crtype]+crstays-extraright/2+'px';
  showaronk(crid,crtype,crstart-crstays,croriw-crstays);
  document.getElementById(crid).childNodes[1].style.marginLeft=crstays+'px';
  document.getElementById(crid).childNodes[1].style.zIndex='12';
 } else if(crfrom == 'left'){
  document.getElementById(crid).getElementsByTagName('div')[0].getElementsByTagName('div')[0].style.width=crstays+'px';
  document.getElementById(crid).getElementsByTagName('div')[0].getElementsByTagName('div')[0].style.marginLeft=extraleft[crtype]+croriw-crstays+1+'px';
  document.getElementById(crid).getElementsByTagName('div')[0].getElementsByTagName('div')[0].style.backgroundPosition=crstart+crstays-croriw+'px';
  document.getElementById(crid).getElementsByTagName('div')[0].getElementsByTagName('img')[1].style.marginLeft=croriw-crstays+'px';
  showaronk(crid,crtype,crstart,croriw-crstays);
  document.getElementById(crid).childNodes[1].style.zIndex=(sts % 2 == 1)?(14):(16);
 }

 if(crfrom !='') {
  tmp=new Array();
  if(crfrom == 'left' || crfrom == 'right') {
   tmp[0]="$('"+crid+"').style.marginTop='"+(sah-(sts+1)*(logh-4))+"px';document.getElementById('"+crid+"').childNodes[1].style.marginTop='2px';  document.getElementById('"+crid+"').childNodes[0].style.zIndex="+((sts % 2)?(13):(16))+";";
   tmp[1]="$('"+crid+"').childNodes[1].style.opacity='.75'; $('"+crid+"').childNodes[1].style.marginTop='7px';";
   tmp[2]="$('"+crid+"').childNodes[1].style.opacity='.5';$('"+crid+"').childNodes[1].style.marginTop='12px';";
   tmp[3]="$('"+crid+"').childNodes[1].style.opacity='.25';$('"+crid+"').childNodes[1].style.marginTop='17px';";
   tmp[4]="$('"+crid+"').removeChild(document.getElementById('"+crid+"').childNodes[1]);"
  } else if(crfrom =='all') {
   tmp[0]="$('"+crid+"').childNodes[0].style.marginTop='2px';";
   tmp[1]="$('"+crid+"').childNodes[0].style.opacity='.75'; $('"+crid+"').childNodes[0].style.marginTop='7px';";
   tmp[2]="$('"+crid+"').childNodes[0].style.opacity='.5'; $('"+crid+"').childNodes[0].style.marginTop='12px';";
   tmp[3]="$('"+crid+"').childNodes[0].style.opacity='.25'; $('"+crid+"').childNodes[0].style.marginTop='17px';";
   tmp[4]="$('"+crid+"').removeChild(document.getElementById('"+crid+"').childNodes[0]);"
  }
  if(stwidth[sts] >0) { tmp[4]+="stack_init(); dnd=0;"; } else { tmp[4]+='gameover();' }
  ttt=Math.random();
  stispace[ttt]=tmp;
  setTI(ttt,50);
 } else {
  document.getElementById(crid).style.marginTop=(sah-(sts+1)*(logh-4))+'px';  document.getElementById(crid).childNodes[0].style.zIndex=((sts % 2)?(13):(16));
  stack_init();
 }
}

function showaronk(srid,srtype,srstart,srsize) {
 srt='i/'+srtype
 tmp=document.createElement('div');
 tmp.style.position='absolute';
 tmp.style.width=extraleft[srtype]+srsize+extraright/2+'px';
 tmp.style.height=logh+'px';
 tmp.style.zIndex=15;

 tmp2=document.createElement('div');
 tmp2.style.position='absolute';
 tmp2.style.width=srsize+'px';
 tmp2.style.height=logh+'px';
 tmp2.style.marginLeft=extraleft[srtype]+'px';
 tmp2.style.backgroundImage='url('+srt+'2.png)';
 tmp2.style.backgroundPosition=srstart+'px 0';
 tmp.appendChild(tmp2);

 tmp2=document.createElement('img');
 tmp2.src=srt+'3.png';
 tmp2.style.marginLeft=extraleft[srtype]+srsize-extraright/2;
 tmp2.style.position='absolute';
 tmp.appendChild(tmp2);

 tmp2=document.createElement('img');
 tmp2.src=srt+'1.png';
 tmp2.style.position='absolute';
 tmp.appendChild(tmp2);

 $(srid).appendChild(tmp);
}

function gameover() {
 gameisover=1;
 gamesplayed++;
 setCookie('stack_gamesplayed',gamesplayed);
 document.getElementById('gamesplayed').innerHTML=gamesplayed;
 if(stscore>theirbest) {
  setCookie('stack_bestscore',stscore);
  document.getElementById('yourbest').innerHTML=stscore;
  theirbest=stscore;
  ialert('<h1>游戏结束: '+stscore+'分</h1>厉害,你又破纪录了','restartgame();');
 } else {
  ialert('<h1>游戏结束: '+stscore+'</h1>再来一次?','restartgame();');
 }
 //urchinTracker('/stack/gamesplayed/');
 return false;
}

function restartgame() {
 clearInterval(stinterval);
 gameisover=0;
 stwidth=new Array();
 stmargin=new Array();
 sttype=new Array();
 ststart=new Array();
 stscore=0;
 sts=0;
 stwidth[0]=260; //a ronk maga!
 ststart[0]=(stwidth[0]-270)*Math.random();
 stmargin[0]=(saw-stwidth[0])/2; //ronk margoja!
 sttype[0]=Math.floor(Math.random()*4)+1;
 paddingtarget=0,paddingnow=0;
 dnd=0;
 $('combo').innerHTML=0;
 $('level').innerHTML=1;
 $('score').innerHTML=stscore;
 $('score').style.color='#ffffff';
 $('st_outerarea').innerHTML='';
 init();
}

function pausegame() {
 clearTimeout(stinterval);
}

function resumegame() {
 if(gameisover == 0) {
  stinterval=setInterval('stack_dothemove()',50);
 }
}

var tit="0";
tit=stscore;
var tite="";
	var DFW = {
		appId: "",
		TLImg: "http://g.huceo.com/weixin/duimutou/i/icon.png",
		url: "http://g.huceo.com/weixin/duimutou/",
		title: "堆木头,简单的不得了,好玩的停不下",
		desc: "玩法简单,但是玩的是技巧,反应,没有最高只有更高,来挑战下"
	};
	var onBridgeReady = function(){
		WeixinJSBridge.on('menu:share:appmessage', function(argv){
			if(tit>500){tite=DFW.title + " 我的分数是"+tit+"分,求超越!";}else{tite=DFW.title;};
			WeixinJSBridge.invoke('sendAppMessage', {
				"appid": DFW.appId,
				"img_url": DFW.TLImg,
				"img_width": "120",
				"img_height": "120",
				"link": DFW.url ,
				"title": tite ,
				"desc": DFW.desc 
			});
		});
		WeixinJSBridge.on('menu:share:timeline', function(argv){
			if(tit>500){tite=DFW.title + " 我的分数是"+tit+"分,求超越!";}else{tite=DFW.title;};
			WeixinJSBridge.invoke('shareTimeline', {
				"appid": DFW.appId,
				"img_url":DFW.TLImg,
				"img_width": "120",
				"img_height": "120",
				"link": DFW.url ,
				"title": tite ,
				"desc": DFW.desc
			});
		});
	};
	if(document.addEventListener){
		document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
	}else if(document.attachEvent){
		document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
		document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
	}
3.standard.js
 var ibox_active='game';
 var ibox_cur=0;
 var ibox_targets=Array();
 var ibox_scroll_timer;
 ibox_targets['game']=0;
 ibox_targets['highscore']=-320;
 ibox_targets['about']=-640;
 var now = new Date();
 var expire = new Date();
 expire.setTime(now.getTime() + 1000*60*60*24*90);
 var stispace=new Array();
 var myims;
 var gamesplayed;
 var theirbest;

 function imgpreload(ims) {
  myims=new Array();
  ims.push('./i/b_yes.png');
  ims.push('./i/b_no.png');
  ims.push('./i/b_okay.png');
  for(i in ims) {
   myims[i]=new Image();
   myims[i].src=ims[i];
  }
 }

  function menuswitch(obj) {
   var whereto=obj.href.split('#')[1];
   if(whereto=='game' && ibox_active == 'game') {pausegame();iconfirm('<h1>新游戏</h1>确定要<br />重新开始游戏吗?','restartgame();'); return false;}
   if(ibox_active == 'game' && whereto!='game') {pausegame();}
   mse='';
   if(ibox_active != 'game' && whereto=='game') {mse='resumegame();';}

   tmp=new Array('game','highscore','about'); 
   tmp2=new Array();
   tmp2['game']=0;
   tmp2['highscore']='-72px';
   tmp2['about']='-182px';
   for(i in tmp) {
    document.getElementById('button_'+tmp[i]).style.backgroundPosition=tmp2[tmp[i]]+' '+((tmp[i]==whereto)?(0):('-41px'));
   }
   
   if(whereto == ibox_active) {return false;} else {ibox_start=ibox_targets[ibox_active]; ibox_active=whereto; }
   for(i in ibox_targets) {
    document.getElementById('button_'+i).className=(i==whereto)?('active'):('');
   }
   obj.className='active';
   tmp2=new Array();
   tmp=ibox_start;
   for(i=0;i<=5;i++) {
    tmp=(tmp+ibox_targets[whereto])/2;
    tmp2.push('document.getElementById(\'container_scroller\').style.marginLeft=\''+tmp+'px\';');
   }
   tmp2.push('document.getElementById(\'container_scroller\').style.marginLeft=\''+ibox_targets[whereto]+'px\';');
   if(mse!='') {tmp2.push(mse);}
   ttt=Math.random();
   stispace[ttt]=tmp2;
   setTI(ttt,50);
   return false;
  }

  function idismiss() {
   document.getElementById('alertbox').style.display='none';
   resumegame();
  }

  function ialert(iquestion,idoit) {
   document.getElementById('alertbox_content').innerHTML=iquestion+'<br style="clear:both" /><br /><a href="#" οnclick="idismiss();eval(\''+idoit+'\'); return false;" ontouchstart="idismiss();eval(\''+idoit+'\'); return false;"><img src="./i/b_okay.png" alt="确定" /></a>';
   document.getElementById('alertbox').style.display='block';
  }
    
  function iconfirm(iquestion,idoit) {
   document.getElementById('alertbox_content').innerHTML=iquestion+'<br style="clear:both" /><br /><a href="#" ontouchstart="idismiss();eval(\''+idoit+'\'); return false;" οnclick="idismiss();eval(\''+idoit+'\'); return false;"><img src="./i/b_yes.png" alt="Yes" /></a><a href="#" ontouchstart="idismiss(); return false;" οnclick="idismiss(); return false;"><img src="./i/b_no.png" alt="No" /></a>';
   document.getElementById('alertbox').style.display='block';
  }
  
 function getCookie(Name) {
  var search = Name + "="
  if (document.cookie.length > 0) {
   offset = document.cookie.indexOf(search)
   if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset)
    if (end == -1)
     end = document.cookie.length;
    return unescape(document.cookie.substring(offset, end))
   }
  }
  return('');
 }

 function setCookie(name, value) {
  document.cookie = name + "=" + escape(value) + ((expire == null) ? "" : ("; expires=" + expire.toGMTString())+';domain=lapp.xinli001.com;path=/;');
 }

function setTI(todos,interval) {
 if(stispace[todos].length == 0) {delete stispace[todos];return false;}
 eval(stispace[todos].shift());
 setTimeout('setTI('+todos+','+interval+')',interval);
}

function $(id) {
 return document.getElementById(id);
}

注意:

素材包大家根据文件自己配置就好

或者私信我发你

最后祝大家冬至节气快乐!!!

文章来源:https://blog.csdn.net/qiao_yue/article/details/135160168
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。