前端小游戏-经典推箱子(HTML+CSS+JS)_推箱子网页版资源-CSDN文库

共2个文件

jpg：1个

html：1个

需积分: 20 62 浏览量 2022-11-09 09:53:23 上传评论 2 收藏 1.12MB ZIP 举报

在本文中，我们将深入探讨如何使用HTML、CSS和JavaScript实现一个经典的前端小游戏——推箱子。推箱子游戏以其独特的逻辑挑战和趣味性深受玩家喜爱，它不仅锻炼了玩家的空间想象能力，也提升了逻辑思维技巧。我们需要理解HTML是网页的基础结构语言，用于定义页面的各个元素和布局。在创建推箱子游戏时，我们将使用HTML来创建游戏界面，包括游戏区域、控制面板、提示信息等。例如，我们可以创建一个`<div>`元素作为游戏容器，然后在其中放置各个箱子和目标位置的占位符。 CSS则用于美化和布局这些HTML元素。通过CSS，我们可以设置游戏界面的背景颜色、元素大小、边框样式以及间距等。例如，我们可以使用CSS Grid或Flexbox来创建游戏棋盘，确保每个格子的大小一致，同时为箱子和目标添加独特的样式以区分它们。此外，CSS动画可以用来模拟箱子移动的过程，增加游戏的动态效果。 JavaScript是这个游戏的核心，负责处理游戏的逻辑和交互。以下是一些关键的JavaScript知识点： 1. **事件监听**：我们需要监听用户的键盘输入，如上、下、左、右箭头，以控制箱子的移动。这可以通过`addEventListener`函数实现。 2. **游戏状态管理**：我们需要跟踪当前的游戏状态，包括箱子的位置、墙的位置、目标位置以及玩家的操作历史。这通常会涉及一个二维数组来存储棋盘信息。 3. **逻辑判断**：每次移动前，我们需要检查这个操作是否合法，例如，箱子能否移动到该位置，是否会撞到墙，或者是否到达了目标。这涉及到多个条件判断和循环遍历。 4. **DOM操作**：当用户操作改变游戏状态时，我们需要更新HTML元素以反映这些变化。这可以通过修改元素的`innerHTML`或调整其样式来完成。 5. **错误处理和提示**：当游戏无解或出现错误操作时，需要提供相应的提示信息。可以创建一个提示`div`，并在JavaScript中根据需要显示或隐藏。 6. **重置和胜利检测**：实现重置游戏功能，以及检测玩家是否成功将所有箱子推到目标位置，当达成目标时显示胜利信息。 7. **优化与性能**：为了保证游戏流畅，避免频繁的DOM操作和计算密集型任务，可以利用缓存和批处理更新等技术提高性能。实现一个前端推箱子游戏需要综合运用HTML、CSS和JavaScript的知识，同时还需要良好的逻辑思维和问题解决能力。通过这个项目，开发者不仅可以提升前端开发技能，还能享受到编程带来的乐趣和挑战。

展开

资源推荐

资源详情

资源评论

收起资源包目录

推箱子.zip （2个子文件）

推箱子

index.html 22KB

pic.jpg 1.22MB

      <!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推箱子小游戏</title>
    <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>
</head>

<body>
    <h1 id="txz">推箱子小游戏</h1>
    <table>
        <tr>
            <td>
                <div id="a1"></div>
            </td>
            <td>
                <div id="a2"></div>
            </td>
            <td>
                <div id="a3"></div>
            </td>
            <td>
                <div id="a4"></div>
            </td>
            <td>
                <div id="a5"></div>
            </td>
            <td>
                <div id="a6"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="b1"></div>
            </td>
            <td>
                <div id="b2"></div>
            </td>
            <td>
                <div id="b3"></div>
            </td>
            <td>
                <div id="b4"></div>
            </td>
            <td>
                <div id="b5"></div>
            </td>
            <td>
                <div id="b6"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="c1"></div>
            </td>
            <td>
                <div id="c2"></div>
            </td>
            <td>
                <div id="c3"></div>
            </td>
            <td>
                <div id="c4"></div>
            </td>
            <td>
                <div id="c5"></div>
            </td>
            <td>
                <div id="c6"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="d1"></div>
            </td>
            <td>
                <div id="d2"></div>
            </td>
            <td>
                <div id="d3"></div>
            </td>
            <td>
                <div id="d4"></div>
            </td>
            <td>
                <div id="d5"></div>
            </td>
            <td>
                <div id="d6"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="e1"></div>
            </td>
            <td>
                <div id="e2"></div>
            </td>
            <td>
                <div id="e3"></div>
            </td>
            <td>
                <div id="e4"></div>
            </td>
            <td>
                <div id="e5"></div>
            </td>
            <td>
                <div id="e6"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="f1"></div>
            </td>
            <td>
                <div id="f2"></div>
            </td>
            <td>
                <div id="f3"></div>
            </td>
            <td>
                <div id="f4"></div>
            </td>
            <td>
                <div id="f5"></div>
            </td>
            <td>
                <div id="f6"></div>
            </td>
        </tr>
    </table>
    <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>
</body>
<script>
    var progress = 0;
    var isstart = 0;
    var px, py;
    var map = [[[1, 1, 1, 1, 1, 1], [1, 1, 0, 0, 1, 1], [1, 1, 0, 0, 1, 1], [1, 3, 2, 2, 3, 1], [1, 1, 0, 4, 1, 1], [1, 1, 1, 1, 1, 1]],
    [[1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 1, 1], [1, 0, 0, 2, 4, 1], [1, 1, 2, 0, 3, 1], [1, 1, 0, 0, 3, 1], [1, 1, 1, 1, 1, 1]],
    [[1, 1, 1, 1, 1, 1], [1, 1, 4, 3, 3, 1], [1, 0, 2, 2, 1, 1], [1, 0, 0, 0, 0, 1], [1, 1, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1]]];
    var copy = [[0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0]];
    var names = [["a1", "a2", "a3", "a4", "a5", "a6"], ["b1", "b2", "b3", "b4", "b5", "b6"],