连连看游戏实现-优快云博客

本文链接：https://blog.youkuaiyun.com/github_33777703/article/details/75150322

本文介绍了一款基于HTML和JavaScript的连连看游戏实现方法，详细解释了两种不同的游戏规则及其实现逻辑，包括如何使用洗牌算法对游戏元素进行随机排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求

连连看有两种玩法：第一种是必须点击两次假如不能消除，必须再点击两次才能消除一对div 元素，另一种玩法是点击两次假设不能消除，则记录最后一次点击的元素，并将其和下一次点击的元素进行比较，如果相等就消除，不相等就继续记录上一次元素

分析

因为连连看中内容是数字，所以需要将数组中的元素进行打乱顺序的操作。目前已知的只有洗牌算法一个。

补充一下洗牌算法的原理：随机出一个数字作为下标访问数组元素，如果这个下标不是当前下标，就将两个元素交换位置。重复多次即可达到乱序的效果
洗牌算法的实例如下

/*【】洗牌算法*/
for (var i = 0; i < values.length; i++) {
    var ranIndex = numRandom(0, values.length-1);//随机下标
    if (ranIndex != i) {//如果随机出来的下标不等于for循环的当前值，则进行交换元素
        var temp;
        temp = values[i];
        values[i] = values[ranIndex];
        values[ranIndex] = temp;
    }
}

在这里又有了一种新方法：利用Array.sort()的函数参数属性，在sort函数里加入匿名函数，让其返回一个时正时负的值让数组的排序进行不确定排序

判断条件

第一种玩法的判断是

if (twoButtons.length == 2) {
    if (twoButtons[0].value == twoButtons[1].value) {
        /*让两个相等的按钮消除*/
        twoButtons[0].style.visibility = "hidden";
        twoButtons[1].style.visibility = "hidden";
    }
    twoButtons = [];
}

如果点击第二次的时候不满足条件就清空点击的数组来达到必须点击两次的效果

第二种的判断条件是

if (count == 1) {
    previous = indexA;
} else {
    /*既要保证本次点击不能和上次点击按钮是同一个按钮，又要满足两次点击的按钮value值相等，则消除*/
    if (inpt[indexA] != inpt[previous] && inpt[indexA].value == inpt[previous].value) {
        inpt[indexA].style.visibility = "hidden";
        inpt[previous].style.visibility = "hidden";
    }
}

说明必须同时满足两个条件，如果不满足判断条件则把最后一次点击的值给previous变量

源代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>连连看</title>
        <style type="text/css">
            input {
                border: 1px solid black;
                width: 100px;
                height: 60px;
                font-size: 30px;
                margin-bottom: 3px;
            }
        </style>
    </head>

    <body>
        <input type="button" id="" value="1" />
        <input type="button" id="" value="1" />
        <input type="button" id="" value="1" />
        <input type="button" id="" value="1" />
        <br />
        <input type="button" id="" value="1" />
        <input type="button" id="" value="1" />
        <input type="button" id="" value="1" />
        <input type="button" id="" value="1" />
        <br />
        <input type="button" id="" value="1" />
        <input type="button" id="" value="1" />
        <input type="button" id="" value="1" />
        <input type="button" id="" value="1" />
        <br />
        <input type="button" id="" value="1" />
        <input type="button" id="" value="1" />
        <input type="button" id="" value="1" />
        <input type="button" id="" value="1" />
        <br />
    </body>
    <script type="text/javascript">
        /**************
         * ***获取元素**
         *************/
        var inpt = document.getElementsByTagName("input");
        /**********
         * 随机数函数
         *********/
        function numRandom(m, n) {
            return Math.floor(Math.random() * ((n - m + 1) + m));
        }
        /************
         * 随机颜色函数
         ***********/
        function colorRandom() {
            var r = numRandom(0, 255);
            var g = numRandom(0, 255);
            var b = numRandom(0, 255);
            return "rgb(" + r + "," + g + "," + b + ")";
        }
        /************************
         *将所有按钮随机背景色和数字*
         ***********************/
        for(var i = 0; i < inpt.length; i++) {      
            inpt[i].style.backgroundColor = colorRandom();
            var values = [];
            for(var j = 0; j < inpt.length / 2; j++) {
                var ran = numRandom(1, 100);
                values.push(ran);
                values.push(ran);
            }
        }
        console.log(values);
        /********************************************
         * 随机打乱数组中的数组元素位置，两种算法：洗牌算法和
         * *****************************************/
        /*【】洗牌算法*/
        for (var i = 0; i < values.length; i++) {
            var ranIndex = numRandom(0, values.length-1);
            if (ranIndex != i) {
                var temp;
                temp = values[i];
                values[i] = values[ranIndex];
                values[ranIndex] = temp;
            }
        }
//      console.log(values);
        /****************
         * 重新为按钮赋value值
         ***************/
//      for (var i = 0; i < inpt.length; i++) {
//          inpt[i].value = values[i];
//      }
        /**************
         * 【】随机打乱
         *************/
        values.sort(function() {
//          console.log(values);
            return Math.random() - 0.5;
        });
        for (var i = 0; i < inpt.length; i++) {
            inpt[i].value = values[i];
        }
            console.log(values);
//      /*重新为button赋值value值*/
//      for(var i = 0; i < inpt.length; i++) {
//          inpt[i].value = values[i];
//      }
        var twoButtons = [];//存储两个点击过的对象，判断是否消除
        /******************************************************
         * 第一种玩法:点击两个不配对的块时需要重新点击两个对象才能继续游戏
         * ******************************************************/

        /***************************************************** 
         **********为所有按钮添加点击事件*************************
//       ****************************************************/
                for (var j = 0; j < inpt.length; j++) {
                    inpt[j].onclick = function () {
                        /*如果两次点击的按钮是同一个按钮，则不添加*/    
                        if (twoButtons.length == 1 && twoButtons[0] == this) {
                            return;
                        }
                        /*将点击按钮添加到twoButtons中*/
                        twoButtons.push(this);
                        if (twoButtons.length == 2) {
                            if (twoButtons[0].value == twoButtons[1].value) {
                                /*让两个相等的按钮消除*/
                                twoButtons[0].style.visibility = "hidden";
                                twoButtons[1].style.visibility = "hidden";
                            }
                            twoButtons = [];
                        }
//                      console.log(twoButtons)
                    }
                }
        /**第二种玩法
         * 为所有按钮添加点击事件
         */
//      var indexA; //记录点击按钮的下标
//      var previous; //记录上次点击按钮下标
//      var count = 0; //点击次数
//      for(var i = 0; i < inpt.length; i++) {
//          //放在外部
//          inpt[i].index = i;
//          inpt[i].onclick = function() {
//              count++;
//              indexA = this.index;
//              if (count == 1) {
//                  previous = indexA;
//              } else {
//                  /*既要保证本次点击不能和上次点击按钮是同一个按钮，又要满足两次点击的按钮value值相等，则消除*/
//                  if (inpt[indexA] != inpt[previous] && inpt[indexA].value == inpt[previous].value) {
//                      inpt[indexA].style.visibility = "hidden";
//                      inpt[previous].style.visibility = "hidden";
//                  }
//              }
//              previous = indexA; //记录上次下标
//          }
//      }
    </script>

</html>