基於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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。