基于HTML5堆木头游戏

浏览数：25 / 时间：2015年06月09日

今天要来分享一款很经典的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="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();