【前端】使用jQuery简单实现赢粽子小游戏

作者：小5聊基础
简介：一只喜欢全栈方向的程序员，欢迎咨询，尽绵薄之力答疑解惑
编程原则：Write Less Do More

主要知识点列表

【游戏规则和说明】

1）游戏分为玩家1和玩家2<br/>
2）默认以玩家1点击开始掷色子<br/>
3）玩家1掷完色子，就到玩家2，以此类推<br/>
4）玩家1为机器人<br/>
5）玩家2为当前用户自己，可输入昵称<br/>
6）输入昵称点击确定按钮后，机器人自动掷色子<br/>
7）掷色子，色子得值就是移动得步数<br/>
8）谁先达到粽子位置谁就赢得粽子<br/>

【粽子设计】

粽子设计为上下两部分<br/>
1）上部分为肉色脸、黑色眼睛、以及一张笑脸<br/>
2）下部分为绿色，表示叶子，以及粽子文字<br/>
整体寓意为，端午安康，家好月圆

• 效果图

【色子设计】

以黑色原边框为主，白色背景，红色色子点数

• 代码

<div class="zongzi" style="width:100px;height:100px;line-height:100px;text-align:center;position:absolute;top:170px;left:425px;border-radius:100px;background:#f60;color:#fff;overflow:hidden;">
    <div style="position:absolute;top:0px;left:0px;width:100px;height:50px;background:#f4e8e8;">
        <div style="width:8px;height:8px;border-radius:5px;background:#333;position:absolute;top:20px;left:30px;"></div>
        <div style="width:8px;height:8px;border-radius:5px;background:#333;position:absolute;top:20px;left:60px;"></div>
        <div style="width: 20px;height:10px;border-radius:5px;position:absolute;top: 35px;left: 39px;overflow:hidden;">
            <div style="width: 20px;height:20px;border-radius:20px;background: #dcbaba;position:absolute;top: -10px;left: 0px;"></div>
        </div>
    </div>
    <div style="position:absolute;top:50px;left:0px;width:100px;height:50px;line-height:50px;background:#4fd478;letter-spacing:3px;">
        <span>粽子</span>
    </div>
</div>

• 效果图

• 代码

<div class="shaizi" style="width:50px;height:50px;border-radius:10px;position:absolute;top:10px;left:10px;border:2px solid #666;">
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:17.5px;left:17.5px;"></span>
</div>
<div class="shaizi" style="width:50px;height:50px;border-radius:10px;position:absolute;top:80px;left:10px;border:2px solid #666;">
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:3px;right:3px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:3px;left:3px;"></span>
</div>
<div class="shaizi" style="width:50px;height:50px;border-radius:10px;position:absolute;top:150px;left:10px;border:2px solid #666;">
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:3px;right:3px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:17.5px;left:17.5px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:3px;left:3px;"></span>
</div>
<div class="shaizi" style="width:50px;height:50px;border-radius:10px;position:absolute;top:10px;left:80px;border:2px solid #666;">
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:3px;left:3px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:3px;right:3px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:3px;left:3px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:3px;right:3px;"></span>
</div>
<div class="shaizi" style="width:50px;height:50px;border-radius:10px;position:absolute;top:80px;left:80px;border:2px solid #666;">
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:3px;left:3px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:3px;right:3px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:17.5px;left:17.5px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:3px;left:3px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:3px;right:3px;"></span>
</div>
<div class="shaizi" style="width:50px;height:50px;border-radius:10px;position:absolute;top:150px;left:80px;border:2px solid #666;">
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:1px;left:5px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:17.5px;left:5px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:17.5px;right:5px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:1px;right:5px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:1px;left:5px;"></span>
    <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:1px;right:5px;"></span>
</div>

【移动步数设计】

设置高宽度50px得小圆圈，以模板形式循环遍历生成，按照一定得规律生成一排一排小圆圈和箭头

• 效果

• 代码

<style>
.dot {
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 12px;
    color: #fff;
}
</style>
<!--小圆圈模板-->
<script id="dot_template" type="text/template">
    <div class="dot">
        <span></span>
    </div>
</script>

【箭头以及旋转】

双箭头指向移动得方向，可通过css样式旋转箭头，默认双箭头指向右边

• 效果

• 代码

