基于HTML5堆木头游戏
2024-08-26 23:23:16
今天要来分享一款很经典的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:;
padding:;
font-size: 90%;
overflow: hidden;
width: 320px;
margin: auto;
} h1
{
margin: .4em;
}
h3
{
font-size: 120%;
margin: 12px;
padding-left:;
margin-bottom: .5em;
color: #ffffff;
}
p
{
margin:;
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:;
}
#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:;
} #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:;
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
最新文章
- 关于Cewu Lu等的《Combining Sketch and Tone for Pencil Drawing Production》一文铅笔画算法的理解和笔录。
- FTP命令
- [转]http-关于application/x-www-form-urlencoded等字符编码的解释说明
- 1616 最小集合 51NOD（辗转相处求最大公约数+STL）
- Java类的成员函数调用顺序
- Win7上防火墙开放FTP服务以及ping解决方案（zz）
- 如何运用inno在安装和卸载时提示用户结束进程？
- C#绘图双缓冲
- 关于win10安装VisualSVN遇到的一个问题及解决办法
- C++引用变量学习
- oFixed() 方法
- 整合SSH时，遇到了org.springframework.beans.factory.BeanCreationException错误
- Ubuntu系统怎么切换多用户命令界面
- A1131. Subway Map (30)
- mdf ldf添加到数据库
- Testing - 软件测试知识梳理 - 相关词汇
- Java中集合删除元素时候关于ConcurrentModificationException的迷惑点
- [UE4]GameInstance初始化
- 汇编 REPNE/REPNZ 指令，SCASB 指令
- PAT甲题题解-1121. Damn Single (25)-水题