前端原生js实现连连看

实现连连看首先清除规则
1.相同图片可以消除，且连接路径最多有2折
2.所有图片都要被消除
首先定义变量，定义数组存放图片就是待消除的图片，以及一个二维数组记录棋盘变化，再定义一个数组记录步骤可以返回上一步
最后有完整代码

		let steps = [];//记录步骤
        let lattices = []; //这里为了方便dom操作将棋盘每个格子div都存在这个数组里了也是2维数组
        let imgarr = ["./assest/img/hanberger.svg", "./assest/img/ice-cream.svg", "./assest/img/pizza.svg", "./assest/img/popcorn.svg", "./assest/img/meal.svg"];//消除的图片，数组元素索引代表图片类型
        
        let boardarr = []//记录棋盘变化数组，每个元素与棋盘对应，存放图片索引，没有为-1

js布置棋盘，定义方法两个for循环快速创建棋盘，以棋盘左上角为(0,0)点往右x轴正方向，往下y轴正方向

let board = document.createElement("div");
//check记录第一次点击的标签相关信息，若下一次点击类型与check匹配则可以消除
let check = null;
board.classList.add("main")
document.body.appendChild(board)
function start() {
   
//初始化方法，通过arguments获取参数，参数依次为棋盘x轴长度，y轴长度，以及可选参数消除图片种类数量，不传默认为4
            let num = arguments[2] ? arguments[2] : 4;
            //这里只有五种图
            if (num > 5 || num < 1) {
   
                alert("请输入小于5大于0的数")
                return
            }
            //数组存放每种图片数量，如果最后有图片数量为奇数则不能全部消除，所以记录
            let even = [];
            for (let i = 0; i < num; i++) {
   
                even.push({
   
                    number: 0
                })
            }
            for (let i = 0; i < arguments[1] + 2; i++) {
   
                let transverse = document.createElement("div");
                transverse.classList.add("transverse");
                let arr = [];
                let arr2 = []
                for (let j = 0; j < arguments[0] + 2; j++) {
   
                    let grid = document.createElement("div");
                    grid.className = "grid";
                    arr2.push(grid);
                    //提前在标签里“画线”，消除时将相关路径显示出来即可
                    let left = document.createElement("span");
                    left.className = "leftLine"
                    let up = document.createElement("span");
                    up.className = "upLine"
                    let down = document.createElement("span");
                    down.className = "downLine"
                    let right = document.createElement("span");
                    right.className = "rightLine"
                    grid.append(left, up, down, right);
                    transverse.appendChild(grid)
                    if (j != 0 && i != 0 && j != arguments[0] + 1 && i != arguments[1] + 1) {
   
                        let radomNUm = Math.floor(Math.random() * num);
                        let img = document.createElement("img");
                        arr.push(radomNUm)
                        img.src = imgarr[radomNUm];
                        img.setAttribute("data-x", j);
                        img.setAttribute("data-y", i);
                        img.setAttribute("data-type",radomNUm)
                        //eliminate点击事件
                        img.onclick = eliminate.bind(img, j, i, radomNUm)
                        grid.appendChild(img)
                    } else {
   
                        arr.push(-1)
                    }
                }
                //记录每种图片数量
                arr.forEach(item => {
   
                    if(item != -1) {
   
                        even[item].number++;
                    }
                });
                board.appendChild(transverse)
                boardarr.push(arr);
                lattices.push(arr2);
            }
            // let img = document.querySelector("img[src='./assest/img/pizza.svg']")
            //将奇数图片数量改为偶数，棋盘总数必须为偶数
            // console.log(even)
            let waitchange = null;
            even.forEach((item,index)=>{
   
                if(item.number % 2 == 1) {
   
                    if(waitchange == null) {
   
                        waitchange = document.