js实现九宫格拼图游戏

效果如下：

代码如下：

！doctype html head metacarset=' utf-8 ' title拼图/title style * { padd : 0；margin : 0；border : 0；}/* *是一个通配符，它删除了所有元素的默认样式，因为有些浏览器默认会添加一些样式，这可能会给布局带来问题*/body { width : 100%；高度： 100%；}/*将主体的高度和宽度设置为100%，这将自动适应*/# container { position : relative；宽度： 620 px；高度： 450 px；margin: 0 auto边距-top : 100 px；border-radius : 1px；}/*这是一个包装所有元素的DIV。设置为620px宽，450px高。这个尺寸可以设置得更大，但不能更小。至少它必须包含*/# game { position : absolute；宽度： 450 px；高度： 450 px；border-radius : 5px；display:内联块；背景-color : # FFE 171；box-shadow : 0 10px # FFE 171；}/*这是游戏区的DIV。这个尺寸是计算出来的，取决于你的小正方形的大小。这里我们把小方块的大小设置为150px 150px，那么这个大小就是150px*3，也就是450 px */# game div { position : absolute；宽度： 149 px；高度： 149像素；box-shadow : 1px 1px 2px # 777；背景-color : # 20a6fa；color:白色；文本对齐：中心；font-size : 150 px；线高： 150 px；cursor:指针；-web kit-transit : 0.3s；/*浏览器前缀，兼容其他浏览器chrome */-moz-transition : 0.3s；/* Firefox */-ms-transit : 0.3s；/* ie */-o-transit : 0.3s；/* opera */transit : 0.3s；}/*这是小方块的大小。定位是绝对的，所以改变位置不会影响其他元素的位置。宽度和高度均为149px。注意，我们还设置了box-shadow :1 px1 p2px # 777；它也有边框阴影，所以149px加上边框1px，它的总宽度是150px。下面这个转场：0.3s是设置转场时间，这是css3的属性，会让属性发生变化，呈现转场动画，所以当我们改变方块的位置时，它会有一个动画，这样就不用自己写动画功能了，这次会让你抓狂*/# Game div : Hover { Color 3360 #。}/*设置框的鼠标悬停动画。当鼠标悬停在元素上时，上面的属性会被替换为这里的属性，删除后会变成原来的属性。这里我们更改字体颜色*/# control { width : 150 px；高度： 450 px；display:内联块；向右浮动：}/*控制区域，display:inline-block会让元素展现block元素的特性，这样大小可以改变，同时也会有in-line元素的特性，这样就不会占用一行空间，float:right会让元素向右浮动*/# control row span { height : 25px；font-size : 20px；color: # 222margin-top : 10px；}/*设置控制区的常用按钮样式*/# start { display : inline-block；font-size : 28px；宽度： 100 px；高度： 28px；背景-color : # 20a6fa；color: # ffe171text-shadow : 1px 1px 2px # FFE 171；border-radius : 5px；box-shadow : 2px 2px 5px # 4c 98 F5；文本对齐：中心；cursor:指针；}/*设置开始按钮的属性。

光标：指针属性让鼠标移到元素上面时会显示不同的鼠标形状，指针是手型*/# reset { display : inline-block；font-size : 28px宽度： 100像素；高度： 28px背景-颜色： # 20a6facolor : # FFE 171 text-shadow : 1px 1px 2px # FFE 171；/*字体阴影*/边框-半径： 5px/*圆角属性*/盒影： 2px 2px 5px # 4c 98 F5/*盒子阴影*/text-align:居中；/*文字居中*/cursor:指针；} /*给重置按钮设置属性*/# D1 {左： 0px} # D2 { left : 150 px } # D3 { left : 300 px } # D4 { top : 150 px } # D5 { top : 150 px left : 150 px } # D6 { top : 150 px；left : 300 px } # D7 { top : 300 px } # D8 { left : 150 pxtop : 300 px }/*这是预先给每个小方块按照顺序排好位置*//样式/头体div id=' container '！-最外面的DIV，用来包含里面的结构- div id='game '！-游戏区，大差异方块-div id=' D1 ' onclick=' move(1)' 1/div！-小DIV，也就是8个小方块。

