本文主要是介绍web前端游戏项目-堆木头游戏【附源码】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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 lecroriw=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/'+srtypetmp=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.lengthend = 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);
}
注意：
素材包大家根据文件自己配置就好
或者私信我发你
最后祝大家冬至节气快乐！！！
这篇关于web前端游戏项目-堆木头游戏【附源码】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
