数字华容道4*4的JS代码

三毛敲代码
已于 2024-06-24 15:49:37 修改
阅读量262
点赞数 3
文章标签： javascript 前端 html
于 2024-06-11 11:06:57 首次发布
本文链接：https://blog.csdn.net/m0_54241909/article/details/139589589
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字华容道4*4</title>
    <style>
        #game {
            height: 408px;
            width: 408px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin: 100px auto;
        }
        .game_item {
            height: 100px;
            width: 100px;
            border-radius: 4px;
            border: 1px dashed gainsboro;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
            user-select: none;
        }
    </style>
</head>
<body>
    <div id="game">

    </div>
</body>

<script>
    //初始布局
    var numberList = [[1, 2, 3, 4],
                    [5, 6, 7, 8],
                    [9, 10, 11, 12],
                    [13, 14, 15, 0]];
    //0所处的位置
    var zeroRow = 3;
    var zeroCol = 3;
    chaos();
    //打乱的函数
    function chaos() {
        //随机循环次数取[50, 100) 50~99随机
        //次数越小，越容易还原——不绝对
        var rCount = Math.floor(Math.random() * 50 + 50);
        for(let i = 0; i <= rCount; i++) {
            //随机出0将要去的位置
            let rRow = Math.floor(Math.random() * 4);
            let rCol = Math.floor(Math.random() * 4);
            zeroRun(rRow, rCol);
        }
    }
    function zeroRun (row, col) {
        //移动位置不变的话，直接return 结束，节省性能
        if (numberList[row][col] === 0) {
            return;
        }
        //0移动到指定位置（横坐标）
        numberList[zeroRow].splice(zeroCol, 1);
        numberList[zeroRow].splice(col, 0, 0);
        let rowNum = row - zeroRow;
        //小于0的时候，向上移动；大于0的时候，向下移动
        //0移动到指定位置（纵坐标）
        if (rowNum < 0) {
            for (let i = zeroRow; i > row; i--) {
                [numberList[i][col], numberList[i - 1][col]] = [numberList[i - 1][col], numberList[i][col]];
            }
        } else {
            for (let i = zeroRow; i < row; i++) {
                [numberList[i][col], numberList[i + 1][col]] = [numberList[i + 1][col], numberList[i][col]];
            }
        }
        //记录0新的坐标
        zeroRow = row;
        zeroCol = col;
        //如果原来有小方块的话，清除小方块
        if (document.getElementsByClassName("game_item").length > 0) {
            for (let i = 0; i < 16; i++) {
                document.getElementById("game").removeChild(document.getElementsByClassName("game_item")[0]);
            }
        }
        //重新渲染小方块，并添加属性row和col，记录小方块的横纵坐标
        for (let i = 0; i < 4; i++) {
            for (let j = 0; j < 4; j++) {
                let gameItem = document.createElement("div");
                gameItem.className = "game_item";
                //如果为0的话，不显示数字
                numberList[i][j] === 0 ? gameItem.innerText = "" : gameItem.innerText = numberList[i][j];
                gameItem.setAttribute("row", i);
                gameItem.setAttribute("col", j);
                document.getElementById("game").appendChild(gameItem);
            }
        }
        //判断是否胜利，加计时器是因为有时候dom节点还没有生成完，所以需要延迟
        setTimeout(() => {
            if (win()) {
                alert("win");
            }
        }, 0);
    }
    //监听用户单击事件
    document.getElementById("game").addEventListener("click", function (e) {
        if (e.target.className === "game_item") {
            let row = parseInt(e.target.getAttribute("row"));
            let col = parseInt(e.target.getAttribute("col"));
            if (row === zeroRow || col === zeroCol) {
                zeroRun(row, col);
            }
    }
    })
    //监听用户键盘事件
    document.onkeydown=function(e){
        switch(e.code) {
            case "ArrowUp":
                if (zeroRow === 3) {
                    return;
                }
                zeroRun(zeroRow + 1, zeroCol);
                break;
            case "ArrowDown":
                if (zeroRow === 0) {
                    return;
                }
                zeroRun(zeroRow - 1, zeroCol);
                break;
            case "ArrowLeft":
                if (zeroCol === 3) {
                    return;
                }
                zeroRun(zeroRow, zeroCol + 1);
                break;
            case "ArrowRight":
                if (zeroCol === 0) {
                    return;
                }
                zeroRun(zeroRow, zeroCol - 1);
                break;
            default: 
                break;
        }
    }
    //判断胜利
    function win() {
        let arr = numberList.flat();
        for (let i = 0; i < 15; i++) {
            if (arr[i] !== i + 1) {
                return false;
            }
        }
        return true;
    }
</script>
</html>
详细分析请看：JavaScript实现4*4数字华容道分析-CSDN博客