【前端】龟兔赛跑小游戏，jquery+css+div实现

全栈小5
187 阅读1分钟

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

代码片段链接
code.juejin.cn/api/raw/719…

image.png

【游戏说明】

说到[兔子]，就想起龟兔赛跑的故事，因此，以这个故事为背景，简单设计一个在线网页龟兔赛跑的小游戏。

【游戏设计】

1）设计70个方格，一行10个格子，总共7行
2）顶部设计一个按钮，从兔子开始轮流点击按钮随机产生步数
3）兔子和乌龟初始位置在第一个格子
4）双方谁达到最后一个格子谁就获胜
5）格子高宽度设计60px
6）双方赛道格子默认为灰色背景，兔子移动后的格子背景为粉色，乌龟的为绿色

【代码实现】

1、HTML基本结构代码

温馨提醒：需要设置文档的编码类型，否则会出现中文乱码

<html>
    <head>
        <title>兔了个兔</title>
    </head>
    <body>

    </body>
</html>

<script type="text/javascript">

</script>
  • 乱码情况

image.png

  • 解决方法 标头添加一行代码
<meta charset="utf-8" />

image.png

2、创建一个游戏面板

设置一个500x500像素的方形游戏面板，并居中加边框阴影显示

  • 代码
<div style="width: 500px; height: 500px;padding:20px;margin:0 auto;margin-top:80px;box-shadow:0 0 13px #ccc;">

</div>
  • 效果

image.png

3、随机步数按钮

效果如下

image.png

<!--随机步数-->
<div class="dice-div">
    <span>0</span>
</div>

var randomValue = 1 + Math.floor(Math.random() * 10);
$(".dice-div span").html(randomValue);
4、兔子和乌龟图标

image.png

5、遍历生成格子

遍历生成70个格子

for (var i = 0; i < 70; i++) {
    var div = '<div class="unit-div"><span></span></div>';
    $('.game-box-div').prepend(div);
}

【完整代码】

