简易的连连看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .major{
     
     
            width: 600px;
            height: 600px;
            border: 1px solid black;
            position: relative;
        }
        .major .box{
     
     
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            position: absolute;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
        }
        h1{
     
     
            display: none;
            width: 600px;
            height: 600px;
            background-color: brown;
            position: absolute;
            top: 33px;
            opacity: 0.8;
            text-align: center;
            line-height: 600px;
        }
    </style>
</head>
<body>
    <p class="gaol">积分：0</p>
    <div class="major"></div>
    <h1>游戏结束</h1>
</body>
<script>
    var boxList;
    var major = document.getElementsByClassName('major')[0];
    var majorWidth = parseFloat(window.getComputedStyle(major).width);//获得宽的数字
    var boxNum = 0; //总共创建的div数量
    var repeat;
    var number = []
    var number_num = [];
    var gaol = document.getElementsByClassName('gaol')[0];
    var goal = 0;
    var h1 = document.getElementsByTagName('h1')[0]

    //检查随机要用的数组中的数是否符合条件
    function randomRepeat(random1){
     
     //用于标记random是否重复
        repeat = true;
        if(number.length == 0){
     
     
            repeat = true;//如果为空  直接返回该数字
        }
        else{
     
     
            for(var j = 0; j < number.length ; j++){
     
       //判断random随机得数是否在数组中有了 
                if(random1 != number[j]){
     
        //如果随机的值 没出现过 
                    continue;
                }
                else{
     
     //如果随机的值 出现过 
                    repeat = false;
                    break;
                }
            }        
        }
    }

    //创建随机要用的数组
    function creatRandom(){
     
     
        //让他随机在数组中循环不重复
        var i = 0;
        for(var k = 0;k < 10000; k++){
     
     
            var random1 = parseInt(Math.random()*18);
            randomRepeat(random1);
            if(repeat){
     
     
                number[i] = random1;
                number[(((majorWidth/100) * (majorWidth/100))/2)+i] = number[i];
                i++;
            }
            if(i >= 18){
     
     
                break;
            } 
        }
    }

    //添加到div中的最后判断，和进行随机
    function searchRandom(){
     
     
        var x = parseInt((Math.random()*number.length));
        var numFalg = true;
        if (number_num.length == 0){
     
     
            number_num.push(x);
        }
        else{
     
     
            for(var i = 0; i < number_num.length ; i++){
     
     
                if(x == number_num[i]){
     
     
                    searchRandom();
                    numFalg = false;
                }
            }
            if(numFalg){
     
     
                number_num.push(x);
            }
        }
    }
 

    creatRandom()
    function creatBox(){
     
     
        for(var i = 0; i < (majorWidth/100); i++){
     
     
           for(var j = 0; j < (majorWidth/100); j++){
     
     
                var div = document.createElement('div');//创建元素
                div.setAttribute('class','box');//设置元素的属性和值
                major.appendChild(div);
                boxList = document.getElementsByClassName('box');
                boxList[boxNum].style.left = i * (majorWidth/6) + 'px';
                boxList[boxNum].style.top = j * (majorWidth/6) + 'px';
                searchRandom();
                boxList[boxNum].textContent = number[number_num[boxNum]];
               //把创建的元素加入body
                boxNum++;
           }
        }
    }
    creatBox();

    var targetList = [];//储存点击的节点  数组不需要清除 只需要覆盖就行
    var targetNum = 0;//记录点击了几个
    major.addEventListener('click',function(event){
     
     
        var target = event.target
        if(target.className == 'box'){
     
     //确定点击的元素为数字的方块
           if(targetNum <= 1){
     
      //当点击的为2个及以内的
                target.style.border = '1px solid red';//改变点击的节点的颜色  
                for(var i = 0;i < boxList.length ;i++){
     
     
                    if(target === boxList[i]){
     
     
                        targetList[targetNum] = target; //把点击的节点加入 数组
                    }
                }
                targetNum +=1;
            }
            if(targetNum == 2){
     
       //当点击的为2个时
                if(targetList[0].textContent == targetList[1].textContent){
     
       //判断两个的节点是否一致
                for(var i = 0;i < boxList.length ;i++){
     
     
                        for(var j = 0;j < targetList.length ;j++){
     
     
                            if(targetList[j] == boxList[i]){
     
     
                                boxList[i].remove()
                                goal += 1;
                                gaol.textContent = '积分：' + goal;
                            }
                        }
                        targetNum = 0;
                    }
                }
                else{
     
     
                targetList[0].style.border = '1px solid black';  //如果不一致 把数组中的节点回复到默认的    
                targetList[1].style.border = '1px solid black';
                targetNum = 0;//清零记录点击数
            }
            }
           
        }
        if(goal >= number.length){
     
      
            h1.style.display = 'block';
        }
    });
</script>
</html>
猜你喜欢
