JavaScript implements the nine-grid mobile puzzle game

This article shares the specific code for JavaScript to implement the Jiugongge mobile puzzle game for your reference. The specific content is as follows

Effect picture:

Code and detailed logic:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Nine-grid puzzle</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            border: 0;
        }
        /* * is a wildcard, which removes the default styles from all elements, because some browsers will add some styles by default, which may cause problems for the layout*/
        body{
            width: 100%;
            height: 100%;
        }
        /* Set the height and width of the body to 100% so that it will automatically adapt to the browser screen size*/
        #container{
            position: relative;
            width: 620px;
            height: 450px;
            margin: 0 auto;
            margin-top: 100px;
            border-radius: 1px;
        }
        /* This is the DIV that wraps all the elements. Set it to 620px wide and 450px high. This size can be set to be larger, but not smaller. At least it should be able to contain all the elements inside*/
        #game{
            position: absolute;
            width: 450px;
            height: 450px;
            border-radius: 5px;
            display: inline-block;
            background-color: #ffe171;
            box-shadow: 0 0 10px #ffe171;
        }
        /* This is the DIV of the game area. The size is calculated and depends on the size of your small square. Here we set the size of the small square to 150px 150px, so the size is 150px*3, which is 450px */
        #game div{
            position: absolute;
            width: 149px;
            height: 149px;
            box-shadow: 1px 1px 2px #777;
            background-color: #20a6fa;
            color: white;
            text-align: center;
            font-size: 150px;
            line-height: 150px;
            cursor: pointer;
            -webkit-transition: 0.3s;/*Browser prefix, compatible with other browsers chrome*/
               -moz-transition: 0.3s;/*firefox*/
                -ms-transition: 0.3s;/*ie*/
                 -o-transition: 0.3s;/*opera*/
                    transition: 0.3s;
        }
        /* This is the size of the small square. It is positioned absolutely so that changing its position will not affect the positions of other elements. The width and height are both 149px. Note that we also set box-shadow: 1px 1px 2px #777;
        It also has a border shadow, so 149px plus the border 1px, its total width is 150px The transition below: 0.3s sets the transition time, which is a CSS3 property that will make the property change to present a transition animation, so when we change the position of the square, it will have an animation, we don’t have to write the animation function ourselves, this will drive you crazy */
        #game div:hover{
            color: #ffe171;
        }
        /*Set the mouse hover animation for the square. When the mouse hovers over the element, the attributes here will replace the above attributes. When the mouse is moved away, it will return to the original state. Here we change the font color*/
        #control{
            width: 150px;
            height: 450px;
            display: inline-block;
            float: right;
        }
        /*Control area, display:inline-block will make the element present the characteristics of block elements, so that it can be resized, and it will also have the characteristics of inline elements, so that it will not occupy a line of space, float:right will make the element float to the right*/
        #control rowspan{
            height: 25px;
            font-size: 20px;
            color: #222;
            margin-top: 10px;
        }
        /*Set the common style of the control area buttons*/
        #start{
            display: inline-block;
            font-size: 28px;
            width: 100px;
            height: 28px;
            background-color: #20a6fa;
            color: #ffe171;
            text-shadow: 1px 1px 2px #ffe171;
            border-radius: 5px;
            box-shadow: 2px 2px 5px #4c98f5;
            text-align: center;
            cursor: pointer;
        }
        /*Set properties for the start button. cursor: The pointer attribute makes the mouse display different mouse shapes when it moves over an element. The pointer is the hand shape*/
        #reset{
            display: inline-block;
            font-size: 28px;
            width: 100px;
            height: 28px;
            background-color: #20a6fa;
            color: #ffe171;
            text-shadow: 1px 1px 2px #ffe171;/*font shadow*/
            border-radius: 5px;/*rounded corner attribute*/
            box-shadow: 2px 2px 5px #4c98f5;/*Box shadow*/
            text-align: center;/*Text centered*/
            cursor: pointer;
        }
        /*Set properties for the Reset button*/
        #d1{
            left: 0px;
        }
        #d2{
            left: 150px;
        }
        #d3{
            left: 300px;
        }
        #d4{
            top: 150px;
        }
        #d5{
            top: 150px;
            left: 150px;
        }
        #d6{
            top: 150px;
            left: 300px;
        }
        #d7{
            top: 300px;
        }
        #d8{
            left: 150px;
            top: 300px;
        }
        /*This is to arrange the positions of each small square in order in advance*/
    </style>
