基于HTML5堆木头游戏
阅读：2796
时间：2018-02-01 03:26
今天要来分享一款很经典的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="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
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3
闽ICP备12017094号-3