游戏截图

在这里插入图片描述

游戏逻辑

游戏规则：在被分成16个方格的小方块下面有被随机打乱分配的8对图片，使用鼠标点击方格将图片翻转，若连续两次翻转的图片相同，则该组图片翻转成功，若连续两次翻转的图片不一样，则两张图片会在0.3秒后自动翻转回方格，当8对图片全部被翻转成功则游戏胜利。
主要逻辑：

定义一个数组，将其用Array.sort()方法进行乱序处理
根据得到的乱序数组将图片进行洗牌，分配到不同的方块下隐藏
根据以上得到的图片排列逻辑，将图片元素渲染进页面
监听鼠标点击事件，并通过事件委托判断鼠标点击的单位是否为已经反转过得单位
根据两张连续被翻转牌的id判断是否相同，从而判断是否反转成功，若id相同则成功，若id不相同则不成功
当被成功反转牌的个数等于方块的总个数时，游戏成功

自定义更改：想要更改游戏规格时，可以在对象初始化时将level参数调大，我准备的最大规格为level=3，想要更大规格同时也要准备同样多的图片，否则游戏中会出现多组相同的图片

代码详解

html页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS翻牌小游戏复刻1</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="game">

    </div>
    <script src="index.js"></script>
</body>
</html>

css外部样式

* {
    margin: 0;
    padding: 0;
}

#game {
    width: 600px;
    height: 600px;
    margin: 60px auto;
}

.block {
    float: left;
    box-sizing: border-box;
    width: 25%;
    height: 25%;
    border: 2px solid #ddd;
    background-color: #f0f0f0;
}

.block:hover {
    background-color: #2b84d0;
}

.pic {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    transform: scaleX(0);
    transition: transform .2s;
}

.block.on .pic {
    transform: scaleX(1);
}

javascript页面行为

var game = {
    el: '',//父元素
    level: 0,//当前游戏级别
    blocks: 0,//“牌”的总数
    gameWidth: 600,//游戏区域宽度，单位px
    gameHeight: 600,//游戏区域的高度，单位px
    dataArr: [],//数据数组，存放牌的信息
    judgeArr: [],//判断数组，存放被翻转牌的信息
    turnNum: 0,//翻转牌的总数
    picNum: 20,//牌的总数
    maxLevel: 3,//最高游戏级别
    init: function(options) {
        this.initData(options);
        this.render();
        this.handle();
    },
    initData: function(options) {
        this.options = options;
        this.el = options.el;
        this.level = options.level > this.maxLevel ? this.maxLevel : options.level;
        this.blocks = (this.level * 2) * (this.level * 2);
        this.getdataArr();
    },
    getdataArr: function() {
        /**
         * 获取数据数组
         */
        //1,利用Array.sort乱序
        var randomArr = this.randomArr();//得到随机数组
        var halfBlocks = this.blocks / 2;//得到排数的一半
        var dataArr = [];

        for(var i = 0; i < halfBlocks; i ++) {
            var num = randomArr[i];
            var info = {
                url: './images/' + num + '.png',
                id: num
            }
            dataArr.push(info,info);
        }
        this.dataArr = this.shuffle(dataArr);
    },
    randomArr: function() {
        /**
         * 回去数字数组
         * 数组中的每一项为0到count数字
         */
        var picNum = this.picNum;
        var arr = [];
        for(var i = 0; i < picNum; i ++) {
            arr.push(i + 1);
        }
        return this.shuffle(arr);
    },
    shuffle: function(arr) {
        /**
         * 洗牌，数组乱序方法
         */
        //1,利用Array.sort方法进行数组乱序
        return arr.sort(function() {
            return 0.5 - Math.random();
        })
    },
    render: function() {
        /**
         * 渲染元素
         */
        //var template = '';
        var blocks = this.blocks;
        var gameWidth = this.gameWidth;
        var gameHeight = this.gameHeight;
        var level = this.level;
        var blockWidth = gameWidth / (level * 2);
        var blockHeight = gameHeight / (level * 2);
        var dataArr = this.dataArr;

        for(var i = 0; i < blocks; i ++) {
            var info = dataArr[i];
            var oBlock = document.createElement('div');
            var oPic = document.createElement('div');
            oPic.style.backgroundImage = 'url(' + info.url + ')';
            oBlock.style.width = blockWidth + 'px';
            oBlock.style.height = blockHeight + 'px';
            oBlock.picid = info.id;
            oPic.setAttribute('class','pic');
            oBlock.setAttribute('class','block');
            oBlock.appendChild(oPic);
            this.el.appendChild(oBlock);
        }
    },
    handle: function() {
        /**
         * 监听父元素的点击事件
         * 通过事件委托判断点击的元素是否为未翻转的牌
         */
        var self = this;
        this.el.onclick = function(e) {
            var dom = e.target;
            var isBlock = dom.classList.contains('block');
            if(isBlock) {
                self.handleBlock(dom);
            }
        }
    },
    handleBlock: function(dom) {
        /**
         * 点击未翻转成功的牌时
         * 如果点击了两张牌，咋判断是否为同一张牌
         */
        var picId = dom.picid;
        var judgeArr = this.judgeArr;
        var judgeLength = judgeArr.push({
            id: picId,
            dom: dom
        });
        dom.classList.add('on');

        if(judgeLength === 2) {this.judgePic();}
        this.judgeWin();
    },
    judgePic: function() {
        /**
         * 判断被翻转牌的图片是否相同
         * 若两个元素的id相同，则翻转成功
         * 若不同，则不成功，将牌再次翻转
         */
        var judgeArr = this.judgeArr;
        var isSamePic = judgeArr[0].id === judgeArr[1].id;

        if(isSamePic) {
            this.turnNum += 2;
        } else {
            var picDom1 = judgeArr[0].dom;
            var picDom2 = judgeArr[1].dom;
            setTimeout(function() {
                picDom1.classList.remove('on');
                picDom2.classList.remove('on');
            },800)
        }
        judgeArr.length = 0;
    },
    judgeWin: function() {
        /**
         * 判断游戏是否胜利
         * 如果翻转成功牌的个数等于牌的总个数，则胜利
         */

         if(this.turnNum === this.blocks) {
             setTimeout(function() {
                 alert('胜利');
             },300)
         }
    }
}

game.init({
    el: document.getElementById('game'),
    level: 2
})

原文链接：https://blog.csdn.net/Y_qilin_/article/details/114292713