js实现拼图游戏（数字版本与图片版本）

最新推荐文章于 2024-04-28 18:16:44 发布

VeniesT

最新推荐文章于 2024-04-28 18:16:44 发布

阅读量3.8k

点赞数 7

分类专栏：日记帖/成长帖文章标签： JavaScript 拼图数字排序游戏 html

本文链接：https://blog.csdn.net/Venies/article/details/81081636

版权

日记帖/成长帖专栏收录该内容

7 篇文章 0 订阅

订阅专栏

纯js实现（点击式）拼图游戏

在没有使用任何框架的前提下，使用纯JS语法去搭建一个简易的拼图游戏，非常适合熟悉CSS和JS的语法。

0->1的数字排序实现思路

1.拼图，首先选择3*3的难度，那么要在一个块里面切分3*3=9的子模块，每个模块固定长宽，做好排序与编号

2.对每个div子模块，进行id和class的命名，方便我们后续进行块的移动以及通关的判定：id的命名我们考虑了后续移动功能的编写，我们做了如下的考虑，将一个3*3的九宫格块放到一个5*5的块正中央，那么这个九宫格块就占领5*5块的（7,8,9,12,13,14,17,18,19）位置，后续移动的时候我们只需对每一个位置可以移动的四个方向对应值的存在性判断即可。通关的判定十分简单，我们取出每个块对应的数值，判定12345678的顺序就可以了

3.最后一点是随机打乱数值，使用Math.random生成（0,8），并取整塞进数组当中（如果使用了ES6的话可以直接存进set当中，那么就免去了重复值的判断）

上代码（数字版排序）

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>拼图游戏</title>
    <style>
        .first{
            width: 150px;
            height: 150px;
            background-color: black;
            float: left;
            font-size: 30px;
            border: 5px solid white;
        }
        .second{
            width: 150px;
            height: 150px;
            background-color: green;
            float: left;
            font-size: 30px;
            border: 5px solid white;
        }
        .third{
            width: 150px;
            height: 150px;
            background-color: rebeccapurple;
            float: left;
            font-size: 30px;
            border: 5px solid white;
        }
        .white{
            width: 150px;
            height: 150px;
            background-color: rebeccapurple;
            float: left;
            font-size: 30px;
            border: 5px solid white;
        }
    </style>
    <script>
        function reset(){
            document.getElementById(19).innerHTML = '';
            let arrid = [7,8,9,12,13,14,17,18];
            let arr = [];
            while(arr.length<8){
                let ran = Math.round(Math.random()*10)+1;
                if(arr.indexOf(ran)<0 && ran<9){
                    arr.push(ran);

                }
            }
            for(i=0;i<arrid.length;i++){
                document.getElementById(arrid[i]).innerHTML = arr[i];
            }
        }
        function change(id){
            let temp = id ;
            let tempvalue = document.getElementById(id).innerHTML;
            let arr = [7,8,9,12,13,14,17,18,19];
            let arrtemp = [id+1,id-1,id+5,id-5];
            for(let i=0;i<arrtemp.length;i++){
                if(arr.indexOf(arrtemp[i])>= 0){
                    if (!document.getElementById(arrtemp[i]).innerHTML){
                        document.getElementById(arrtemp[i]).innerHTML = tempvalue;
                        document.getElementById(temp).innerHTML = '';
                    } 
                }
            }
            checkResult();
        }
        function checkResult(){
            let arr = [7,8,9,12,13,14,17,18];
            let pass = [1,2,3,4,5,6,7,8];
            for(let i=0;i<arr.length; i++){
                let temp = document.getElementById(arr[i]).innerHTML;
                if(pass[i] == temp){
                    if(i == 7){
                        reset();
                        alert('恭喜您成功通关');
                    }
                }else break;
                
            }
        }
        function pass(){
            alert('小tips：点我一键通关！');
            let arr =[1,2,3,4,5,6,7,8];
            let arrid = [7,8,9,12,13,14,17,18];
            for(i=0;i<arrid.length;i++){
                document.getElementById(arrid[i]).innerHTML = arr[i];
            }
            document.getElementById(19).innerHTML = '';
        }
        
        function back(){
            window.location.href = '/newPage';
        }
    </script>
