<!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>

基于JQ的记忆翻牌游戏的更多相关文章

  1. Android基于GridView实现的翻牌游戏效果

    好久没有写博客了,上一篇博文距现在都有三个多月了,实在是惭愧.但是这段时间仍然是在忙于项目或是自我充电.这几天实现了一个基于GridView的翻牌动画效果,这里就将其整理出来同各位分享. 一.整体介绍 ...

  2. 123457123457#0#-----com.yuming.YiZhiFanPai01--前拼后广--益智早教游戏记忆翻牌cym

    com.yuming.YiZhiFanPai01--前拼后广--益智早教游戏记忆翻牌cym

  3. js之翻牌游戏中的一个深刻感悟

    先“上菜”: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)

    Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import m ...

  5. 基于jq图片居中插件 [center]

    最近在做一个项目,大量的图片基于js进行缩放(图片放大镜),考虑用css要写许多hack,而已经基于jq了,干脆写个方法得了. 代码很简单,不用多讲但是很实用. $.fn.extend({ cente ...

  6. 基于jq插件开发及弹窗实例

    基于jq的插件开发是什么鬼,$.fn是什么鬼,我在实际工作中也遇到过这个问题,下面就让我们一起来看一看这些都是什么鬼. 首先我们介绍$.fn. $.fn是指jquery的命名空间,加上fn上的方法及属 ...

  7. 使用Visual Studio Code调试基于ActionScript的LayaAir HTML5游戏

    使用Visual Studio Code(VS Code)调试的优势 使用VS Code我们可以极大地提高LayaAir Html5游戏项目的调试效率,VS Code的优势有以下几点: 在发生Java ...

  8. 在基于TypeScript的LayaAir HTML5游戏开发中使用AMD

    在基于TypeScript的LayaAir HTML5游戏开发中使用AMD AMD AMD是"Asynchronous Module Definition"的缩写,意思就是&quo ...

  9. 基于jq流畅度非常好的图片左右切换焦点图

    今天给大家分享一款基于jq流畅度非常好的图片左右切换焦点图.这是一款基于jQuery实现的支持鼠标拖动切换jQuery特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

随机推荐

  1. 高级UI-RecyclerView头部和尾部添加

    在ListView中,可以添加头部和尾部,其添加方法也是十分的简单,直接调用listview.addHeaderView(view);和listview.addFooterView(view);即可, ...

  2. （生鲜项目）07. api view实现商品列表页

    第一步: 环境配置 1. DRF官网: https://www.django-rest-framework.org/ 仔细查看自己当前的python版本以及django版本是否支持DRF, 然后就看看 ...

  3. 基于 Spring + Atomikos + Mybatis的多数据源配置demo

    1.spring配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...

  4. 乐字节Java变量与数据类型之一：Java编程规范，关键字与标识符

    大家好,我是乐字节的小乐,这次要给大家带来的是Java变量与数据类型.本文是第一集:Java编程规范,关键字与标识符. 一.编程规范 任何地方的名字都需要见名知意: 代码适当缩进 书写过程成对编程 对 ...

  5. java源码 -- HashSet

    概述 HashSet是基于HashMap来实现的, 底层采用HashMap的key来保存数据, 借此实现元素不重复, 因此HashSet的实现比较简单, 基本上的都是直接调用底层HashMap的相关方 ...

  6. C++操作文件行(读取，删除，修改指定行)

    /******************************************************** Copyright (C), 2016-2018, FileName: main A ...

  7. go 结构体2 文法

    结构体文法表示通过结构体字段的值作为列表来新分配一个结构体. 使用 Name: 语法可以仅列出部分字段.(字段名的顺序无关.) 特殊的前缀 & 返回一个指向结构体的指针. //分配的v1结构体 ...

  8. JVM命令行参数解析

    1. java命令行参数 先看java命令行的参数 solr@2f1fe8cc9f09:/opt/solr/server/solr-webapp/webapp$ java Usage: java [- ...

  9. Array Beauty CodeForces - 1189F (dp,好题)

    大意: 定义$n$元素序列$a$的美丽度为 $\min\limits_{1\le i<j\le n}|a_i-a_j|$. 给定序列$a$, 求$a$的所有长为$k$的子序列的美丽度之和. 记 ...

  10. Java后端HttpClient Post提交文件流 及服务端接收文件流

    客户端将文件转换为流发送: 依赖的包: <dependency> <groupId>org.apache.httpcomponents</groupId> < ...