Implementation of jigsaw puzzle by javascript
- 2021-10-25 05:50:29
- OfStack
This article example for everyone to share javascript to achieve the specific code of jigsaw puzzle, for your reference, the specific content is as follows
<div id="container">
<!-- The outermost DIV Used to contain the structure inside -->
<div id="game">
<!-- Game area , Big DIV Square -->
<div id="d1" onclick="move(1)">1</div>
<!-- Small DIV That is, 8 A small square. Execute when clicked move() Function, the parameter is the displayed number, so that we know which box 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 the game time area -->
<p>
<rowspan id="start" onclick="start()"> Begin </rowspan>
<rowspan id="reset" onclick="reset()"> Start over </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 it by default 1 Some styles, which may cause problems with the layout */
body{
width: 100%;
height: 100%;
}
/* To body Settings 100% The height and width of the, which 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;
}
/* That wraps all the elements DIV , set it for him 620px Width sum of 450px This size can be set to be larger, but not smaller, at least 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 from the game area DIV This size is calculated, depending on the size of your small square. Here we set the size of the small square to 150px 150px So this size is 150px*3 , for 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, which is positioned as absolute, so that changing the position will not affect the position of other elements. Width and height are all 149px . Attention, we also set up box-shadow:1px 1px 2px #777 ;
It also has a border shadow, so 149px Add a border 1px And its total width is 150px Below transition : 0.3s Is to set the transition time, which is css3 Property, which will make property changes render transition animation, so
When we change the position of the square, it will have 1 Animation, we don't have to write animation functions ourselves, this time it makes you crazy */
#game div:hover{
color: #ffe171;
}
/* Set the mouse hover animation for the box. When the mouse hovers over the element, it will replace the above attribute with the attribute here, and it will change to the original after moving away. 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 appear as a block element, so that it can be changed in size, and will also have the characteristics of an inline element, so that it will not occupy 1 Row space, float:right Let the element float to the right */
#control rowspan{
height: 25px;
font-size: 20px;
color: #222;
margin-top: 10px;
}
/* Set the common style of control 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;
}
/* To start Button to set properties. cursor:pointer Property causes a different mouse shape to appear when the mouse moves over the element, pointer It's a hand type */
#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;/* Fillet attribute */
box-shadow: 2px 2px 5px #4c98f5;/* Box shadow */
text-align: center;/* Text centered */
cursor: pointer;
}
/* To Reset Button setting properties */
#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 square in order in advance */JS:
var time=0; //保存定时时间
var pause=true; //设置是否暂停标志，true表示暂停
var set_timer; //设置定时函数
var d=new Array(10); //保存大DIV当前装的小DIV的编号
var d_direct=new Array(
[0],//为了逻辑更简单，第1个元素我们不用，我们从下标1开始使用
[2,4],//大DIV编号为1的DIV可以去的位置，比如第1块可以去2,4号位置
[1,3,5],
[2,6],
[1,5,7],
[2,4,6,8],
[3,5,9],
[4,8],
[5,7,9],
[6,8]
); //保存大DIV编号的可移动位置编号
var d_posXY=new Array(
[0],//同样，我们不使用第1个元素
[0,0],//第1个表示left,第2个表示top，比如第1块的位置为let:0px,top:0px
[150,0],
[300,0],
[0,150],
[150,150],
[300,150],
[0,300],
[150,300],
[300,300]
); //大DIV编号的位置
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; //默认按照顺序排好，大DIV第9块没有，所以为0，我们用0表示空白块
function move(id){
//移动函数，前面我们已将讲了
var i=1;
for(i=1; i<10; ++i){
if( d[i] == id )
break;
}
//这个for循环是找出小DIV在大DIV中的位置
var target_d=0;
//保存小DIV可以去的编号，0表示不能移动
target_d=whereCanTo(i);
//用来找出小DIV可以去的位置，如果返回0，表示不能移动，如果可以移动，则返回可以去的位置编号
if( target_d != 0){
d[i]=0;
//把当前的大DIV编号设置为0，因为当前小DIV已经移走了，所以当前大DIV就没有装小DIV了
d[target_d]=id;
//把目标大DIV设置为被点击的小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";
//最后设置被点击的小DIV的位置，把它移到目标大DIV的位置
}
//如果target_d不为0，则表示可以移动，且target_d就是小DIV要去的大DIV的位置编号
var finish_flag=true;
//设置游戏是否完成标志，true表示完成
for(var k=1; k<9; ++k){
if( d[k] != k){
finish_flag=false;
break;
//如果大DIV保存的编号和它本身的编号不同，则表示还不是全部按照顺序排的，那么设置为false，跳出循环，后面不用再判断了，因为只要1个不符，就没完成游戏
}
}
//从1开始，把每个大DIV保存的编号遍历1下，判断是否完成
if(finish_flag==true){
if(!pause)
start();
alert("congratulation");
}
//如果为true，则表示游戏完成，如果当前没有暂停，则调用暂停韩式，并且弹出提示框，完成游戏。
//start()这个函数是开始，暂停1起的函数，如果暂停，调用后会开始，如果开始，则调用后会暂停
}
function whereCanTo(cur_div){
//判断是否可移动函数，参数是大DIV的编号，不是小DIV的编号，因为小DIV编号跟可以去哪没关系，小DIV是会动的
var j=0;
var move_flag=false;
for(j=0; j<d_direct[cur_div].length; ++j){
//把所有可能去的位置循环遍历1下
if( d[ d_direct[cur_div][j] ] == 0 ){
move_flag=true;
break;
}
//如果目标的值为0，说明目标位置没有装小DIV，则可以移动，跳出循环
}
if(move_flag == true){
return d_direct[cur_div][j];
}else{
return 0;
}
//可以移动，则返回目标位置的编号，否则返回0，表示不可移动
}
//定时函数，每1秒执行1次
function timer(){
time+=1;//1秒钟加1，单位是秒
var min=parseInt(time/60);//把秒转换为分钟，1分钟60秒，取商就是分钟
var sec=time%60;//取余就是秒
document.getElementById("timer").innerHTML=min+"分"+sec+"秒";//然后把时间更新显示出来
}
//开始暂停函数
function start(){
if(pause){
document.getElementById("start").innerHTML="暂停";//把按钮文字设置为暂停
pause=false;//暂停表示设置为false
set_timer=setInterval(timer,1000);//启动定时
//如果当前是暂停，则开始
}else{
document.getElementById("start").innerHTML="开始";
pause=true;
clearInterval(set_timer);
}
}
//重置函数
function reset(){
time=0;//把时间设置为0
random_d();//把方块随机打乱函数
if(pause)//如果暂停，则开始计时
start();
}
//随机打乱方块函数，我们的思路是从第9块开始，随机生成1个数，然后他们两块对调1下
function random_d(){
for(var i=9; i>1; --i){
var to=parseInt(Math.random()*(i-1)+1);//产生随机数，范围为1到i，不能超出范围，因为没这个id的DIV
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";
}
//把当前的DIV位置设置为随机产生的DIV的位置
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";
}
//把随机产生的DIV的位置设置为当前的DIV的位置
var tem=d[to];
d[to]=d[i];
d[i]=tem;
//然后把它们两个的DIV保存的编号对调1下
}
}
//初始化函数，页面加载的时候调用重置函数，重新开始
window.onload=function(){
reset();
}