</head>
<body>
    <div id="container">
    <!--The outermost DIV is used to contain the structure inside-->
        <div id="game">
        <!--Game area, large DIV block-->
            <div id="d1" onclick="move(1)">1</div>
            <!--Small DIV, that is, 8 small squares. When clicked, the move() function is executed, and the parameter is the displayed number, so we know which square was clicked -->
            <div id="d2" onclick="move(2)">2</div>
            <div id="d3" onclick="move(3)">3</div>
            <div id="d4" onclick="move(4)">4</div>
            <div id="d5" onclick="move(5)">5</div>
            <div id="d6" onclick="move(6)">6</div>
            <div id="d7" onclick="move(7)">7</div>
            <div id="d8" onclick="move(8)">8</div>
        </div>
        <div id="control">
        <!--Game Control Area-->
            <p>
                <rowspan id="timeText">Total time</rowspan>
                <rowspan id="timer"></rowspan>
            </p>
            <!--Show game time area-->
            <p>
                <rowspan id="start" onclick="start()">Start</rowspan>
                <rowspan id="reset" onclick="reset()">Restart</rowspan>
            </p>
            <!--Show control button area-->
        </div>
    </div>
    <script>
        var time=0; //Save the timing time var pause=true; //Set the pause flag, true means pause var set_timer; //Set the timing function var d=new Array(10); //Save the number of the small DIV currently installed in the large DIV var d_direct=new Array(
                [0], //To make the logic simpler, we don't use the first element. We start from index 1 [2,4], //The position where the DIV with the large DIV number 1 can go, for example, the first block can go to position 2,4 [1,3,5],
                [2,6],
                [1,5,7],
                [2,4,6,8],
                [3,5,9],
                [4,8],
                [5,7,9],
                [6,8]
            ); //Save the movable position number of the large DIV number var d_posXY=new Array(
                [0], // Similarly, we do not use the first element [0,0], // The first one represents left, the second one represents top, for example, the position of the first block is let: 0px, top: 0px
                [150,0],
                [300,0],
                [0,150],
                [150,150],
                [300,150],
                [0,300],
                [150,300],
                [300,300]
            ); //The position of the large DIV number d[1]=1;d[2]=2;d[3]=3;d[4]=4;d[5]=5;d[6]=6;d[7]=7;d[8]=8;d[9]=0; //The default order is sorted. There is no large DIV in the ninth block, so it is 0. We use 0 to represent the blank block. function move(id){
            //Move function, we have already talked about var i=1;
            for(i=1; i<10; ++i){
                if( d[i] == id )
                    break;
            }
            //This for loop is to find the position of the small DIV in the large DIV var target_d=0;
            //Save the number where the small DIV can go, 0 means it cannot be moved target_d=whereCanTo(i);
            //Used to find out where the small DIV can go. If it returns 0, it means it cannot be moved. If it can be moved, it returns the position number it can go to if( target_d != 0){
                d[i]=0;
                //Set the current large DIV number to 0, because the current small DIV has been moved, so the current large DIV has no small DIV d[target_d]=id;
                //Set the target large DIV to the number of the clicked small DIV document.getElementById("d"+id).style.left=d_posXY[target_d][0]+"px";
                document.getElementById("d"+id).style.top=d_posXY[target_d][1]+"px";
                //Finally set the position of the clicked small DIV and move it to the position of the target large DIV}
            //If target_d is not 0, it means it can be moved, and target_d is the position number of the large DIV where the small DIV is going to var finish_flag=true;
            //Set the game completion flag, true means completion for(var k=1; k<9; ++k){
                if( d[k] != k){
                    finish_flag=false;
                    break;
                    //If the number saved in the big DIV is different from its own number, it means that not all of them are arranged in order, so set it to false, jump out of the loop, and no need to judge again later, because as long as one does not match, the game is not completed}
            }
            //Starting from 1, traverse the number saved in each large DIV to determine whether it is completed if (finish_flag==true) {
                if(!pause)
                    start();
                alert("congratulation");
            }
            //If true, it means the game is finished. If it is not currently paused, the pause method is called and a prompt box pops up to finish the game.
            //start() is a function that starts and pauses at the same time. If it is paused, it will start after calling it. If it is started, it will pause after calling it.}

        function whereCanTo(cur_div){
            //Function to determine whether it can be moved. The parameter is the number of the large DIV, not the number of the small DIV, because the number of the small DIV has nothing to do with where it can go. The small DIV can move. var j=0;
            var move_flag = false;
            for(j=0; j<d_direct[cur_div].length; ++j){
                //Loop through all possible locations if( d[ d_direct[cur_div][j] ] == 0 ){
                    move_flag=true;
                    break;
                }
                //If the target value is 0, it means there is no small DIV at the target position, then it can be moved and the loop will be exited}
            if(move_flag == true){
                return d_direct[cur_div][j];
            }else{
                return 0;
            }
            //If it can be moved, it returns the number of the target position, otherwise it returns 0, indicating that it cannot be moved}

        // Timing function, executed once every second function timer(){
            time+=1;//One second plus one, the unit is seconds var min=parseInt(time/60);//Convert seconds to minutes, one minute is 60 seconds, the quotient is minutes var sec=time%60;//The remainder is seconds document.getElementById("timer").innerHTML=min+"分"+sec+"秒";//Then update the time and display it }

        //Start pausing function function start(){
            if(pause){
                document.getElementById("start").innerHTML="Pause"; //Set the button text to pause pause=false; //Pause means set to false
                set_timer=setInterval(timer,1000);//Start timing//If it is currently paused, start}else{
                document.getElementById("start").innerHTML="start";
                pause=true;
                clearInterval(set_timer);
            }
        }

        //Reset function function reset(){
            time=0; //Set the time to 0
            random_d(); //Randomly shuffle the blocks if(pause) //If paused, start timing start();
        }

        //Randomly shuffle the blocks. Our idea is to start from the ninth block, randomly generate a number, and then swap the two blocks. function random_d(){
            for(var i=9; i>1; --i){
                var to=parseInt(Math.random()*(i-1)+1); //Generate a random number ranging from 1 to i. It cannot exceed the range because there is no DIV with this id.
                if(d[i]!=0){
                    document.getElementById("d"+d[i]).style.left=d_posXY[to][0]+"px";
                    document.getElementById("d"+d[i]).style.top=d_posXY[to][1]+"px";
                }
                //Set the current DIV position to the randomly generated DIV position if(d[to]!=0){
                    document.getElementById("d"+d[to]).style.left=d_posXY[i][0]+"px";
                    document.getElementById("d"+d[to]).style.top=d_posXY[i][1]+"px";
                }
                //Set the position of the randomly generated DIV to the current DIV's position var tem = d[to];
                d[to]=d[i];
                d[i]=tem;
                //Then swap the numbers saved in the two DIVs}
        }

        // Initialization function, call the reset function when the page is loaded and start over window.onload=function(){
            reset();
        }
    </script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: