九宫格滑块小游戏

< Cami >

已于 2024-05-22 12:28:54 修改

阅读量324

点赞数 12

分类专栏：前端文章标签： javascript

于 2024-05-21 21:50:05 首次发布

本文链接：https://blog.csdn.net/qq_62563725/article/details/139102510

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

我自己用html加JavaScript做了一个网页小游戏，在这里和大家分享以下。

展示视频：

九宫格滑块游戏展示

代码展示

<!DOCTYPE html>
<!-- <html lang="en"> -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigDiv{
            display: flex;
            flex-wrap: wrap;
        }
    </style>
</head>
<body style="text-align: center;">
    <h1>滑块小游戏</h1>
    <div class="bigDiv" style="width: 600px;height: 600px;border: 1px solid;margin: 10px auto 0px;">
        <!-- <div onclick="clickMinDiv()" class="minDiv" style="width: 200px;height: 200px;">
            <img style="width: 200px;height: 200px;" src="./image/1-1.jpg" alt="">
        </div> -->
    </div>

    <script>
        // (1)数据准备部分
        var allimg=[
            ["image/1.png","image/2.png","image/3.png"],
            ["image/4.png","image/5.png","image/6.png"],
            ["image/7.png","image/8.png","空"]
        ]
        

        var winImg=[
            ["image/1.png","image/2.png","image/3.png"],
            ["image/4.png","image/5.png","image/6.png"],
            ["image/7.png","image/8.png","空"]
        ]
        
        var bigDiv=document.getElementsByClassName("bigDiv")[0]
        
        // 保存空的图片的在allimg中的位置
        var empty=[2,2] // 单词释义:empty--空, 空虚, 空洞, 空荡荡, 清空, 空空
        
        // (2)核心代码部分
        showAll(allimg)
        dislocate()


        // (3)函数定义

        // 将数组中的内容展示在页面上
        function showAll(allimg){
            // 先将之前的内容清除
            bigDiv.innerHTML=``
            // 再绘制新内容
            for(var i=0;i<3;i++){
                for(var j=0;j<3;j++){
                    if(allimg[i][j]=="空"){
                        bigDiv.innerHTML+=`
                        <div class="minDiv" style="width: 200px;height: 200px;">
                            </div>
                            `
                        }else{
                            bigDiv.innerHTML+=`
                            <div οnclick="clickMinDiv(${i},${j},1)" class="minDiv" style="width: 200px;height: 200px;">
                                <img style="width: 200px;height: 200px;" src="${allimg[i][j]}" alt="">
                                </div>
                                `
                            }
                        }
                    }
                }

        // 点击小div触发的事件
        // k表示是否要判断是否胜利
        function clickMinDiv(i,j,k){
            if((absolute(i,empty[0])==1 && j==empty[1]) || (absolute(j,empty[1])==1 && i==empty[0])){
                allimg[empty[0]][empty[1]]=allimg[i][j]
                allimg[i][j]="空"
                empty[0]=i
                empty[1]=j
            }
            showAll(allimg)
            if(k==1){
                isWin()
            }
        }

        // 传入两数，获取其绝对值
        function absolute(a,b){ // 单词释义：absolute-----绝对, 绝对值
            return a>b?a-b:b-a
        }
        
        // 将内容随机打乱（方法：模拟100次随机点击方块）
        function dislocate(){ // 单词释义：dislocate：中断, 打乱, 扰乱, 打断, 受阻, 搅乱
            for(var i=0;i<1000;i++){
                var x = Math.floor(Math.random()*3) //获取一个0-2的随机整数
                var y = Math.floor(Math.random()*3)
                clickMinDiv(x,y,0)
            }
        }

        // 判断是否胜利
        function isWin(){
            if(arrEqual(winImg,allimg)){
                alert("恭喜你获得胜利！点击确定，重新开局。")
                location.reload();
            }
        }

        // 判断winImg和alling是否相等
        function arrEqual(winImg,allimg){ // 单词释义：equal：平等, 相等, 等, 同等, 等于, 相同
            var number=0
            for(var i=0;i<3;i++){
                for(var j=0;j<3;j++){
                    if(winImg[i][j]==allimg[i][j]){
                        number++
                    }
                }
            }
            if(number==9){
                return true
            }else{
                return false
            }
        }
    </script>
</body>
</html>