六边形小游戏

根据左边提示图案点击右边空白六边形框，如果存在三个及以上相同且相邻的图案就合并成新的图案

背景六边形组成

每个六边形是一个li，每个li里面有三个div组成的六边形

<div class="left"><img src="img/p1.png" /></div>
    <div style="margin:0 28%;width:500px;margin-top:150px;">
       <ul>
            <li rownum="1" index="1">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="1" index="2">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="1" index="3">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li style="clear:left;margin-left: -55px;" rownum="2" index="1">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="2" index="2">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="2" index="3">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="2" index="4">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li style="clear:left;margin-left: -110px;" rownum="3" index="1">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="3" index="2">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="3" index="3">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="3" index="4">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="3" index="5">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li style="clear:left;margin-left: -55px;" rownum="4" index="1">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="4" index="2">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="4" index="3">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="4" index="4">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="5" index="1">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="5" index="2">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
            <li rownum="5" index="3">
                <div class="box1"></div>
                <div class="box2"><img /></div>
                <div class="box3"></div>
            </li>
        </ul>
    </div>

六边形样式

/*六边形三个部分，上下两个三角形，中间一个矩形*/
        /* /  \  */
        /* |  | */
        /* \  /*/
.box1 {
            width: 0;
            border-left: 52px solid transparent;
            border-right: 52px solid transparent;
            border-bottom: 30px solid rgba(145,152,229,0.5);
            pointer-events: none;
        }
        .box2 {
            width: 104px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            background-color: rgba(145,152,229,0.5);
            -moz-user-select: none;
        }
        .box3 {
            width: 0;
            border-top: 30px solid rgba(145,152,229,0.5);
            border-left: 52px solid transparent;
            border-right: 52px solid transparent;
            pointer-events: none;
        }
        ul li {
            list-style: none;
            margin-right: 8px;
            margin-top: -22px;
            float: left;
            display: inline-block;
            /*禁止选中*/
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            user-select: none;
        }

点击六边形中间区域事件

$(".box2").click(function () {
                var rownum = $(this).parents('li').attr('rownum');//获取行数
                var index = $(this).parents('li').attr('index');//获取列数
                var num = $(".left").children('img').attr('src');
                //是否已经填充数字
                var $img = $(this).children('img');
                if ($img.attr('src') != undefined && $img.attr('src') != "") return;
                //获取当前填充节点的所有个数
                var len = $('li img[src="https://blog.csdn.net/yangying12138/article/details/122699664'   num   '"]').length;
                if (len >= 2) {
                    var arr = [];
                    $('img[src="https://blog.csdn.net/yangying12138/article/details/122699664'   num   '"]').parents('li').each(function (i, e) {
                        arr[i] = [];
                        arr[i].push($(this).attr('rownum'));
                        arr[i].push($(this).attr('index'));
                    });
                    var indexArr = [rownum, index ];
                    arr.push(indexArr);

                    //遍历二维数组去除不相邻的子数组
                    var count = 0;
                    var arrNew = [];
                    for (var i = 0; i < arr.length; i  ) {//找到相邻的数组，且此数组存在另一个相邻的数组
                        var newData = arr.filter(function (item) {
                            return item != arr[i];
                        });
                        for (var j = 0; j < newData.length; j  ) {
                            if ($.inArray(arr[i], arrNew) > -1) {
                                break;
                            }
                            if (Neighbour(arr[i], newData[j])) {
                                count  ;
                                if (count >= 2) {
                                    arrNew.push(arr[i]);
                                    count = 0;                        
                                    break;
                                }
                                else {
                                    var newData2 = newData.filter(function (item) {
                                        return item != newData[j];
                                    });
                                    for (var k = 0; k < newData2.length; k  ) {
                                        if (Neighbour(newData[j], newData2[k])) {
                                            arrNew.push(arr[i]);
                                            count = 0;
                                            break;
                                        }
                                    }
                                }
                            }
                        }
                    }                   
                    if (arrNew != null && arrNew.length > 2) {
                        //图片清空
                        $.each(arrNew, function (index1, value1) {
                            //更换图片的src                      
                            $('li[rownum="'   value1[0]   '"][index="'   value1[1]   '"]').find('img').attr('src', '');
                        });
                        //点击的位置图片更新 1
                        var m1 = parseInt(num.replace(/[^0-9]/ig, ''))   1;//最大值                        
                        //更换图片的src                      
                        $img.attr('src', 'img/p'   m1   '.png');
                        max = m1;
                        //触发新的一轮
                        Load($img.parents('li'));
                    }
                    else {
                        $img.attr('src', num);
                    }                   
                }
                else {
                    $img.attr('src', num);
                }
                //更新随机数
                var sjs = Math.floor(Math.random() * max   1);
                $(".left").children('img').attr('src', 'img/p'   sjs   '.png');
            })
        })        

这篇好文章是转载于：学新通技术网