<html>
<head>
    <meta charset="utf-8" />
    <title>兔了个兔</title>
    <script src="jquery.min.js"></script>
    <style type="text/css">
        .game-box-div { width: 680px; height: 500px; padding: 20px; margin: 0 auto; margin-top: 80px; box-shadow: 0 0 13px #ccc; }
        .unit-div { width: 60px; height: 60px; line-height: 60px; text-align:center;background: #f3f3f3; margin-right: 8px; margin-bottom: 10px; float: left; position: relative; }
        .rabbit-svg { position: absolute; top: 0px; left: 5px; width: 40px; height: 40px; }
        .tortoise-svg { position: absolute; bottom: 0; left: 10px; width: 30px; height: 30px; }
        .dice-div { cursor: pointer; position: absolute; top: 10px; left: 50%; width: 60px; height: 60px; line-height: 60px; text-align: center; margin-left: -50px; border: 1px solid #ccc; border-radius: 10px; }
        .pink-background { background: #f878df; color:#fff;}
        .green-background { background: #55f6b3; color: #fff; }
    </style>
</head>
<body>

    <!--随机步数-->
    <div class="dice-div">
        <span>0</span>
    </div>

    <!--赛跑面板-->
    <div class="game-box-div">

    </div>
</body>
</html>

<script type="text/javascript">
    $(function () {

        var rabbitHtml = '<svg class="rabbit-svg" t="1675341926192" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2556"><path d="M710.927599 364.822939c-19.45233-26.058781-50.649462-26.058781-74.873119-31.931183-2.936201-15.415054-40.739785-89.554122-57.622939-88.453046-16.516129 1.101075-4.771326 11.744803-1.835125 44.777061-7.707527-8.808602-25.324731-41.84086-32.298208-25.324732-16.883154 40.739785 29.362007 97.995699 28.260932 107.905377-1.101075 9.542652-4.404301 48.447312-22.388531 56.521864-6.973477 2.936201-71.202867 5.872401-142.405734 44.777061s-85.883871 93.224373-101.298925 151.581362c-4.037276 15.782079-5.872401 30.463082-5.505377 43.675985-2.936201 2.202151-6.239427 6.239427-9.909677 13.946954-9.175627 19.085305 7.340502 39.271685 27.159857 46.612186 4.037276 6.606452 8.808602 12.111828 13.212903 15.782079 20.553405 17.617204 92.490323 11.744803 101.298925 14.681003 8.808602 2.936201 35.968459 13.579928 45.878136 13.579929 9.909677 0 40.739785 2.936201 40.739785-8.808602 0-26.058781-26.425806-40.005735-26.425807-40.005735s15.415054-8.808602 37.069534-21.287455c21.287455-12.478853 35.234409-31.931183 42.941936-33.032258 15.048029-1.835125 13.579928 48.447312 24.223656 60.192114 10.643728 11.744803 21.287455 44.410036 35.968459 49.548387 11.010753 4.037276 48.814337-1.101075 51.750537-12.478853 2.936201-11.744803-4.771326-12.478853-12.845878-23.489605-7.707527-10.643728-16.516129-53.585663-8.808602-70.101793 7.707527-16.516129 23.489606-85.516846 25.324731-114.511828 1.835125-28.994982 1.101075-48.447312 16.516129-87.351971 25.324731-9.542652 33.032258-34.867384 34.133333-47.713262 1.835125-12.478853-8.808602-33.032258-28.260931-59.091039z m-26.058782 26.058781c-6.239427 0-11.377778-5.138351-11.377778-11.377777s5.138351-11.377778 11.377778-11.377778c6.239427 0 11.377778 5.138351 11.377778 11.377778s-4.771326 11.377778-11.377778 11.377777z" fill="#1296db" p-id="2557"></path></svg>';
        var tortoiseHtml = '<svg class="tortoise-svg" t="1675342166428" viewBox="0 0 2220 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3355"><path d="M2052.808163 171.585217h-21.31037c-140.721923 0-317.451023 125.290276-432.820954 257.194116a169.380696 169.380696 0 0 0-121.616075-31.230714A710.958019 710.958019 0 0 0 853.916164 0 674.950843 674.950843 0 0 0 211.298295 477.646215l-14.329386 54.378184h-21.31037a173.054898 173.054898 0 0 0-167.543595 132.271259c-2.571941 9.920344-5.143882 20.575529-7.348403 30.863294a36.742017 36.742017 0 0 0 7.348403 30.495874 36.742017 36.742017 0 0 0 29.393613 13.961966h49.969143v41.151059c31.598134 52.173663 137.415142 84.874058 159.092931 91.120201l-12.859706 146.968066h270.788662v-4.409042A110.22605 110.22605 0 0 0 444.24268 918.550413h-3.674202a52.173663 52.173663 0 0 1 51.438824-41.518479h559.948331a1493.930391 1493.930391 0 0 0 305.693577-36.742017l63.931109 183.710083H1690.16446v-4.409042A110.22605 110.22605 0 0 0 1629.540133 918.550413l-5.143883-2.571942-52.541083-141.089343 36.742016-18.003588a3514.006459 3514.006459 0 0 0 320.022964-186.649444l22.41263-14.696806a1342.185863 1342.185863 0 0 1 170.850377-87.446 155.41873 155.41873 0 0 0 90.38536-156.15357 159.092931 159.092931 0 0 0-159.460351-140.354503z" fill="#13227a" p-id="3356"></path></svg>';

        // ===遍历生成70个格子===
        for (var i = 0; i < 70; i++) {
            var div = '<div class="unit-div"><span></span></div>';
            $('.game-box-div').prepend(div);
        }

        // 兔子和乌龟初始位置
        var rabbitMoveStep = 0;
        var tortoiseMoveStep = 0;
        $(".unit-div").eq(rabbitMoveStep).append(rabbitHtml);
        $(".unit-div").eq(tortoiseMoveStep).append(tortoiseHtml);

        // 随机产生1~10的步数
        var runTarget = 'rabbit';
        $(".dice-div").click(function () {
            var randomValue = 1 + Math.floor(Math.random() * 10);
            $(".dice-div span").html(randomValue);

            if (runTarget == 'rabbit') {
                runTarget = 'tortoise';
                var maxStep = rabbitMoveStep + randomValue;
                var moveTime = setInterval(function () {
                    $(".rabbit-svg").remove();
                    $(".unit-div").eq(rabbitMoveStep).addClass('pink-background');
                    $(".unit-div").eq(rabbitMoveStep++).append(rabbitHtml);
                    $(".unit-div span").eq(rabbitMoveStep - 1).html(rabbitMoveStep);
                    if (rabbitMoveStep >= maxStep) {
                        clearInterval(moveTime);
                    }
                }, 500);
            }
            else {
                runTarget = 'rabbit';
                var maxStep = tortoiseMoveStep + randomValue;
                var moveTime = setInterval(function () {
                    $(".tortoise-svg").remove();
                    $(".unit-div").eq(tortoiseMoveStep).addClass('green-background');
                    $(".unit-div").eq(tortoiseMoveStep++).append(tortoiseHtml);
                    $(".unit-div").eq(tortoiseMoveStep - 1)
                    $(".unit-div span").eq(tortoiseMoveStep - 1).html(tortoiseMoveStep);
                    if (tortoiseMoveStep >= maxStep) {
                        clearInterval(moveTime);
                    }
                }, 300);
            }
        });
    });
</script>

小知识点：块元素和行内元素布局错位问题 display: inline-block和float:left;

avatar
文章
阅读
粉丝