点击时执行move()函数，参数为显示的数字。这样，我们就知道单击了哪个方块-div id=' D2 ' onclick=' move(2)' 2/div id=' D3 ' onclick=' move(3)' 3/div id=' D4 ' onclick=' move(4)' 4/div id=' D5 ' 5/div id=' D6 ' onclick=' move(6)' 6/div id=' D7 ' onclick=' move(7)' 7/div id=' D8 ' onclick=' move(8)' 8/div/div id='-游戏控制区- p rowspan id='timeText '总运行时间/row span row span id=' timer '/row span/p！-显示游戏时间区域-p row span id=' start ' onclick=' start()' start/row span row span id=' reset ' onclick=' reset()'重新开始/rowspan /p！-显示控制按钮区域-/div/div脚本vartime=0；//保存计时时间var pause=true//设置是否暂停标志，true表示暂停var set _ timer//设置定时函数var d=new Array(10)；//保存当前安装在大DIV中的小DIV的编号var d_direct=new Array([0]，//为了逻辑更简单，我们不需要第一个元素，我们从下标1开始使用[2，4]，//大DIV编号为1的DIV可以去的位置，例如第一个块可以去位置2和4 [1，3，5]，[2]//保存可移动的位置编号var d_posXY=new Array([0]，//同理， 我们不用第一个元素[0，0]，//第一个代表左，第二个代表顶，比如第一块的位置是let 33600 px和top :0 px [150，0]，[ [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的第九块不存在，所以是0。我们用0来表示空白块函数move(id){ //来移动函数。我们已经讨论过var I=1；for(I=1；i10I){ if(d[I]==id)break；}//这个for循环就是找出小DIV在大DIV中的位置。var target _ d=0；//保存小DIV可以去的数字，0表示target_d=whereCanTo(i)不能移动；//用来查找一个小DIV可以去哪里。如果返回0，则表示无法移动。如果它可以移动，它将返回它可以移动的位置的编号，如果(target_d！=0){ d[I]=0；//将当前大DIV号设置为0，因为当前小DIV已经去掉，所以当前大DIV中没有小DIV。d[target _ d]=id；//将目标大DIV设置为被点击的小DIV文档的编号. 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//设置游戏是否结束。(var k=1；K9；k){ if(d[k]！=k){ finish _ flag=false；打破；//如果大DIV保存的号码和自己的号码不一样，说明没有全部按顺序排列，所以设置为false，跳出循环，以后不需要判断，因为一个不匹配，游戏就完不成。} }//从1开始，遍历各大DIV保存的数字，判断是否完成if(finish_flag==true){ if(！暂停)start()；警惕('祝贺')；}//如果是真的，说明游戏结束。如果目前没有暂停，就叫暂停韩式，弹出提示框结束游戏。

//start()这个函数是一个同时启动和暂停的函数。如果暂停，它将在调用后开始。如果启动会在调用canto(cur _ DIV){//所在的} function后暂停，判断该函数是否可以移动。参数是大div的个数，不是小DIV的个数，因为小DIV的个数和你能去哪里无关，小DIV是一个可移动的var j=0；var move _ flag=falsefor(j=0；jd_direct[cur_div]。长度；J){ //如果(d[d _ direct[cur _ div][j]==0){ move _ flag=true，则循环遍历所有可能的位置；打破；}//如果目标的值为0，说明目标位置没有配备小DIV，可以移动跳出循环} if(move _ flag==true){ return d _ direct[cur _ DIV][j]；} else { return 0；}//如果可以移动，返回目标位置的编号；否则，返回0，这意味着它不能被移动。}//每秒执行函数timer(){ time=1；//一秒加一，单位为秒var min=parseInt(时间/60)；//将秒转换为分钟，一分钟为60秒，商为分钟var sec=时间；//剩余部分是第二个文档。getelementbyid ('timer ')。innerhtml=分钟秒秒；//然后显示时间更新}//开始暂停函数函数start(){ if(pause){ document . getelementbyid(' start ')。innerhtml=' pause//将按钮文本设置为pause pause=false//pause表示设置为false set _ timer=set interval(timer，1000)；//开始计时//如果当前已暂停，请启动} else { document . getelementbyid(' start ')。innerhtml=' startpause=trueclearInterval(set _ timer)；}}//reset函数reset(){ time=0；//将时间设置为0 random _ d()；//将块随机打乱成函数if(pause)//如果pause，开始计时start()；}//随机打乱块功能。我们的想法是从第九个块开始，随机生成一个数字，然后他们切换函数random _ d(){ for(var I=9；i1；-I){ var to=ParSeint(Math . random()*(I-1)1)；//生成随机数，范围从1到I，不能超过，因为没有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；}//如果(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保存的数字} }//初始化函数，加载页面时调用reset函数，重启window . onload=function(){ reset()；}/脚本/正文/html设计思路：

我们需要做的是设置一个大DIV把小DIV包在里面，然后在里面设置八个小DIV，从1开始编号。在右侧设置两个按钮，点击开始计时，完成拼图后停止计时，弹出方框表示完成。重启按钮是指当用户觉得目前很难的时候，点击重启开始一个新的拼图，把所有方块打乱顺序，然后开始计时。我们的重点是当鼠标点击其中一个框时，判断当前框是否可以移动，如果可以移动，就移动到相应的位置，如果不能移动，就什么都不做。移动一块后，判断拼图是否完成。我们把那个大DIV想象成一个盒子，它有9个位置，从1开始，从9开始编号，它们的位置和编号不会改变。把里面的八个小草皮想象成八个小盒子，左右置顶控制它们的位置。每个小DIV都从1到8编号。他们的位置可以随意改变。因此，当小DIV和大DIV的数字都重合时，拼图就完成了。

所以只有一点。这就是如何判断它是否可移动。这也很简单。我们设置一个一维数组变量来存储大DIV中小DIV的个数。如果大DIV没有小方块，也就是表面是空白块，那么设置为0。如果当前大DIV有小DIV，则设置为小DIV的编号。然后，设置一个二维数组变量来保存大DIV的可移动数。也就是保存这个大DIV的所有可用位置。比如大DIV数是2，只能往1、3、5三个方向移动，再比如5，可以往2、4、6、8四个方向移动。我们循环这个变量。如果它在对应的方向上没有平方，即值为0，那么它就可以向这个方向移动。

提示：由于实验中使用的随机置乱块的算法非常简单，但存在bug，生成的序列有50%的概率无法恢复，此时只能点击重新开始。

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！