HTML小游戏推箱子网页版(附完整源码)
Posted 橙子!
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML小游戏推箱子网页版(附完整源码)相关的知识，希望对你有一定的参考价值。
最近刚刚更新完了html，CSS的万字总结，有很多人已经学习完了文章，感觉反馈还不错，今天，用HTML，CSS，JS的知识编写了一个童年经典游戏 - 推箱子，供学习参考。
文章目录
1. 效果展示
游戏主界面展示：
游戏界面展示：
2. 游戏介绍
经典的推箱子是一个非常古老游戏，甚至是80，90年代的回忆，目的是在训练你的逻辑思考能力。
在一个狭小的仓库中，要求把木箱放到指定的位置，稍不小心就会出现箱子无法移动或者通道被堵住的情况，所以需要巧妙的利用有限的空间和通道，合理安排移动的次序和位置，才能顺利的完成任务。
在移动箱子的过程中，是对你的思维能力的一个训练，今天这款推箱子正是童年的回忆，但是我们的目的是为了通过学习源码的形式，来学习前端开发的知识，熟练掌握HtML标签，CSS属性和JS逻辑的知识。
这是一款最经典的推箱子游戏，类似的游戏你一定早就玩过。要控制搬运工上下左右移动，来将箱子推到指定地点。记得几年前，《推箱子》在PC机上刮起了一股不小的益智类游戏的旋风，现在许多资深玩家也都对《推箱子》赞不绝口，可见有深度的益智类游戏是非常受大家欢迎的。
推箱子游戏1981年由日本人今林宏行首创，是在1982年12月由Thinking Rabbit 公司首次发行，名“仓库番”。箱子只可以推, 不可以拉, 而且一次只能推动一个，胜利条件就是把所有的箱子都推到目的地。
推箱子游戏是一种老少皆宜的益智游戏，既可以开发青少年学生的智力，又可以防止老年痴呆症，全家一起攻关还可以促进家庭和睦，何乐而不为？
3. 游戏规则
我们的目标是把箱子移动到指定的地点，该地点标注为空，当我们顺利的把箱子移动的指定的位置时，标注为满。请你尽量不要把箱子推动到角落，那样，你将无法移动它。例如：
我们可以选择不同的关卡进行闯关，大家在学习的过程中也可以添加不同的关卡，这样达到熟练掌握常用标签和属性的目的。例如：
同时，当我们在游戏卡关的时候，还可以选择重新开始游戏，这样的设计非常的人性化：
4. 源码学习
博客中用到的图片和源码已经免费上传，欢迎下载学习：
部分HTML代码：
设置游戏页面布局，游戏中按钮及位置…
<div class="menu" onclick="newgame()">开始新游戏</div>
<div class="menu" onclick="continuegame()">继续游戏</div>
<div class="menu" onclick="select()">选关</div>
<div class="menu" onclick="closewindow()">退出游戏</div>
<table id="g">
<tr>
<td>
<div class="choice" onclick=start(0)>1</div>
</td>
<td>
<div class="choice" onclick=start(1)>2</div>
</td>
<td>
<div class="choice" onclick=start(2)>3</div>
</td>
</tr>
</table>
<div class="win" id="notlast" onclick=next(progress)>下一关</div>
<div class="win" onclick=returnselect()>选择关卡</div>
<div class="win" onclick=back()>返回</div>
<div class="side" id="side1" onclick=continuegame()>重试</div>
<div class="side" id="side2" onclick=leave()>返回</div>
部分样式代码：
设置按钮的样式，页面的样式…
<style>
*
margin: 0;
padding: 0;
body
background-image: url(./pic.jpg);
background-size: 100%;
color: whitesmoke;
text-align: center;
h1
font:normal bold 100px 楷体;
-webkit-font-smoothing: antialiased;
padding:50px;
table,
.menu,
.choice,
.win
margin: 0 auto;
div
width: 180px;
td div
width: 75px;
height: 75px;
margin: 5px;
border-radius: 5px;
font-size: 60px;
line-height: 75px;
display: none;
.menu,
.win
position: relative;
background-color: #6781e0;
width: 360px;
height: 80px;
margin-bottom: 40px;
line-height: 74px;
font-size: 50px;
font-family: "WDKT";
box-shadow:
1px 1px 0px #5d77dd,
2px 2px 0px #5f79de,
3px 3px 0px #617bdf,
4px 4px 0px #637de0;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
border-radius: 40px;
.side
position: relative;
background-color: #6781e0;
width: 240px;
height: 80px;
margin-bottom: 40px;
line-height: 74px;
font-size: 50px;
font-family: "WDKT";
box-shadow:
1px 1px 0px #5d77dd,
2px 2px 0px #5f79de,
3px 3px 0px #617bdf,
4px 4px 0px #637de0;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
border-radius: 40px;
.choice
background-color: #6781e0;
width: 80px;
height: 80px;
margin: 10px;
line-height: 74px;
font-size: 60px;
font-family: "包图小白体";
box-shadow:
1px 1px 0px #5d77dd,
2px 2px 0px #5f79de,
3px 3px 0px #617bdf,
4px 4px 0px #637de0;
border-radius: 5px;
.menu:hover
transform: translateX(1px) translateY(3px);
.choice:hover
transform: translateX(1px) translateY(3px);
.win:hover
transform: translateX(1px) translateY(3px);
.side:hover
transform: translateX(1px) translateY(3px);
#g
margin-left: 400px;
display: none;
.win,
.side
display: none;
#side1
position: absolute;
right: 150px;
top: 200px;
#side2
position: absolute;
right: 150px;
top: 600px;
</style>
部分逻辑代码：
游戏整体的逻辑实现部分：
function up()
if (copy[py - 1][px] == 0 || copy[py - 1][px] == 3)
if (copy[py][px] == 4)
document.getElementById(names[py][px]).innerHTML = "";
copy[py][px] = 0;
else if (copy[py][px] == 6)
document.getElementById(names[py][px]).innerHTML = "🈳";
copy[py][px] = 3;
if (copy[py - 1][px] == 3)
document.getElementById(names[py - 1][px]).innerHTML = "🏃";
copy[py - 1][px] = 6;
else if (copy[py - 1][px] == 0)
document.getElementById(names[py - 1][px]).innerHTML = "🏃";
copy[py - 1][px] = 4;
py--;
else if ((copy[py - 1][px] == 2 || copy[py - 1][px] == 5) && (copy[py - 2][px] == 0 || copy[py - 2][px] == 3))
if (copy[py][px] == 4)
document.getElementById(names[py][px]).innerHTML = "";
copy[py][px] = 0;
else if (copy[py][px] == 6)
document.getElementById(names[py][px]).innerHTML = "🈳";
copy[py][px] = 3;
if (copy[py - 1][px] == 2)
document.getElementById(names[py - 1][px]).innerHTML = "🏃";
copy[py - 1][px] = 4;
else if (copy[py - 1][px] == 5)
document.getElementById(names[py - 1][px]).innerHTML = "🏃";
copy[py - 1][px] = 6;
if (copy[py - 2][px] == 0)
document.getElementById(names[py - 2][px]).innerHTML = "📦";
copy[py - 2][px] = 2;
else if (copy[py - 2][px] == 3)
document.getElementById(names[py - 2][px]).innerHTML = "🈵";
copy[py - 2][px] = 5;
py--;
function down()
if (copy[py + 1][px] == 0 || copy[py + 1][px] == 3)
if (copy[py][px] == 4)
document.getElementById(names[py][px]).innerHTML = "";
copy[py][px] = 0;
else if (copy[py][px] == 6)
document.getElementById(names[py][px]).innerHTML = "🈳";
copy[py][px] = 3;
if (copy[py + 1][px] == 3)
document.getElementById(names[py + 1][px]).innerHTML = "🏃";
copy[py + 1][px] = 6;
else if (copy[py + 1][px] == 0)
document.getElementById(names[py + 1][px]).innerHTML = "🏃";
copy[py + 1][px] = 4;
py++;
else if ((copy[py + 1][px] == 2 || copy[py + 1][px] == 5) && (copy[py + 2][px] == 0 || copy[py + 2][px] == 3))
if (copy[py][px] == 4)
document.getElementById(names[py][px]).innerHTML = "";
copy[py][px] = 0;
else if (copy[py][px] == 6)
document.getElementById(names[py][px]).innerHTML = "🈳";
copy[py][px] = 3;
if (copy[py + 1][px] == 2)
document.getElementById(names[py + 1][px]).innerHTML = "🏃";
copy[py + 1][px] = 4;
else if (copy[py + 1][px] == 5)
document.getElementById(names[py + 1][px]).innerHTML = "🏃";
copy以上是关于HTML小游戏推箱子网页版(附完整源码)的主要内容，如果未能解决你的问题，请参考以下文章
HTML小游戏19 —— html5版开心斗地主小游戏（附完整源码）