【HTML小游戏】推箱子网页版(附完整源码)

已于 2023-06-17 13:46:19 修改
阅读量1.2w 收藏 103
点赞数 117
分类专栏： 前端 编程进阶之路 Java编程基础教程系列（零基础小白搬砖逆袭） 文章标签： 前端 html css javascript
于 2022-11-09 17:02:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangxia_/article/details/127772414
版权

在这里插入图片描述

最近刚刚更新完了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[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++;
        }
    }
橙 子_
关注
  • 117
    点赞
  • 踩
  • 103
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 123
    评论
专栏目录
订阅专栏
HTML用Vue制作简易推箱子（带墙壁）网页
weixin_51960885的博客
05-24 365
4.编写script代码，用vue实现推箱子网页效果。1.首先创建项目并为项目添加vue组件。3.为主体代码设置样式,设置图片背景。
分享24个网页游戏源代码，总有一个是你想要的
adendean的博客
02-03 8074
网页
10几个纯静态HTML小游戏，适配移动端PC端
01-22
10几个纯静态小游戏，保证可用，无需任何环境。点击index.html就可以运行，适配移动端PC端
推箱子小游戏（网页版）
04-21
基于js和html的推箱子游戏，相信大家可以从中学到许多。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
HTML小游戏
最新发布
2301_80467305的博客
02-04 204
【代码】HTML小游戏。
html实现扫雷小游戏
11-16
html实现扫雷小游戏源码，实现windows系统的扫雷的基本功能，直接点击index.html运行。具体效果展示地址：https://blog.csdn.net/weixin_43151418/article/details/127886480
html+css+js实现简单的推箱子小游戏
qq_49507936的博客
02-22 3280
html+css+js实现简单的推箱子小游戏
html实现经典打方块小游戏
xcLeigh
05-09 1713
html实现经典打方块小游戏源码，通过控制鼠标移动方块，单击发出子弹， 它可以连发子弹，敌方方块被打碎后会分裂为多个小方块。整个游戏非常流畅，性能非常好。 总共三次机会，当碰到别的方块失去一次机会，有历史总积分和当前分数。
使用Vue制作推箱子网页
m0_69172645的博客
05-25 402
四，Vue代码，用if判断语句来设置上下左右边界和墙壁的上下左右边界，通过判断使箱子移动，最后给整个页面添加事件监听。一，首先创建一个项目，并引入Vue组件。三，编写样式文件，添加背景图片。五，完整代码及效果展示。
Web上的推箱子游戏Sokoban
wbsu2004的博客
09-30 3244
Sokoban 是款具有无限撤消和近 500 个推箱子谜题的推箱子游戏。
FC小游戏合集网页版HTML源码
07-10
FC小游戏合集网页版HTML源码，上传到服务器即可访问，包含游戏文件在里面，操作键网页上有列出。
jQuery坦克大战网页小游戏
08-18
jQuery坦克大战网页小游戏 jQuery坦克大战网页小游戏基于jquery-1.4.2.min.js制作，玩法非常的简单，消灭敌对坦克，保护你的领地，防止敌方冲破你的老窝。支持单人游戏和双人游戏，有音
FC小游戏合集网页版游戏源码
08-06
FC小游戏合集网页版游戏源码
html益智游戏拼图游戏源代码.pdf
11-12
html益智游戏拼图游戏源代码 以下是一个简单的益智游戏的HTML代码示例，这个游戏名为“拼图游戏”。游戏的目标是将打乱的图片拼回原状（见附件） 在这个示例中，你需要替换 pieces 数组中的值为你自己的图片文件路径。游戏会随机打乱这些图片，然后用户需要将它们拼回原状。注意，这只是一个非常简单的示例，真实的拼图游戏可能需要更复杂的逻辑来处理用户交互和游戏得分。 我们还可以添加按钮让用户点击来随机打乱图片，还可以添加事件监听器来检测用户是否完成了拼图。 以下是对上述示例的改进，增加了打乱图片和完成拼图的逻辑： 在这个改进的示例中，我们添加了一个按钮用于打乱图片，以及一个事件监听器来检测用户是否点击了拼图块。如果用户点击了拼图块，就会检查拼图是否已经完成，如果未完成则重新打乱图片，如果已完成则显示一个消息提示用户拼图已经完成。同时我们也添加了一个函数 checkPuzzleComplete() 来检查所有图片块是否都在正确的位置，以便在用户完成拼图时能够正确地标记拼图完成。
html5网页版乌龟推箱子小游戏源码下载
11-03
html5网页版乌龟推箱子小游戏源码下载 html5网页版乌龟推箱子小游戏源码下载
HTML5网页版推箱子小游戏.zip
05-24
HTML5网页版推箱子小游戏，键盘方向键控制移动，Q键撤退，最多可撤退20部。
HTML5 Canvas实现网页版推箱子小游戏特效源码.zip
11-15
HTML5 Canvas实现网页版推箱子小游戏特效源码.zip
HTML5 推箱子小游戏源码.zip
06-11
HTML5网页版推箱子小游戏，键盘方向键控制移动，Q键撤退，最多可撤退20部。
java推箱子游戏源代码_java实现推箱子小游戏（附源码）
06-10
以下是一个简单的Java实现推箱子小游戏的源代码： ```java import java.util.Scanner; public class PushBoxGame { private static int[][] map = { // 地图 {1, 1, 1, 1, 1, 1, 1}, {1, 0, 0, 0, 0, 0, 1}, {1, 0, 2, 0, 0, 0, 1}, {1, 0, 0, 0, 1, 0, 1}, {1, 0, 0, 0, 0, 0, 1}, {1, 0, 0, 0, 0, 0, 1}, {1, 1, 1, 1, 1, 1, 1} }; private static int playerX = 1; // 玩家的初始位置 private static int playerY = 1; public static void main(String[] args) { Scanner scanner = new Scanner(System.in); while (true) { // 循环直到推完所有箱子 displayMap(); System.out.print("请输入方向(w/a/s/d)："); String input = scanner.next(); switch (input) { case "w": move(-1, 0); break; case "a": move(0, -1); break; case "s": move(1, 0); break; case "d": move(0, 1); break; default: System.out.println("无效输入！"); break; } if (isWin()) { System.out.println("恭喜你，推完了所有箱子！"); break; } } } private static void displayMap() { // 显示地图 for (int[] row : map) { for (int cell : row) { switch (cell) { case 0: System.out.print(" "); break; case 1: System.out.print("■"); break; case 2: System.out.print("□"); break; case 3: System.out.print("※"); break; } } System.out.println(); } } private static void move(int dx, int dy) { // 移动 int newX = playerX + dx; int newY = playerY + dy; int newBoxX = newX + dx; int newBoxY = newY + dy; if (map[newX][newY] == 0 || map[newX][newY] == 3) { // 移动到空地或目标点 playerX = newX; playerY = newY; } else if (map[newX][newY] == 2) { // 移动到箱子 if (map[newBoxX][newBoxY] == 0 || map[newBoxX][newBoxY] == 3) { // 箱子可以移动 playerX = newX; playerY = newY; map[newX][newY] = 0; map[newBoxX][newBoxY] = 2; } } } private static boolean isWin() { // 是否推完所有箱子 for (int[] row : map) { for (int cell : row) { if (cell == 2) { return false; } } } return true; } } ``` 这个实现使用一个二维数组来表示地图，其中数字1表示墙，数字2表示箱子，数字3表示目标点，数字0表示空地。玩家的初始位置为(1,1)，每次移动时根据输入的方向来计算新的坐标，如果新位置是空地或目标点，则玩家移动到新位置；如果新位置是箱子，则需要判断箱子能否移动，如果能移动，则玩家和箱子一起移动到新位置。判断是否赢得游戏的方法是检查地图上是否还有箱子。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 123
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

橙 子_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值