• 基于JQ的记忆翻牌游戏


    <!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(){
                /*
                    逻辑思路:
                    1、点击牌面 翻转牌面 并获取当前点击的牌面值 放入数组中
                    2、当数组长度等于2的时候需做判断 并且在判断完成前阻止继续点击
                    3、跟上一次的牌面值做对比 如果相同则对2张牌添加翻转的class 不同则错则对2张牌移除翻转的class
                    4、判断完成清空数组
                */
    
                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>
  • 相关阅读:
    动态规划精讲(一)53. 最大子序和
    ACM计算几何总结
    三角形外心的坐标公式
    三角形外心的坐标公式
    高精度模板
    位运算模板
    同余定理与逆元
    扩展欧几里得算法求二元一次方程
    1004. 最大连续1的个数 III
    剑指 Offer 04. 二维数组中的查找
  • 原文地址:https://www.cnblogs.com/muou2125/p/10918239.html
Copyright © 2020-2023  润新知