首页 > 代码库 > 基于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"> 得分: </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> </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堆木头游戏
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。