• 基于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>
  • 相关阅读:
    海康相机抓图使用OpencvSharp转换成Mat格式
    海康工业相机MVS抓图图像转HObject格式
    golang 图片上传HTTP服务
    python 程序打包 pyinstaller
    海康工业相机 MVS 抓图并转为Mat格式,支持彩色相机
    Qt QImage 与 Opencv Mat转换
    Qt 延时函数
    C/C++ 简单的Log日志
    Opencv3——通道分离与合并
    Opencv——Mat像素算术操作
  • 原文地址:https://www.cnblogs.com/muou2125/p/10918239.html
Copyright © 2020-2023  润新知