HTML+JS实现经典推箱子游戏
更新时间：2022年11月10日 09:13:50 作者：橙子!
今天，这篇文章将利用HTML，CSS，JS的知识编写一个童年经典游戏 - 推箱子，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
1. 效果展示
2. 游戏介绍
经典的推箱子是一个非常古老游戏，甚至是80，90年代的回忆，目的是在训练你的逻辑思考能力。
在一个狭小的仓库中，要求把木箱放到指定的位置，稍不小心就会出现箱子无法移动或者通道被堵住的情况，所以需要巧妙的利用有限的空间和通道，合理安排移动的次序和位置，才能顺利的完成任务。
在移动箱子的过程中，是对你的思维能力的一个训练，今天这款推箱子正是童年的回忆，但是我们的目的是为了通过学习源码的形式，来学习前端开发的知识，熟练掌握HtML标签，CSS属性和JS逻辑的知识。
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[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++;
}
}
以上就是HTML+JS实现经典推箱子游戏的详细内容，更多关于JS推箱子游戏的资料请关注脚本之家其它相关文章！
相关文章
利用BootStrap的Carousel.js实现轮播图动画效果
这篇文章主要介绍了利用BootStrap的Carousel.js实现轮播图动画效果的相关资料,需要的朋友可以参考下2016-12-12
本文主要介绍了javascript常用的设计模式:单例模式;工厂模式;适配模式;外观模式。下面跟着小编一起来看下吧2017-02-02
JavaScript监听文本框回车事件并过滤文本框空格的方法
这篇文章主要介绍了JavaScript监听文本框回车事件并过滤文本框空格的方法,涉及javascript操作文本框获取、清空及删除空格的技巧,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JS监听事件的叠加和移除功能，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-11-11
js中的继承与其说是对象的继承,但更像是让函数的功能和用法的复用,下面这篇文章主要给大家介绍了关于js中常见的6种继承方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了JS获取动态添加元素的方法,结合实例形式分析了js动态添加DOM元素及获取已添加的DOM元素相关操作技巧,需要的朋友可以参考下2019-07-07
低代码作为开发工具类的产品，需要有从0到1体系化的教程才可以，而且还得有教师进行辅助。否则，学习低代码是有难度的，入门很难。因为大家习惯了用代码编程，一下子过度到可视化编程，有一个思路上的转变2022-08-08
这篇文章主要给大家介绍了关于在Typescript中如何使用for...in的相关资料,以及TypeScript中使用for...in遍历对象属性会报错的解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
在每年的10月24日,我们都会庆祝程序员节,这是一个向所有辛勤工作、创造出无数令人惊叹应用和系统的程序员们致敬的日子,为了纪念这个特殊的日子,我们将通过编写一个简单的1024小游戏来向所有程序员们表示敬意,本文将详细解释如何使用JavaScript编写这个小游戏2023-10-10
这篇文章主要介绍了Javascript 鼠标移动上去 滑块跟随效果代码，有需要的朋友可以参考一下2013-11-11
最新评论