<style>
/*旋转90度，在默认箭头指向右为参考，旋转90度，则箭头指向向下*/
.transform-rotate-90 {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* Internet Explorer */
    -moz-transform: rotate(90deg); /* Firefox */
    -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
    -o-transform: rotate(90deg); /* Opera */
}
<!--箭头模板-->
<script id="arrow_template" type="text/template">
    <div class="dot">
        <svg class="icon" style="" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1804"><path d="M530.850448 573.163313c32.005172-31.883636 32.111192-87.434343-0.069818-119.489939C399.437114 322.845737 268.507336 191.603071 137.436629 60.506505c-12.621576-12.625455-27.585939-20.686869-45.26804-23.540364-3.529697-0.570182-7.085253-0.999434-10.630465-1.499798-1.025293 0-2.055758 0-3.081051 0-4.035232 0.575354-8.111838 0.943838-12.091475 1.757091-33.298101 6.818909-54.838303 26.616242-63.959919 59.278222-3.201293 11.479919-2.806949 24.85398-1.135192 35.701657 1.751919 11.344162 7.11499 21.818182 14.479515 30.904889 3.444364 4.252444 7.050343 8.418263 10.918788 12.291879 111.045818 111.127273 222.142061 222.222222 333.247354 333.293899 1.444202 1.444202 3.227152 2.554828 5.187232 4.080485-2.121697 2.222545-3.475394 3.696485-4.879515 5.100606C252.653437 625.450667 145.164468 733.112889 37.416912 840.506182c-15.829333 15.773737-33.541172 31.162182-36.146424 54.273293-1.233455 10.908444-1.859232 22.111677 0 32.929616 0.919273 5.363071 3.262061 10.423596 5.494949 15.358707 23.655434 52.318384 89.514667 64.241778 130.66602 23.186101C268.668953 835.315071 399.501761 703.987071 530.850448 573.163313L530.850448 573.163313zM78.451902 35.466343l-12.091475 1.757091C70.345235 36.410182 74.421841 36.041697 78.451902 35.466343L78.451902 35.466343zM551.467498 36.441212c-38.000485 2.858667-70.434909 37.034667-71.651556 75.106263-0.79903 24.979394 8.131232 45.650747 25.691798 63.197091 111.383273 111.252687 222.661818 222.615273 334.015354 333.893818 1.534707 1.534707 3.686141 2.448808 6.595232 4.327434-3.35903 2.667313-5.116121 3.803798-6.565495 5.253172-68.050747 68.000323-136.075636 136.035556-204.100525 204.065616C591.916791 765.814949 548.391619 809.360808 504.845761 852.880808c-19.449535 19.439192-28.328081 42.706747-24.045899 70.054788 4.829091 30.919111 22.440081 52.516202 51.712 63.010909 29.450343 10.550303 56.692364 4.803232 80.49002-15.848727 1.944566-1.682101 3.798626-3.470222 5.616485-5.288081 130.121697-130.111354 259.955071-260.509737 390.546101-390.141414 33.272242-33.035636 33.454545-88.934141 1.206303-121.050505C879.016912 322.804364 748.093599 191.557818 617.028064 60.456081c-12.626747-12.626747-27.611798-20.655838-45.288727-23.505455-3.534869-0.570182-7.090424-0.994263-10.635636-1.484283-1.030465 0-2.055758 0-3.086222 0.005172C555.835013 35.799919 553.659013 36.274424 551.467498 36.441212L551.467498 36.441212zM551.467498 36.441212" p-id="1805"></path></svg>
    </div>
</script>
</style>

【交互以及实现流程】

1）页面加载，初始化移动线路，双重for循环，生成双方玩家三排小圆圈线路
2）玩家1在上方三排，从左到右再从右到左，以此类推
3）玩家2则在下方三排，和玩家1相反，从右到左再从左到右，以此类推
4）最后双方玩家得线路均以24步指向粽子

• 部分js代码