</head>
<body onload="reset()">
    <div style="float: left;">
    <div style=" width: 480px;">
        <h2 style="text-align: center; color: palevioletred" onclick="pass()">欢迎来到拼图小游戏</h2>
        <p>游戏说明：点击空白格附近的有数字的方块，可以使得空白方块与点击的方块交换位置！<br>
            <b>通关目标:</b>实现左上角到右下角的数字排序为1,2,3,4,5,6,7,8!
        </p>
    </div>
    <div style=" width: 480px; height: 480px;">
        <div class="first"  onclick="change(7)">
            <p id="7" style="text-align: center; color: white;">1</p>
        </div>
        <div class="first" onclick="change(8)">
            <p id="8" style="text-align: center; color: white;">2</p>
        </div>
        <div class="first" onclick="change(9)">
            <p id="9" style="text-align: center; color: white;" >3</p>
        </div>
        <div class="second" onclick="change(12)">
            <p id="12" style="text-align: center; color: white;">4</p>
        </div>
        <div class="second" onclick="change(13)">
            <p id="13" style="text-align: center; color: white;">5</p>
        </div>
        <div class="second" onclick="change(14)">   
            <p id="14" style="text-align: center; color: white;">6</p>
        </div>
        <div class="third" onclick="change(17)">
            <p id="17" style="text-align: center; color: white;">7</p>
        </div>
        <div class="third" onclick="change(18)">
            <p id="18" style="text-align: center; color: white;"></p>
        </div>
        <div class="white" onclick="change(19)">
            <p id="19" style="text-align: center; color: white;"></p>
        </div>
    </div>
    <div>
        <h3 style="width: 480px; text-align: center" onclick="reset()">点我重置游戏</h3>
    </div>
    </div>
</body>
</html>

非常简单的数字版拼图排序游戏已经实现了，添加上游戏说明，各位可以Ctrl+C/V 直接上手去试试啦~

（再po上一张图片展示，非常简易的实现，没有花哨的美工~代码有很多改进的地方，但非常简单粗暴的实现，也是为了冲刺效果）

拼图版游戏思路

1.有了数字排序版游戏的基础，我们在这上边做了一些优化。先看看我们的实现吧！（并没有很难很复杂的方法）

2.依赖我们对于dom的操作，我们可以将上述点击交换图片的功能，修改成为修改css属性的操作：每次点击图片的时候，取出对应的id以及className，使用document.getElementByClassName=xxx的语法，我们修改了图片的引用源，那么就相当于交换了两张图片的位置了。

3.通关的判定依旧是依照我们的12345678的值排序。

4.忘了告诉大家了：有个小tips，我们加入了彩蛋，直接点击标题可以一键排序通关~~

上代码（拼图版）

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>拼图游戏</title>
    <style>
        .white{
            width: 150px;
            height: 150px;
            background-color: white;
            float: left;
            font-size: 5px;
            border: 5px solid white;
            color: white;
        }
        .p1{
            width: 150px;
            height: 150px;
            float: left;
            font-size: 5px;
            border: 5px solid white;
            background-image: url('./1.png');
            color: white;
        }
        .p2{
            width: 150px;
            height: 150px;
            float: left;
            font-size: 5px;
            border: 5px solid white;
            background-image: url('./2.png');
            color: white;
        }
        .p3{
            width: 150px;
            height: 150px;
            float: left;
            font-size: 5px;
            border: 5px solid white;
            background-image: url('./3.png');
            color: white;
        }
        .p4{
            width: 150px;
            height: 150px;
            float: left;
            font-size: 5px;
            border: 5px solid white;
            background-image: url('./4.png');
            color: white;
        }
        .p5{
            width: 150px;
            height: 150px;
            float: left;
            font-size: 5px;
            border: 5px solid white;
            background-image: url('./5.png');
            color: white;
        }
        .p6{
            width: 150px;
            height: 150px;
            float: left;
            font-size: 5px;
            border: 5px solid white;
            background-image: url('./6.png');
            color: white;
        }
        .p7{
            width: 150px;
            height: 150px;
            float: left;
            font-size: 5px;
            border: 5px solid white;
            background-image: url('./7.png');
            color: white;
        }
        .p8{
            width: 150px;
            height: 150px;
            float: left;
            font-size: 5px;
            border: 5px solid white;
            background-image: url('./8.png');
            color: white;
        }
        .p9{
            width: 150px;
            height: 150px;
            float: left;
            font-size: 5px;
            border: 5px solid white;
            background-image: url('./9.png');
            color: white;
        }
    </style>
    <script>
        function reset(){
            document.getElementById(19).innerHTML = '';
            let arrid = [7,8,9,12,13,14,17,18];
            let arr = [];
            while(arr.length<8){
                let ran = Math.round(Math.random()*10)+1;
                if(arr.indexOf(ran)<0 && ran<9){
                    arr.push(ran);

                }
            }
            for(i=0;i<arrid.length;i++){
                document.getElementById(arrid[i]).innerHTML = arr[i];
                document.getElementById(arrid[i]).className = contactImage(arr[i]);
            }
        }
        function change(id){
            let temp = id ;
            let tempvalue = document.getElementById(id).innerHTML;
            let arr = [7,8,9,12,13,14,17,18,19];
            let arrtemp = [id+1,id-1,id+5,id-5];
            for(let i=0;i<arrtemp.length;i++){
                if(arr.indexOf(arrtemp[i])>= 0){
                    if (!document.getElementById(arrtemp[i]).innerHTML){
                        document.getElementById(arrtemp[i]).innerHTML = tempvalue;
                        document.getElementById(arrtemp[i]).className = contactImage(tempvalue);
                        document.getElementById(temp).innerHTML = '';
                        document.getElementById(temp).className = 'white';
                        
                    } 
                }
            }
            checkResult();
        }
        function checkResult(){
            let arr = [7,8,9,12,13,14,17,18];
            let pass = [1,2,3,4,5,6,7,8];
            for(let i=0;i<arr.length; i++){
                let temp = document.getElementById(arr[i]).innerHTML;
                if(pass[i] == temp){
                    if(i == 7){
                        // reset();
                        alert('恭喜您成功通关,请点击重置游戏');
                    }
                }else break;
                
            }
        }
        function pass(){
            alert('小tips：点我一键通关！');
            let arr =[1,2,3,4,5,6,7,8];
            let arrid = [7,8,9,12,13,14,17,18];
            for(i=0;i<arrid.length;i++){
                document.getElementById(arrid[i]).innerHTML = arr[i];
                document.getElementById(arrid[i]).className = contactImage(arr[i]);
            }
            document.getElementById(19).innerHTML = '';
        }
        
        function back(){
            window.location.href = '/newPage';
        }
        function contactImage(id){
            let temp = 'p' + id;
            return temp;
        }
    </script>
