首页 > 代码库 > 基于HTML5堆木头游戏

基于HTML5堆木头游戏

今天要来分享一款很经典的HTML5游戏——堆木头游戏,这款游戏的玩法是将木头堆积起来,多出的部分将被切除,直到下一根木头无法堆放为止。这款HTML5游戏的难点在于待堆放的木头是移动的,因此需要你很好的控制木头下落的位置。

技术分享

在线预览   源码下载

实现的代码。

html代码:

  <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">重新开始</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://sc.chinaz.com/"                    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">                                得分:&nbsp;</div>                            <div id="score" style="float: left; width: 2em;">                                0</div>                        </div>                        <div style="float: right">                            <div style="float: left">                                连击:&nbsp;</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>            </div>        </div>

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        {            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代码:

<!--            firstinit();            ialert(‘<h1>堆木头</h1><p style="margin: 0 20px 0 20px; text-align:left;"><img src="http://www.mamicode.com/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://sc.chinaz.com‘;                lineLink = ‘http://sc.chinaz.com/‘;                descContent = "创意跳高游戏,快来一起跳!";                updateShareScore(bestScore);                appid = ‘‘;            }            function updateShareScore(bestScore) {                if (bestScore > 0) {                    shareTitle = "我跳我跳我跳跳跳到" + bestScore + "米,你跳你跳你跳跳跳看!";                }                else {                    shareTitle = "我跳我跳我跳跳跳,你跳你跳你跳跳跳!";                }            }            play68_init();

via:http://www.w2bc.com/Article/15527

基于HTML5堆木头游戏