Web front-end game project-Stacking wood game
The gameplay of "Stacking Wood" is simple. Click the button to place the wood with the mouse, and then stack them together to build various structures. The game is suitable for children of all ages. It can exercise children's hands-on ability and hand-eye coordination, and stimulate children's creativity and imagination.
running result
HTML
Source code:
<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
Source code:
@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
document:
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);
}
Notice:
You can configure the material package by yourself according to the files.
Or send me a private message
Finally, I wish everyone a happy Winter Solstice! ! !