The examples in this article share with you the specific code of JavaScript implementation puzzle game for your reference. The specific content is as follows
<div > <!--The outermostDIV，Used to include the structure inside--> <div > <!--Game area,bigDIVSquares--> <div onclick="move(1)">1</div> <!--SmallDIV，That is8个SmallSquares。Execute when clickedmove()function，Parameters are displayed numbers，这样我们就知道点击了哪个Squares--> <div onclick="move(2)">2</div> <div onclick="move(3)">3</div> <div onclick="move(4)">4</div> <div onclick="move(5)">5</div> <div onclick="move(6)">6</div> <div onclick="move(7)">7</div> <div onclick="move(8)">8</div> </div> <div > <!--Game control area--> <p> <rowspan >Total time</rowspan> <rowspan ></rowspan> </p> <!--Show game time area--> <p> <rowspan onclick="start()">start</rowspan> <rowspan onclick="reset()">Come again</rowspan> </p> <!--Display control button area--> </div> </div>
CSS:
*{
padding: 0;
margin: 0;
border: 0;
}
/* * is a wildcard character, which removes the default style for all elements, because some browsers will add some styles by default, which may cause problems with the layout */
body{
width: 100%;
height: 100%;
}
/* Set 100% height and width to the body, so that it will automatically adapt according 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 elements. Set it to 620px width and 450px height. This size can be set to be larger, but it cannot be small. At least it must contain all the elements in it */
#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, and this size is calculated, depending on the size of your small squares. Here we set the size of the small square to 150px 150px, so this 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, positioning as absolute positioning, so changing the position will not affect the position of other elements. Both width and height are 149px. Note that we also set box-shadow:1px 1px 2px #777;
It also has border shadows, so 149px plus border 1px, its total width is 150px. The following transition: 0.3s is the setting transition time, which is the property of css3, which will make the property change render the transition animation, so
When we change the position of the block, it will have an animation. We don't have to write the animation function ourselves, this time it will make you crazy*/
#game div:hover{
color: #ffe171;
}
/*Set a mouse hover animation for the square. When the mouse hoveres over the element, the attribute above will be replaced with the attribute here, and after moving it away, it will become the original. Here we change the font color*/
#control{
width: 150px;
height: 450px;
display: inline-block;
float: right;
}
/*Control area, display:inline-block will allow the element to show the characteristics of block elements, so that it can change the size, and will also have the characteristics of elements within the line, so that it will not occupy a row space. float:right will allow the element to float to the right*/
#control rowspan{
height: 25px;
font-size: 20px;
color: #222;
margin-top: 10px;
}
/*Set the same style of the control area button*/
#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 to the start button. cursor:pointer attribute allows the mouse to be moved to the element to display different mouse shapes. Pointer is a 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;/*Floating Properties*/
box-shadow: 2px 2px 5px #4c98f5;/*Box Shadow*/
text-align: center;/*Text center*/
cursor: pointer;
}
/*Set properties for 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 each small block in order in advance*/
JS：
var time=0; //Save the time var pause=true; //Set the whether to 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],//For the sake of simpler logic, we don't use the first element, we start with subscript 1 [2,4],//The location where the DIV with the large DIV number 1 can be used, such as the first block can be used to go to the location 2 and 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 and 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 location 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 is sorted in order. The ninth block of the big DIV does not have it, so it is 0. We use 0 to represent blank blocks. function move(id){
//Move function, we'll talk about it before var i=1;
for(i=1; i<10; ++i){
if( d[i] == id )
break;
}
//This for loop is to find out the position of the small DIV in the large DIV var target_d=0;
//Save the number that can be used in the small DIV, 0 means that it cannot be moved target_d=whereCanTo(i);
// Used to find the position where the small DIV can go. If it returns 0, it means that it cannot move. If it can move, it returns the position number that can go. if( target_d != 0){
d[i]=0;
//Set the current large DIV number to 0, because the current small DIV has been removed, so the current large DIV has not installed a small DIV d[target_d]=id;
//Set the target large DIV to the number of the clicked small DIV ("d"+id).=d_posXY[target_d][0]+"px";
("d"+id).=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 location number of the large DIV that the small DIV wants to go 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 by a large DIV is different from its own number, it means that not all are sorted in order. Then set to false to jump out of the loop. There is no need to judge later, because as long as one does not match, the game will not be completed. }
}
// Start from 1, traverse the number saved by 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 completed. If there is no pause at present, the pause Korean style is called, and a prompt box pops up to complete the game. //start() function is the function that starts and pauses. If it is paused, it will start after being called. If it is started, it will pause after being called. }
function whereCanTo(cur_div){
//Judge whether the function is movable. 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 will move. var j=0;
var move_flag=false;
for(j=0; j<d_direct[cur_div].length; ++j){
//Change all possible locations to go through if( d[ d_direct[cur_div][j] ] == 0 ){
move_flag=true;
break;
}
//If the target value is 0, it means that the target position has no small DIV installed, then it can move and jump out of the loop }
if(move_flag == true){
return d_direct[cur_div][j];
}else{
return 0;
}
// Can be moved, return the number of the target position, otherwise return 0, indicating that it is not movable }
//Timed function, executed once every second function timer(){
time+=1;//A second plus one, the unit is seconds var min=parseInt(time/60);//Convert seconds into minutes, one minute and 60 seconds, and the quotient is minutes var sec=time%60;//Get the rest is seconds ("timer").innerHTML=min+"point"+sec+"Second";// Then update the time and display it }
//Start the pause function function start(){
if(pause){
("start").innerHTML="pause";//Set the button text to pause pause=false;//Pause means setting to false set_timer=setInterval(timer,1000);//Start timer //If it is currently paused, start }else{
("start").innerHTML="start";
pause=true;
clearInterval(set_timer);
}
}
//Reset the function function reset(){
time=0;//Set time to 0 random_d();//Randomly disrupt the function with the block if(pause)//If paused, start timing start();
}
// Randomly disrupt the block function. Our idea is to start from the ninth piece, randomly generate a number, and then they can adjust the two pieces together. function random_d(){
for(var i=9; i>1; --i){
var to=parseInt(()*(i-1)+1);//Create a random number, the range is 1 to i, and cannot be exceeded because there is no DIV with this id if(d[i]!=0){
("d"+d[i]).=d_posXY[to][0]+"px";
("d"+d[i]).=d_posXY[to][1]+"px";
}
//Set the current DIV position to the position of the randomly generated DIV if(d[to]!=0){
("d"+d[to]).=d_posXY[i][0]+"px";
("d"+d[to]).=d_posXY[i][1]+"px";
}
//Set the position of the randomly generated DIV to the current DIV position var tem=d[to];
d[to]=d[i];
d[i]=tem;
// Then compare the numbers of the two DIVs saved. }
}
//Initialize the function, call the reset function when the page is loaded, and start again =function(){
reset();
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.