//绘制【玩家1】第一排线路
for (var top_index = 0; top_index < 1; top_index++) {
    for (var left_index = 0, i = 1; left_index < 10; left_index++ , i++) {
        var color_value = color.blue;

        if (true) {
            var left = left_index * unit_px * 2;
            var top = top_index * unit_px;
            var dom_dot = $(dot_template);
            $("span", dom_dot).html((i == 1 ? "玩家1" : ''));
            dom_dot.addClass('user-one');
            dom_dot.css({ "top": top, "left": left, "background": color_value, "width": unit_px, "height": unit_px, "lineHeight": unit_px + "px", "borderRadius": unit_px });
            $("#game-area").append(dom_dot);
        }

        if (true) {
            var left = (i * 2 - 1) * unit_px;
            var top = top_index * unit_px;
            var dom_arrow = $(arrow_template);
            if (i == 10) {
                left = left - unit_px;
                top = 1 * unit_px;
                dom_arrow.addClass("transform-rotate-90");
            }
            dom_arrow.css({ "top": top, "left": left, "width": unit_px, "height": unit_px, "lineHeight": unit_px + "px", "borderRadius": unit_px });
            $("#game-area").append(dom_arrow);
        }
    }
}

5）设置玩家双方信息

• js部分代码

// 设置玩家信息
var user_one_info = {};
var user_two_info = {};
function userInfo() {
    var _user_one_info = {
        name: '机器人',
        step_total: 0,
        step_random: 0,
        is_running: 0,
        class: '.user-one',
        next_user: '#userTwo'
    }
    user_one_info = _user_one_info;

    var _user_two_info = {
        name: user_two_info.name,
        step_total: 0,
        step_random: 0,
        is_running: 0,
        class: '.user-two',
        next_user: '#userOne'
    }
    user_two_info = _user_two_info;
}
userInfo();

6）页面加载时，在初始化玩家线路和用户信息，同时弹窗显示输入昵称

<!--玩家2昵称输入 - 弹窗-->
<div class="user-nickname" style="background:rgba(255,255,255,.3);width:100%;height:100%;position:fixed;z-index:2022;top:0px;left:0px;">
    <div style="width:200px;padding:10px;border-radius:8px;background:#fff;text-align:center;top:80px;left:500px;margin-left:-100px;position:absolute;box-shadow:0 0 13px #ccc;">
        <div style="width:100%;height:50px;line-height:50px;">
            <input id="nickName" placeholder="请输入昵称！" style="outline:none;background:none;border:none;border-bottom:1px solid #ccc;" />
        </div>
        <div id="btnStart" style="width:80%;margin:0 auto;height:30px;line-height:30px;text-align:center;cursor:pointer;background:#099dff;color:#fff;">确定</div>
    </div>
</div>

7）输入昵称，点击确定按钮
将昵称赋值给玩家2，机器人自动开始掷色子，并移动步数，完成步数移动后，显示玩家2掷色子按钮
8）玩家2主动点击掷色子按钮
隐藏按钮，并获得随机步数并移动
9）以此类推，每次在完成移动步数后，使用回调函数调用方法，判断是否赢得粽子

// 赢得粽子判断
function winZongzi(userData) {
    if (userData.step_total > 23) {

        $(".pop-div .user").html(userData.name);
        $(".pop-div").show();
        $(".zongzi").addClass('current-rotate');
    }
}

