六边形小游戏

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

背景六边形组成

每个六边形是一个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="' + num + '"]').length;
                if (len >= 2) {
                    var arr = [];
                    $('img[src="' + 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');
            })
        })        
  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

姎楹

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值