今天要来分享一款很经典的HTML5游戏——堆木头游戏，这款游戏的玩法是将木头堆积起来，多出的部分将被切除，直到下一根木头无法堆放为止。这款HTML5游戏的难点在于待堆放的木头是移动的，因此需要你很好的控制木头下落的位置。
在线预览 源码下载
实现的代码。
html代码：
[/span>div style="width: 320px; height: 370px;"
[/span>br />
[/span>div style="position: absolute; margin-top: 400px; width: 320px; heigth: 48px; background: #ffffff"
[/span>div id="alertbox"
[/span>div id="alertbox_flekk"
[/span>div id="alertbox_content"
[/span>a id="button_xwuz" onclick="return menuswitch(document.getElementById('button_about'));"
ontouchstart="return menuswitch(document.getElementById('button_about'));"
[/span>div id="imenu"
[/span>a id="button_game" href="#game" class="active" onclick="return menuswitch(this);"
ontouchstart="return menuswitch(this);"span style="display: none"
[/span>a id="button_highscore" href="#highscore" onclick="return menuswitch(this);" ontouchstart="return menuswitch(this);"
[/span>span style="display: none"a id="button_about" href=""
ontouchstart="return menuswitch(this);"span style="display: none"
[/span>div class="ibox" id="container"
[/span>div style="width: 10000px;" id="container_scroller"
[/span>div id="ibox_game" class="iboxcontent ibc1" style="position: relative;"
[/span>div style="width: 237px; height: 15px; overflow: hidden; margin-left: 13px; padding-top: 10px;
font-size: 90%; position: absolute; z-index: 20;"
[/span>div style="float: left"
[/span>div style="float: left" id="score_title"
得分:
[/span>div id="score" style="float: left; width: 2em;"
0
[/span>div style="float: right"
[/span>div style="float: left"
连击:
[/span>div id="combo" style="float: left; width: 1.5em;"
0
[/span>div style="text-align: center"
等级: [/span>span id="level"
[/span>div style="width: 320px; height: 316px; overflow: hidden; position: relative;" id="st_outerarea"
[/span>div id="ibox_highscore" class="iboxcontent ibc2"
[/span>h3
您目前的最高分是...
[/span>div id="yourbest"
[/span>p
一般人努力点可以达到[/span>span class="fontostext"span class="fontostext"
分. 你可以分享给好友挑战下
[/span>p
你已经玩了 [/span>span id="gamesplayed" class="fontostext"span class="fontostext"
堆木头
[/span>p
点击右上角分享分数到朋友圈
css代码：
body
{
font-family: helvetica, arial;
background-color: #000000;
color: #a3b3c3;
border: 0;
padding: 0;
font-size: 90%;
overflow: hidden;
Width＜/span>: 320px;
margin: auto;
}
h1
{
margin: .4em;
}
h3
{
font-size: 120%;
margin: 12px;
padding-left: 0;
//代码效果参考：http://www.zidongmutanji.com/bxxx/487500.html
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＜/span>: 320px;
Height＜/span>: 315px;
overflow: hidden;
background-color: #000000;
margin: auto;
}
.iboxcontent
{
Width＜/span>: 320px;
Height＜/span>: 315px;
float: left;
overflow: hidden;
}
.ibc1
//代码效果参考：http://www.zidongmutanji.com/zsjx/142761.html
{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＜/span>: 320px;
Height＜/span>: 356px;
background-color: #000000;
opacity: .8;
}
#alertbox_content
{
position: absolute;
Width＜/span>: 320px;
Height＜/span>: 286px;
//代码效果参考：http://www.zidongmutanji.com/zsjx/343297.html
margin-top: 70px;text-align: center;
color: #ffffff;
}
#alertbox_content .fontostext
{
color: #a3b3c3;
}
#alertbox a
{
margin: 10px;
Width＜/span>: 114px;
Height＜/span>: 54px;
}
img
{
border: 0;
}
#imenu
{
Width＜/span>: 320px;
Height＜/span>: 41px;
margin: auto;
text-align: center;
background-image: url(./i/menu.png);
background-position: 0 0px;
}
#imenu a:hover
{
opacity: .5;
}
#button_game
{
background-image: url(./i/menu.png);
display: block;
float: left;
Width＜/span>: 72px;
Height＜/span>: 41px;
background-position: 0 0;
}
#button_highscore
{
background-image: url(./i/menu.png);
display: block;
float: left;
Width＜/span>: 110px;
Height＜/span>: 41px;
background-position: -72px -41px;
}
#button_about
{
background-image: url(./i/menu.png);
display: block;
float: left;
Width＜/span>: 100px;
Height＜/span>: 41px;
background-position: -182px -41px;
}
#score, #combo, #level
{
color: #ffffff;
}
#button_xwuz
{
position: absolute;
display: block;
Width＜/span>: 48px;
Height＜/span>: 57px;
margin: 5px 0 0 267px;
background-image: url(./i/xwuz.png);
z-index: 1;<