【完成代码】

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>玩色子赢粽子小游戏</title>
    <script src="jquery-2.0.0.min.js"></script>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-size: 100%;
        }

        .dot {
            text-align: center;
            position: absolute;
            top: 0px;
            left: 0px;
            font-size: 12px;
            color: #fff;
        }

        .icon {
            width: 10px;
            height: 10px;
            vertical-align: middle;
            fill: #f60;
            overflow: hidden;
        }

        .transform-rotate-90 {
            transform: rotate(90deg);
            -ms-transform: rotate(90deg); /* Internet Explorer */
            -moz-transform: rotate(90deg); /* Firefox */
            -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
            -o-transform: rotate(90deg); /* Opera */
        }

        .transform-rotate-180 {
            transform: rotate(180deg);
            -ms-transform: rotate(180deg); /* Internet Explorer */
            -moz-transform: rotate(180deg); /* Firefox */
            -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
            -o-transform: rotate(180deg); /* Opera */
        }

        .transform-rotate-270 {
            transform: rotate(270deg);
            -ms-transform: rotate(270deg); /* Internet Explorer */
            -moz-transform: rotate(270deg); /* Firefox */
            -webkit-transform: rotate(270deg); /* Safari 和 Chrome */
            -o-transform: rotate(270deg); /* Opera */
        }

        .bg-action {
            background: #f60 !important;
        }

        .shaizi {
            display: none;
        }

        .current-rotate {
            animation: rotate 1s linear infinite;
        }

        @keyframes rotate {
            0% {
                transform: translateY(0);
            }

            25% {
                transform: translateY(10px);
            }

            50% {
                transform: translateY(20px);
            }

            75% {
                transform: translateY(10px);
            }

            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>

    <div style="padding:20px 0 0 20px;box-shadow:0 0 13px #ccc;width:1000px;min-height:500px;margin-top:50px;margin-left:50px;">
        <div id="game-area" style="position:relative;margin:0 auto;">
            <div class="zongzi" style="width:100px;height:100px;line-height:100px;text-align:center;position:absolute;top:170px;left:425px;border-radius:100px;background:#f60;color:#fff;overflow:hidden;">
                <div style="position:absolute;top:0px;left:0px;width:100px;height:50px;background:#f4e8e8;">
                    <div style="width:8px;height:8px;border-radius:5px;background:#333;position:absolute;top:20px;left:30px;"></div>
                    <div style="width:8px;height:8px;border-radius:5px;background:#333;position:absolute;top:20px;left:60px;"></div>
                    <div style="width: 20px;height:10px;border-radius:5px;position:absolute;top: 35px;left: 39px;overflow:hidden;">
                        <div style="width: 20px;height:20px;border-radius:20px;background: #dcbaba;position:absolute;top: -10px;left: 0px;"></div>
                    </div>
                </div>
                <div style="position:absolute;top:50px;left:0px;width:100px;height:50px;line-height:50px;background:#4fd478;letter-spacing:3px;">
                    <span>粽子</span>
                </div>
            </div>
        </div>
    </div>

    <!--色子-->
    <div style="width:200px;height:300px;position:fixed;top:50px;right:222px;box-shadow:0 0 13px #ccc;">
        <div style="width:100%;height:50px;line-height:50px;text-align:center;border-bottom:1px solid #ccc;">
            <span>玩家色子</span>
        </div>
        <div style="width:100%;height:50px;line-height:50px;position:relative;">
            <span id="userOne" class="user" style="z-index:1;position:absolute;top:5px;left:50px;width:100px;height:35px;line-height:35px;color:#fff;font-size:13px;text-align:center;cursor:pointer;background:#099dff;border-radius:10px;">玩家1掷色子</span>
            <span id="userTwo" class="user" style="display:none;z-index:1;position:absolute;top:5px;left:50px;width:100px;height:35px;line-height:35px;color:#fff;font-size:13px;text-align:center;cursor:pointer;background:#7878ec;border-radius:10px;">玩家2掷色子</span>
        </div>
        <div style="width:100%;height:auto;position:relative;">
            <div class="shaizi" style="width:50px;height:50px;border-radius:10px;position:absolute;top:10px;left:10px;border:2px solid #666;">
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:17.5px;left:17.5px;"></span>
            </div>
            <div class="shaizi" style="width:50px;height:50px;border-radius:10px;position:absolute;top:80px;left:10px;border:2px solid #666;">
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:3px;right:3px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:3px;left:3px;"></span>
            </div>
            <div class="shaizi" style="width:50px;height:50px;border-radius:10px;position:absolute;top:150px;left:10px;border:2px solid #666;">
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:3px;right:3px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:17.5px;left:17.5px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:3px;left:3px;"></span>
            </div>
            <div class="shaizi" style="width:50px;height:50px;border-radius:10px;position:absolute;top:10px;left:80px;border:2px solid #666;">
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:3px;left:3px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:3px;right:3px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:3px;left:3px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:3px;right:3px;"></span>
            </div>
            <div class="shaizi" style="width:50px;height:50px;border-radius:10px;position:absolute;top:80px;left:80px;border:2px solid #666;">
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:3px;left:3px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:3px;right:3px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:17.5px;left:17.5px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:3px;left:3px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:3px;right:3px;"></span>
            </div>
            <div class="shaizi" style="width:50px;height:50px;border-radius:10px;position:absolute;top:150px;left:80px;border:2px solid #666;">
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:1px;left:5px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:17.5px;left:5px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:17.5px;right:5px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;top:1px;right:5px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:1px;left:5px;"></span>
                <span style="width:15px;height:15px;border-radius:15px;background:#f00;position:absolute;bottom:1px;right:5px;"></span>
            </div>
        </div>
    </div>

    <!--胜利 - 弹窗-->
    <div class="pop-div" style="display:none;background:rgba(255,255,255,.5);width:100%;height:100%;position:fixed;z-index:2022;top:0px;left:0px;">
        <div style="width:200px;padding:10px;box-shadow:0 0 13px #ccc;position:absolute;top:50px;left:527px;margin-left:-100px;top: 191px;left: 50%;background: #deb238;color: #fff;border-radius: 10px;">
            <div style="width:100%;height:50px;line-height:50px;text-align:center;">
                <span class="user"></span>
                <span>赢得了粽子</span>
            </div>
            <div id="btnAgain" style="width:80%;margin:0 auto;height:30px;line-height:30px;text-align:center;cursor:pointer;background:#f60;color:#fff;">再来一局</div>
        </div>
    </div>

    <!--玩家2昵称输入 - 弹窗-->
    <div class="user-nickname" style="background:rgba(255,255,255,.3);width:100%;height:100%;position:fixed;z-index:2022;top:0px;left:0px;">
        <div style="width:200px;padding:10px;border-radius:8px;background:#fff;text-align:center;top:80px;left:500px;margin-left:-100px;position:absolute;box-shadow:0 0 13px #ccc;">
            <div style="width:100%;height:50px;line-height:50px;">
                <input id="nickName" placeholder="请输入昵称！" style="outline:none;background:none;border:none;border-bottom:1px solid #ccc;" />
            </div>
            <div id="btnStart" style="width:80%;margin:0 auto;height:30px;line-height:30px;text-align:center;cursor:pointer;background:#099dff;color:#fff;">确定</div>
        </div>
    </div>

    <!--小圆圈模板-->
    <script id="dot_template" type="text/template">
        <div class="dot">
            <span></span>
        </div>
    </script>
    <!--箭头模板-->
    <script id="arrow_template" type="text/template">
        <div class="dot">
            <svg class="icon" style="" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1804"><path d="M530.850448 573.163313c32.005172-31.883636 32.111192-87.434343-0.069818-119.489939C399.437114 322.845737 268.507336 191.603071 137.436629 60.506505c-12.621576-12.625455-27.585939-20.686869-45.26804-23.540364-3.529697-0.570182-7.085253-0.999434-10.630465-1.499798-1.025293 0-2.055758 0-3.081051 0-4.035232 0.575354-8.111838 0.943838-12.091475 1.757091-33.298101 6.818909-54.838303 26.616242-63.959919 59.278222-3.201293 11.479919-2.806949 24.85398-1.135192 35.701657 1.751919 11.344162 7.11499 21.818182 14.479515 30.904889 3.444364 4.252444 7.050343 8.418263 10.918788 12.291879 111.045818 111.127273 222.142061 222.222222 333.247354 333.293899 1.444202 1.444202 3.227152 2.554828 5.187232 4.080485-2.121697 2.222545-3.475394 3.696485-4.879515 5.100606C252.653437 625.450667 145.164468 733.112889 37.416912 840.506182c-15.829333 15.773737-33.541172 31.162182-36.146424 54.273293-1.233455 10.908444-1.859232 22.111677 0 32.929616 0.919273 5.363071 3.262061 10.423596 5.494949 15.358707 23.655434 52.318384 89.514667 64.241778 130.66602 23.186101C268.668953 835.315071 399.501761 703.987071 530.850448 573.163313L530.850448 573.163313zM78.451902 35.466343l-12.091475 1.757091C70.345235 36.410182 74.421841 36.041697 78.451902 35.466343L78.451902 35.466343zM551.467498 36.441212c-38.000485 2.858667-70.434909 37.034667-71.651556 75.106263-0.79903 24.979394 8.131232 45.650747 25.691798 63.197091 111.383273 111.252687 222.661818 222.615273 334.015354 333.893818 1.534707 1.534707 3.686141 2.448808 6.595232 4.327434-3.35903 2.667313-5.116121 3.803798-6.565495 5.253172-68.050747 68.000323-136.075636 136.035556-204.100525 204.065616C591.916791 765.814949 548.391619 809.360808 504.845761 852.880808c-19.449535 19.439192-28.328081 42.706747-24.045899 70.054788 4.829091 30.919111 22.440081 52.516202 51.712 63.010909 29.450343 10.550303 56.692364 4.803232 80.49002-15.848727 1.944566-1.682101 3.798626-3.470222 5.616485-5.288081 130.121697-130.111354 259.955071-260.509737 390.546101-390.141414 33.272242-33.035636 33.454545-88.934141 1.206303-121.050505C879.016912 322.804364 748.093599 191.557818 617.028064 60.456081c-12.626747-12.626747-27.611798-20.655838-45.288727-23.505455-3.534869-0.570182-7.090424-0.994263-10.635636-1.484283-1.030465 0-2.055758 0-3.086222 0.005172C555.835013 35.799919 553.659013 36.274424 551.467498 36.441212L551.467498 36.441212zM551.467498 36.441212" p-id="1805"></path></svg>
        </div>
    </script>
</body>
</html>

<!--交互js-->
<script type="text/javascript">
    $(function () {

        function initGameLine() {
            var color = {
                blue: '#099dff',
                purple: '#7878ec'
            };
            var unit_px = 50;
            var dot_template = $("#dot_template").html().trim();
            var arrow_template = $("#arrow_template").html().trim();

            //绘制【玩家1】第一排线路
            for (var top_index = 0; top_index < 1; top_index++) {
                for (var left_index = 0, i = 1; left_index < 10; left_index++ , i++) {
                    var color_value = color.blue;

                    if (true) {
                        var left = left_index * unit_px * 2;
                        var top = top_index * unit_px;
                        var dom_dot = $(dot_template);
                        $("span", dom_dot).html((i == 1 ? "玩家1" : ''));
                        dom_dot.addClass('user-one');
                        dom_dot.css({ "top": top, "left": left, "background": color_value, "width": unit_px, "height": unit_px, "lineHeight": unit_px + "px", "borderRadius": unit_px });
                        $("#game-area").append(dom_dot);
                    }

                    if (true) {
                        var left = (i * 2 - 1) * unit_px;
                        var top = top_index * unit_px;
                        var dom_arrow = $(arrow_template);
                        if (i == 10) {
                            left = left - unit_px;
                            top = 1 * unit_px;
                            dom_arrow.addClass("transform-rotate-90");
                        }
                        dom_arrow.css({ "top": top, "left": left, "width": unit_px, "height": unit_px, "lineHeight": unit_px + "px", "borderRadius": unit_px });
                        $("#game-area").append(dom_arrow);
                    }
                }
            }

            //绘制【玩家1】第二排线路
            for (var top_index = 2; top_index < 3; top_index++) {
                for (var left_index = 9, i = 11; left_index >= 0; left_index-- , i++) {
                    var color_value = color.blue;

                    if (true) {
                        var left = left_index * unit_px * 2;
                        var top = top_index * unit_px;
                        var dom_dot = $(dot_template);
                        //$("span", dom_dot).html(i);
                        dom_dot.addClass('user-one');
                        dom_dot.css({ "top": top, "left": left, "background": color_value, "width": unit_px, "height": unit_px, "lineHeight": unit_px + "px", "borderRadius": unit_px });
                        $("#game-area").append(dom_dot);
                    }

                    if (true) {
                        var left = (left_index * 2 - 1) * unit_px;
                        var top = top_index * unit_px;
                        var dom_arrow = $(arrow_template);

                        if (i == 20) {
                            left = 0;
                            top = 3 * unit_px;
                            dom_arrow.addClass("transform-rotate-90");
                        }
                        else {
                            dom_arrow.addClass("transform-rotate-180");
                        }
                        dom_arrow.css({ "top": top, "left": left, "width": unit_px, "height": unit_px, "lineHeight": unit_px + "px", "borderRadius": unit_px });
                        $("#game-area").append(dom_arrow);
                    }
                }
            }

            //绘制【玩家1】第三排线路
            for (var top_index = 4; top_index < 5; top_index++) {
                for (var left_index = 0, i = 21; left_index < 4; left_index++ , i++) {
                    var color_value = color.blue;

                    if (true) {
                        var left = left_index * unit_px * 2;
                        var top = top_index * unit_px;
                        var dom_dot = $(dot_template);
                        //$("span", dom_dot).html(i);
                        dom_dot.addClass('user-one');
                        dom_dot.css({ "top": top, "left": left, "background": color_value, "width": unit_px, "height": unit_px, "lineHeight": unit_px + "px", "borderRadius": unit_px });
                        $("#game-area").append(dom_dot);
                    }

                    if (true) {
                        var left = (left_index * 2 + 1) * unit_px;
                        var top = top_index * unit_px;
                        var dom_arrow = $(arrow_template);

                        dom_arrow.css({ "top": top, "left": left, "width": unit_px, "height": unit_px, "lineHeight": unit_px + "px", "borderRadius": unit_px });
                        $("#game-area").append(dom_arrow);
                    }
                }
            }


            //绘制【玩家2】第一排线路
            for (var top_index = 8; top_index < 9; top_index++) {
                for (var left_index = 9, i = 1; left_index >= 0; left_index-- , i++) {
                    var color_value = color.purple;

                    if (true) {
                        var left = left_index * unit_px * 2;
                        var top = top_index * unit_px;
                        var dom_dot = $(dot_template);
                        $("span", dom_dot).html((i == 1 ? "玩家2" : ''));
                        dom_dot.addClass('user-two');
                        dom_dot.css({ "top": top, "left": left, "background": color_value, "width": unit_px, "height": unit_px, "lineHeight": unit_px + "px", "borderRadius": unit_px });
                        $("#game-area").append(dom_dot);
                    }

                    if (true) {
                        var left = (i * 2 - 1) * unit_px;
                        var top = top_index * unit_px;
                        var dom_arrow = $(arrow_template);
                        if (i == 10) {
                            left = 0;
                            top = (top_index - 1) * unit_px;
                            dom_arrow.addClass("transform-rotate-270");
                        }
                        else {
                            dom_arrow.addClass("transform-rotate-180");
                        }
                        dom_arrow.css({ "top": top, "left": left, "width": unit_px, "height": unit_px, "lineHeight": unit_px + "px", "borderRadius": unit_px });
                        $("#game-area").append(dom_arrow);
                    }
                }
            }

            //绘制【玩家2】第二排线路
            for (var top_index = 6; top_index < 7; top_index++) {
                for (var left_index = 0, i = 11; left_index < 10; left_index++ , i++) {
                    var color_value = color.purple;

                    if (true) {
                        var left = left_index * unit_px * 2;
                        var top = top_index * unit_px;
                        var dom_dot = $(dot_template);
                        //$("span", dom_dot).html(i);
                        dom_dot.addClass('user-two');
                        dom_dot.css({ "top": top, "left": left, "background": color_value, "width": unit_px, "height": unit_px, "lineHeight": unit_px + "px", "borderRadius": unit_px });
                        $("#game-area").append(dom_dot);
                    }

                    if (true) {
                        var left = (left_index * 2 + 1) * unit_px;
                        var top = top_index * unit_px;
                        var dom_arrow = $(arrow_template);

                        if (i == 20) {
                            left = 18 * unit_px;
                            top = (top_index - 1) * unit_px;
                            dom_arrow.addClass("transform-rotate-270");
                        }
                        else {

                        }
                        dom_arrow.css({ "top": top, "left": left, "width": unit_px, "height": unit_px, "lineHeight": unit_px + "px", "borderRadius": unit_px });
                        $("#game-area").append(dom_arrow);
                    }
                }
            }

            //绘制【玩家2】第三排线路
            for (var top_index = 4; top_index < 5; top_index++) {
                for (var left_index = 10, i = 21; left_index > 6; left_index-- , i++) {
                    var color_value = color.purple;

                    if (true) {
                        var left = (left_index - 1) * unit_px * 2;
                        var top = top_index * unit_px;
                        var dom_dot = $(dot_template);
                        //$("span", dom_dot).html(i);
                        dom_dot.addClass('user-two');
                        dom_dot.css({ "top": top, "left": left, "background": color_value, "width": unit_px, "height": unit_px, "lineHeight": unit_px + "px", "borderRadius": unit_px });
                        $("#game-area").append(dom_dot);
                    }

                    if (true) {
                        var left = (left_index * 2 - 3) * unit_px;
                        var top = top_index * unit_px;
                        var dom_arrow = $(arrow_template);
                        dom_arrow.addClass("transform-rotate-180");

                        dom_arrow.css({ "top": top, "left": left, "width": unit_px, "height": unit_px, "lineHeight": unit_px + "px", "borderRadius": unit_px });
                        $("#game-area").append(dom_arrow);
                    }
                }
            }
        }
        initGameLine();

        // 设置玩家信息
        var user_one_info = {};
        var user_two_info = {};
        function userInfo() {
            var _user_one_info = {
                name: '机器人',
                step_total: 0,
                step_random: 0,
                is_running: 0,
                class: '.user-one',
                next_user: '#userTwo'
            }
            user_one_info = _user_one_info;

            var _user_two_info = {
                name: user_two_info.name,
                step_total: 0,
                step_random: 0,
                is_running: 0,
                class: '.user-two',
                next_user: '#userOne'
            }
            user_two_info = _user_two_info;
        }
        userInfo();

        // 开始游戏
        $("#btnStart").click(function () {
            var name = $("#nickName").val().trim();
            if (name == undefined || name == '') {
                $("#nickName").focus();
                alert('请输入昵称！');
                return;
            }

            user_two_info.name = name;
            $(".user-nickname").hide();
            $("#userTwo").html(user_two_info.name + "掷色子");
            $("#userOne").trigger('click');
            $(".user-two").eq(0).html(user_two_info.name);
            $(".user-one").eq(0).html(user_one_info.name);
        });

        // 再来一局
        $("#btnAgain").click(function () {

            $(".dot").remove();
            initGameLine();
            userInfo();
            $(".pop-div").hide();
            $("#userOne").trigger('click');
        });

        // 玩家1 - 掷色子
        $("#userOne").click(function () {

            $(this).html(user_one_info.name + "掷色子");
            randomDice(user_one_info, this);
        });

        // 玩家2 - 掷色子
        $("#userTwo").click(function () {

            $(this).html(user_two_info.name + "掷色子");
            randomDice(user_two_info, this);
        });

        // 随机掷色子
        function randomDice(userData, that) {
            if (userData.is_running) return;
            userData.is_running = 1;
            userData.step_random = 0;
            $(that).hide();
            //$(userData.class).removeClass('current-rotate'); //先移动之前跳动

            var random_index = 0; //当时掷色子的值
            var current_num = 0; //当前随机色子次数第几次值
            var count_value = randomCount(); //色子随机次数
            var time_random = randomTime(); //色子每次随机的初始间隔时间

            var time_obj = setInterval(function () {

                // 随机完成
                if (current_num >= count_value) {
                    userData.is_running = 0; //标志停止掷色子
                    userData.step_random = random_index + 1; //保存本次掷色子的值
                    clearInterval(time_obj); //停止定时方法（停止色子随机）

                    //完成步数移动才能下一个玩家掷色子
                    moveDot(function () {
                        userData.step_total += userData.step_random; //统计总步数
                        $(userData.next_user).show(); //显示下一个玩家的掷色子按钮
                        if (userData.step_total < 24) {
                            if (userData.name != '机器人')
                                $("#userOne").trigger('click');
                        }
                        else {

                            winZongzi(userData); //赢得了粽子
                        }
                    }, userData);

                    return;
                }
                current_num += 1;

                time_random = time_random + Math.pow(2, 2) * 50; //定时间隔时间逐渐增大，从快到慢
                $(".shaizi").hide(); //每次先隐藏所有色子
                random_index = Math.round(Math.random() * 5); //随机生成色子下标
                $(".shaizi").eq(random_index).css({ "top": 50, left: 80 }).show(); //显示色子
            }, time_random);
        }

        // 随机生产 - 色子次数
        function randomCount() {
            return Math.round(Math.random() * 20) + 6;
        }

        // 随机生产 - 定时时间
        function randomTime() {
            return Math.round(Math.random() * 100);
        }

        // 移动步数
        function moveDot(callback, userData) {

            var move_index = 0;
            var move_time = setInterval(function () {
                var move_next_index = move_index + 1;
                var value = move_next_index + userData.step_total;
                var index = value - 1;
                if (move_index >= (userData.step_random - 1)) {
                    clearInterval(move_time); //停止移动
                    $(userData.class).eq(index).html(value).addClass('current-rotate'); //再增加当前小圆圈位跳动效果
                    callback();
                }
                if (index > 0) {
                    $(userData.class).eq(index).html(value);
                }
                $(userData.class).eq(index).addClass('bg-action');
                move_index = move_next_index;
            }, 300);
        }

        // 赢得粽子判断
        function winZongzi(userData) {
            if (userData.step_total > 23) {

                $(".pop-div .user").html(userData.name);
                $(".pop-div").show();
                $(".zongzi").addClass('current-rotate');
            }
        }
    })
</script>