css3卡片翻转游戏

最新推荐文章于 2024-02-19 15:06:49 发布

滴滴咚咚咚

最新推荐文章于 2024-02-19 15:06:49 发布

阅读量397

点赞数

分类专栏： css3 文章标签： css3 css html

本文链接：https://blog.csdn.net/darkCloudss/article/details/109365262

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

测试：开始游戏
在这里插入图片描述

先建一张4*4的方格子

initGame(4);//初始化
    function initGame(num) {
        $("#wrap").children().remove();
        for(var i = 0; i < num; i ++){
            for(var j = 0; j < num; j ++){
                $("#wrap").append(`<li οnclick="turnCard($(this))"></li>`)
            }
        }
    }

一共有16个格子，也就是要有16张卡片对应，
新建卡片数组，卡片要两两相同

function  statisticalFieldNumber(arr) {//判断数组中有几个值相同
        return arr.reduce(function (prev, next) {
            prev[next] = (prev[next] + 1) || 1;
            return prev;
        }, {});
    }
var 
arr = [];
    function checkpoint(point,randomNum){//关卡
        arr = [];
        // console.log(arr)
        for(var i = 0; i < point; ){
            // console.log(arr)
            if(arr.length<point){
                var num = Math.floor(Math.random()*randomNum)+1;
                if(!statisticalFieldNumber(arr)[num] || statisticalFieldNumber(arr)[num]<2){//卡片只有一张或没有才进数组,保证卡片有两张相同
                    arr.push(num);
                    i ++;
                }
            }else{
                i = point;
            }
        }
        // console.log(arr)
    }
    checkpoint(16,8);//初始化关卡  16个格子  8张卡片  两两相同 也就是16张卡片

翻转卡片两张卡片进行比较，如果相同则对应成功不相同则翻转回来

var selectedArr = [];
    var selectedNum = [];
    function turnCard(_this){

        if(selectedNum.length<2 && !_this.hasClass("open") && selectedNum[0]!==_this.index()){
            //每两个进行一次判断
            selectedArr.push(arr[_this.index()]);//当前图片
            selectedNum.push(_this.index());//当前index
        }
        if(selectedNum.length>=2 && selectedArr[0]!==selectedArr[1]){//不相同的图形则关闭图形
                $("#wrap li").eq(selectedNum[0]).removeAttr("class","open");
                $("#wrap li").eq(selectedNum[1]).removeAttr("class","open");
                markClose(selectedNum[0],selectedNum[1]);
                selectedNum = [];
                selectedArr = [];
        }else if(selectedNum.length>=2 && selectedArr[0]==selectedArr[1]){//两张相同的
            $("#wrap li").eq(selectedNum[0]).attr("class","open");
            $("#wrap li").eq(selectedNum[1]).attr("class","open");
            selectedNum = [];
            selectedArr = [];
        }

        var url = "./img/selectImg/"+arr[_this.index()]+".png";
        _this.css({"transform":"rotateY(180deg)",});
        setTimeout(function () {
            _this.css({"background-image":"url('"+url+"')",})
        },200);

    }

function markClose(num1,num2){//翻回卡片
        setTimeout(function () {
            $("#wrap li").eq(num1).css({"transform":"rotateY(0deg)",});
            $("#wrap li").eq(num2).css({"transform":"rotateY(0deg)",});

            setTimeout(function () {
                $("#wrap li").eq(num2).css({"background-color":"#becda7","background-image":"url('')"})
                $("#wrap li").eq(num1).css({"background-color":"#becda7","background-image":"url('')"})
            },200)
        },500)

    }