纯前端小游戏：羊了个羊

行861
于 2024-07-29 16:19:51 发布
阅读量102
点赞数
文章标签： html5
本文链接：https://blog.csdn.net/qq_63222650/article/details/140773982
版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>羊了个羊</title>
    <style>
        body {
            background-color: rgb(47, 110, 139);
        }

        .scene {
            width: 500px;
            height: 500px;
            margin: 0 auto;
        }

        .block {
            width: 25px;
            height: 25px;
            float: left;
            position: relative;
        }

        .choose {
            width: 357px;
            height: 51px;
            border-top: 1px solid red;
            border-left: 1px solid red;
            margin: 30px auto;

        }

        .item {
            width: 50px;
            height: 50px;
            border-right: 1px solid red;
            border-bottom: 1px solid red;
            float: left;
            position: relative;

        }

        .card {
            width: 50px;
            height: 50px;
            background-color: rgb(23, 228, 43);
            position: absolute;
            left: 0;
            top: 0;
            border-bottom: 3px solid #1cd241;
            box-shadow: 0 0 3px #000;
            background-size: 70%;
            background-position: center;
            background-repeat: no-repeat;
            cursor: pointer;
        }

        .mask {
            width: 50px;
            height: 50px;
            background-color: #000000ae;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="scene">
    </div>
    <div class="choose">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        // 坐标系的创建
        let scene = document.querySelector(".scene");
        let obj = {};
        for (let i = 0; i < 20; i++) {
            for (let j = 0; j < 20; j++) {
                let block = document.createElement("div");
                block.className = "block";
                scene.appendChild(block);
                obj[j + "-" + i] = block;
            }
        }
        // 创建卡片
        let cardarr = []; //放置所有卡片的数组
        function draw(level = 1) {
            let posarr = [];
            for (let i = 0; i < 20; i++) {
                posarr.push([]);
                for (let j = 0; j < 20; j++) {
                    posarr[i][j] = 0;
                }
            }

            for (let i = level; i < 19 - level; i++) {
                for (let j = 1; j < 10; j++) {
                    if (Math.random() < 0.2 && check(i, j, posarr)) {
                        posarr[i][j] = 1;
                        posarr[i][18 - j] = 1;
                    }
                }

            }
            for (let i = 0; i < 20; i++) {
                for (let j = 0; j < 20; j++) {
                    if (posarr[i][j] === 1) {
                        let card = document.createElement("div");
                        card.className = "card";
                        card.style.zIndex = 10 - level;
                        obj[j + "-" + i].appendChild(card);
                        cardarr.push(card);
                    }

                }

            }
        }
        for (let i = 7; i > 0; i--) {
            draw(i);
        }
        // 把多余的卡片删除
        let length = cardarr.length;
        for (let i = 0; i < length % 3; i++) {
            let card = cardarr.pop();
            card.parentNode.removeChild(card);
        }
        function check(i, j, posarr) {
            if (posarr[i][j - 1] || posarr[i - 1][j - 1] || posarr[i - 1][j] || posarr[i - 1][j + 1]) {
                return false;
            }
            else {
                return true;
            }
        }
        // scene.getboundingClientRect;
        // scene.isSameElement;
        // 渲染遮罩
        function renderMask() {
            let masks = document.querySelectorAll(".mask");
            for (let i = 0; i < masks.length; i++)
                masks[i].parentNode.removeChild(masks[i]);
            for (let i = 0; i < cardarr.length; i++) {
                let item = cardarr[i];
                let rect = item.getBoundingClientRect();
                let { x, y } = rect;
                let one = document.elementFromPoint(x, y);
                let two = document.elementFromPoint(x + 49, y);
                let three = document.elementFromPoint(x, y + 49);
                let four = document.elementFromPoint(x + 49, y + 49);
                if (!(item.isSameNode(one) && item.isSameNode(two) && item.isSameNode(three) && item.isSameNode(four))) {
                    let mask = document.createElement("div");
                    mask.className = "mask";
                    mask.style.zIndex = getComputedStyle(cardarr[i]).zIndex;
                    cardarr[i].parentNode.appendChild(mask);
                }
                cardarr[i].index = i;
            }
        }
        renderMask()
        // 图片渲染
        let imgarr = [];
        for (let i = 0; i < cardarr.length / 3; i++) {
            let n = Math.floor(Math.random() * 10);
            imgarr.push(n);
        }
        let allimg = [...imgarr, ...imgarr, ...imgarr];
        allimg.sort(function () {
            if (Math.random() > 0.5) {
                return 1;
            }
            else {
                return -1;
            }
        });
        for (let i = 0; i < cardarr.length; i++) {
            cardarr[i].style.backgroundImage = "url(" + allimg[i] + ".png)";
            cardarr[i].n=allimg[i];
        }
        // 点击事件
        let choosedarr = [];
        let items = document.querySelectorAll(".item");
        scene.onclick = function (e) {
            if (e.target.className === "card") {
                let item = e.target;
                // 删除页面的卡片
                item.parentNode.removeChild(item);
                // 从cardarr当中也去进行删除
                cardarr.splice(item.index, 1);
                if(cardarr.length===0){
                    alert("游戏成功");
                    location.reload();
                }
                // 重新绘制所有的遮罩
                renderMask();
                // 将当前被删除的卡片对象添加到choosedarr中
                if(choosedarr.length===7){
                    alert("基尼太美");
                    location.reload();
                }
                choosedarr.push(item);
                choosedarr.sort((a,b)=>a.n-b.n);
                let count={};
                for(let i=0;i<choosedarr.length;i++){
                    if(!count[choosedarr[i].n]){
                        count[choosedarr[i].n]=1;
                    }else{
                        count[choosedarr[i].n]+=1;
                    }
                }
                for(let i in count){
                    if(count[i]===3){
                        let length=choosedarr.length;
                        for(let j=0;j<choosedarr.length;j++){
                            if(choosedarr[j].n==i){
                                choosedarr.splice(j,1);
                                j--;
                            }
                        }
                    }
                }
                // 向item中添加卡片标签
                for(let i=0;i<items.length;i++){
                    items[i].innerHTML="";
                }
                for (let i = 0; i < choosedarr.length; i++) {
                    items[i].appendChild(choosedarr[i]);
                }
            }
        }


    </script>
</body>

</html>