原生JS拼图游戏

最新推荐文章于 2023-08-10 11:55:50 发布

奋进前端

最新推荐文章于 2023-08-10 11:55:50 发布

阅读量241

点赞数

分类专栏：游戏文章标签： javascript

本文链接：https://blog.csdn.net/qq_45744672/article/details/106515864

版权

游戏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客记录了作者在学习前端一段时间后，通过编写一个原生JavaScript拼图游戏来检验自己的学习成果。博客提供了游戏的源代码，读者可以直接复制粘贴到网页上运行体验。

摘要由CSDN通过智能技术生成

学习前端有一段时间了，于是想检验下自己到底学的怎么样了。所以写了个小游戏试下手。这是拼图游戏源代码。复制粘贴后，可直接在网页上运行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拼图</title>
    <style type="text/css">
        table{
            margin: 60px auto;
            /*border间距消失，border宽度重合*/
            /*border-collapse: collapse;*/
        }

        td{
            width: 60px;
            height: 60px;
            /*background-color: lightseagreen;*/
            /*border: 0px solid black;*/
            text-align: center;
            color: black;
            font-size: 20px;
            padding: 0;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    function exchange(rows,cols) {
        this.rows = rows;
        this.cols = cols;
        //全局定义
        window.arrTds = [];
        window.allTds = [];
        window.colorArr = ["palevioletred","yellow","lightblue","pink","lightgreen","orange","mediumpurple","sandybrown","cyan"]
    }
    exchange.prototype.createDom = function () {
        //动态创建dom元素
        const table = document.createElement("table");
        for (let i = 0; i < this.rows; i++) {
            const tr = document.createElement("tr");
            for (let j = 0; j < this.cols; j++) {
                const td = document.createElement("td");
                tr.append(td);
            }
            table.append(tr);
            document.body.append(table);
        }
    }
    exchange.prototype.updateDom = function () {
        //生成乱序数组
        const arrNum = new Array(this.rows*this.cols);
        for (let i = 0; i < arrNum.length-1; i++) {
            arrNum[i] = i + 1;
            arrNum[arrNum.length-1] = "";
        }
        arrNum.sort(function () {
            return Math.random()-0.5;
        })
        window.allTds = document.getElementsByTagName("td");
        for (let i = 0; i < allTds.length; i++) {
            allTds[i].innerText = arrNum[i];
            allTds[i].style.backgroundColor = colorArr[i];
            //获取加载时符合条件的元素
            const con1 = allTds[i].innerText == i + 1 && i < allTds.length - 1;
            const con2 = allTds[allTds.length - 1].innerText == "";
            const con3 = arrTds.includes(allTds[i].innerText) == false;
            const con4 = arrTds.includes("9") == false;
            if (con1 && con3) {
                arrTds.push(allTds[i].innerText);
            }
            if (con2 && con4){
                arrTds.push("9");
            }
        }
    }

    exchange.prototype.moveDom = function() {
        const table = document.querySelector("table");
        const tds = document.getElementsByTagName("td");
        table.onclick = function (event) {
            const obj = event.target;
            //console.log(obj);
            //获取当前元素的尺寸
            const x = obj.offsetLeft;
            const y = obj.offsetTop;
            //console.log(x,y);
            for (let i = 0; i < tds.length; i++) {
                //获取所有元素的尺寸大小
                const domLeft = tds[i].offsetLeft;
                const domTop = tds[i].offsetTop;
                //console.log(domLeft, domTop);
                //当前元素与点击元素的尺寸之差
                const disL = domLeft - x;
                const disT = domTop - y;
                //console.log(disL, disT);
                //符合交换数字的条件
                const L = (disT == 0 && (Math.abs(disL) == 62 || Math.abs(disL) == 61));
                const T = (disL == 0 && (Math.abs(disT) == 61 || Math.abs(disT) == 62));
                if (L || T) {
                    //交换数字
                    if (tds[i].innerText == "") {
                        tds[i].innerText = obj.innerText;
                        obj.innerText = "";
                        //删除加载数组时加入后而被移动的元素
                        if (arrTds.includes(allTds[i].innerText) && allTds[i].innerText != i+1 && i < allTds.length-1){
                            const index = arrTds.indexOf(allTds[i].innerText);
                            arrTds.splice(index,1);
                        }
                        if (arrTds.includes("9") && allTds[allTds.length-1].innerText != ""){
                            const index = arrTds.indexOf("9");
                            arrTds.splice(index,1);
                        }
                        //console.log(arrTds);
                        //删除点击加入后而被移动后的元素
                        if (arrTds.includes(tds[i].innerText) && tds[i].innerText != i+1 && i < tds.length-1){
                            const index = arrTds.indexOf(tds[i].innerText);
                            arrTds.splice(index,1);
                        }
                        if (arrTds.includes("9") && tds[tds.length-1].innerText != ""){
                            const index = arrTds.indexOf("9");
                            arrTds.splice(index,1);
                        }
                        //点击加入符合条件的元素
                        const con1 = tds[i].innerText == i + 1 && i < tds.length - 1;
                        const con2 = tds[tds.length - 1].innerText == "";
                        const con3 = arrTds.includes(tds[i].innerText) == false;
                        const con4 = arrTds.includes("9") == false;
                        if (con1 && con3) {
                            arrTds.push(tds[i].innerText);
                        }
                        if (con2 && con4) {
                            arrTds.push("9");
                        }
                        //console.log(arrTds);
                        //数组去重
                        const lastTds = unique(arrTds);
                        //console.log(lastTds);
                        //判断赢了
                        if(lastTds.length == tds.length){
                            alert("恭喜，你赢了");
                            break;
                        }
                    }
                }
            }
        }
    }
    window.onload = function () {
        let rows = 3;
        let cols = 3;
        exchange = new exchange(rows, cols);
        exchange.createDom();
        exchange.updateDom();
        exchange.moveDom();
    }
    //数组去重
    function unique(arr) {
        return Array.from(new Set(arr))
    }
</script>
</body>
</html>

奋进前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS拼图游戏

学习前端有一段时间了，于是想检验下自己到底学的怎么样了。所以写了个小游戏试下手。这是拼图游戏源代码。复制粘贴后，可直接在网页上运行。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拼图</title> <style type="text/css"> table{ mar
复制链接

扫一扫