基于JQ的记忆翻牌游戏

时间 2020-06-20
原文原文链接
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>poker</title>
    <style> * { margin: 0; padding: 0;
        } ul { display: flex; justify-content: space-between; flex-wrap: wrap; width: 450px; list-style: none; margin: 100px auto;
        } ul li { position: relative; width: 100px; height: 120px; line-height: 120px; text-align: center; font-size: 20px; border: 1px solid #ccc; cursor: pointer; box-shadow:1px 1px 10px 1px #ccc; background-color: #fff; margin-bottom: 15px; transform-style: preserve-3d; transition: all .8s;
        } .transfrom::after { content: ''; position: absolute; width:100px; height:120px; transform-origin:left ; box-shadow:1px 1px 10px 1px #ccc;

            /*将after伪类折叠到box的背面，做为牌的反面*/ top:0; left:100px; transform:rotateY(180deg);
        } .transfrom1::after { background-color: #111;
        } .transfrom2::after { background-color: #333;
        } .transfrom3::after { background-color: #666;
        } .transfrom4::after { background-color: #999;
        } .translate { transform:rotateY(180deg);
        } .operate { display: block; margin: 20px auto 0;
        }
    </style>
</head>
<body>
    <ul class="container"></ul>

    <button class="operate">开始</button>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script> $(function(){ /* 逻辑思路： 一、点击牌面 翻转牌面 并获取当前点击的牌面值 放入数组中 二、当数组长度等于2的时候需作判断 而且在判断完成前阻止继续点击 三、跟上一次的牌面值作对比 若是相同则对2张牌添加翻转的class 不一样则错则对2张牌移除翻转的class 四、判断完成清空数组 */

            var pokerArr = [1, 2, 3, 4, 1, 2, 3, 4]; // 初始数据
            var chooseArr = []; //点击的牌面值
            var allowClick = false; //是否能够点击牌面
            var score = 0; //得分

            // 点击牌面
 $(".container").on("click", "li", function(){ if(allowClick){ $(this).addClass("translate"); let currentValue = $(this).attr("data-value"); chooseArr.push(currentValue); if(chooseArr.length == 2){ judge(chooseArr); } } }) // 判断
            function judge(chooseArr){ allowClick = false; if(chooseArr[0] != chooseArr[1]){ setTimeout(() => { $(".container li").each(function(){ if($(this).hasClass("translate") && ($(this).attr("data-value") == chooseArr[0] || $(this).attr("data-value") == chooseArr[1])){ $(this).removeClass("translate"); } }) }, 800) }else{ score++; if(score == pokerArr.length / 2){ setTimeout(() => { alert("恭喜!!!"); }, 500) } } setTimeout(() => { chooseArr.length = 0; allowClick = true; }, 800) } // 打乱数组下标
            function randArr(arr) { var len = arr.length //首先从最大的数开始遍历，以后递减
                for(var i = arr.length - 1; i >= 0; i--) { //随机索引值randomIndex是从0-arr.length中随机抽取的
                    var randomIndex = Math.floor(Math.random() * (i + 1)); //下面三句至关于把从数组中随机抽取到的值与当前遍历的值互换位置
                    var itemIndex = arr[randomIndex]; arr[randomIndex] = arr[i]; arr[i] = itemIndex; } //每一次的遍历都至关于把从数组中随机抽取（不重复）的一个元素放到数组的最后面（索引顺序为：len-1,len-2,len-3......0）
                return arr; } // 重组数据并渲染
            function regroupArr(pokerArr){ let newPokerArr = []; let randIndexArr = randArr([0, 1, 2, 3, 4, 5, 6, 7]); let liHtml = ""; for(let i = 0; i < randIndexArr.length; i++){ newPokerArr.push(pokerArr[randIndexArr[i]]); liHtml += `<li class="transfrom transfrom${newPokerArr[i]}" data-value="${newPokerArr[i]}"></li>`;
 } $(".container").html(liHtml); } regroupArr(pokerArr); // 开始
            function start() { allowClick = true; } // 重置
            function restart() { allowClick = true; score = 0; regroupArr(pokerArr); } // 操做
 $(".operate").click(function(){ if($(this).text() == "开始"){ start(); $(this).text("从新开始"); }else{ restart(); } }) }) </script>
</body>
</html>