HTML5 heap wood game and HTML5 heap wood game

HTML5 heap wood game and HTML5 heap wood game

Today, I want to share a classic HTML5 game-heap wood game. This game is used to pile up wood and the more parts will be removed, until the next piece of wood cannot be stacked. The difficulty of this HTML5 game is that the wood to be stacked is moved, so you need to control the location where the wood falls.

Download Online Preview source code

Implementation code.

Html code:

<Div style = "width: 320px; height: 370px;"> <br/> <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 "> restart </span> </a> <a id =" button_highscore "href =" # highscore "onclick =" return menuswitch (this ); "ontouchstart =" return menuswitch (this); "> <span style =" display: none "> game rankings </span> </a> <a id =" button_about "href =" http://sc.chinaz.com/ "Ontouchstart =" return menuswitch (this); "> <span style =" display: none "> more games </span> </a> </div> <div class =" ibox "id =" container "> <div style =" width: pixel PX; "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 "> score: & nbsp; </div> <div id = "score" style = "float: left; width: 2em;"> 0 </div> <div style = "float: right "> <div style =" float: left "> combo: & nbsp; </div> <div id =" combo "style =" float: left; width: 1.5em; "> 0 </div> <div style =" text-align: center "> level: <span id = "level"> 1 </span> </div> <div style = "width: 320px; height: 316px; overflow: hidden; position: relative; "id =" st_outerarea "> </div> <div id =" ibox_highscore "class =" iboxcontent ibc2 "> 
Css code:
 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        {            width: 320px;            height: 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: 72px;            height: 41px;            background-position: 0 0;        }        #button_highscore        {            background-image: url(./i/menu.png);            display: block;            float: left;            width: 110px;            height: 41px;            background-position: -72px -41px;        }        #button_about        {            background-image: url(./i/menu.png);            display: block;            float: left;            width: 100px;            height: 41px;            background-position: -182px -41px;        }                #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;        }
Js Code:
<! -- Firstinit (); ialert ('
Via: http://www.w2bc.com/Article/15527