</head>
<body onload="reset()">
    <div style=" width: 1000px;">
        <h2 style="text-align: center; color: palevioletred" onclick="pass()">欢迎来到拼图小游戏</h2>
        <p>游戏说明：点击空白格附近的有数字的方块，可以使得空白方块与点击的方块交换位置！<br>
            <b>通关目标:</b>实现左上角到右下角的数字排序为1,2,3,4,5,6,7,8!
        </p>
    </div>
    <div style=" width: 1000px; height: 500px;">
        <div class="p1" id="7"  onclick="change(7)">
            1
        </div>
        <div class="p2" id="8" onclick="change(8)">
            2
        </div>
        <div class="p3" id="9" onclick="change(9)">
            3
        </div>
        <div style="width: 500px; height: 500px;  float: right;"> 
            <p style="text-align: left; color: green"> 成品参考图:</p>
            <div style="width: 400px;height: 400px; background-image: url('./汤汤的BG.png');"></div>
        </div>
        <div class="p4" id="12" onclick="change(12)">
            4
        </div>
        <div class="p5" id="13" onclick="change(13)">
            5
        </div>
        <div class="p6" id="14" onclick="change(14)">
            6   
        </div>
        <div class="p7" id="17" onclick="change(17)">
            7
        </div>
        <div class="p8" id="18" onclick="change(18)">
            8
        </div>
        <div class="white" id="19" onclick="change(19)">
        </div>
    </div>

    <div>
        <h3 style="width: 980px; text-align: center" onclick="reset()">点我重置游戏</h3>
        <h4 style="width: 980px; text-align: center ; color: pink" onclick="back()">返回主页</h4>
    </div>
</body>
</html>

补充几点：

1.关于图片的来源，我是手工的ps切图，操作起来挺麻烦的，花了半个小时才切好了9张图片。建议可以使用切图工具~

2.后续会上传代码至git，如果有什么疑问可以联系我。

结束语

花了非常快的时间完成了这两个版本的实现，以更严格的规范去要求自己的话，这些代码会有很多改进的点，如果有什么致命错误，请您联系我好嘛。

qq:657897294

非常感谢你读完这篇文章！

VeniesT

关注

7
点赞
踩
35

收藏

觉得还不错? 一键收藏
1
评论
js实现拼图游戏（数字版本与图片版本）

纯js实现（点击式）拼图游戏在没有使用任何框架的前提下，使用纯JS语法去搭建一个简易的拼图游戏，非常适合熟悉CSS和JS的语法。0-&gt;1的数字排序实现思路1.拼图，首先选择3*3的难度，那么要在一个块里面切分3*3=9的子模块，每个模块固定长宽，做好排序与编号2.对每个div子模块，进行id和class的命名，方便我们后续进行块的移动以及通关的判定：id的命名我们考虑了后续移...
复制链接

扫一扫