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">得分: </div><div id="score" style="float:left; width:2em;">0</div></div>
<div style="float:right"><div style="float:left">连击: </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&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);
}
注意：
素材包大家根据文件自己配置就好
或者私信我发你
最后祝大家冬至节气快乐！！！