九宫格拼图JavaScript学习笔记

九宫格拼图JavaScript学习笔记

---

HTML：主要是一个div id=”game”游戏区，一个div id=”control”控制区
game下又有8个div小正方块

---

CSS：每个小正方形150px，大正方形450px；

---

Javascript： 主要是移动函数move()的操作，找到要移取的方向whereCanTo(cur_div)，

var d_direct=new Array(
[0],//为了逻辑更简单，第一个元素我们不用，我们从下标1开始使用
[2,4],//大DIV编号为1的DIV可以去的位置，比如第一块可以去2,4号位置
[1,3,5],
[2,6],
[1,5,7],
[2,4,6,8],
[3,5,9],
[4,8],
[5,7,9],
[6,8]
 );
 //可以去的方向
var d_posXY=new Array(
[0],//同样，我们不使用第一个元素
[0,0],//第一个表示left,第二个表示top，比如第一块的位置为let:0px,top:0px
[150,0],
[300,0],
[0,150],
[150,150],
[300,150],
[0,300],
[150,300],
[300,300]
);
//大DIV编号的位置
var d=new Array(10);
//保存大DIV当前装的小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;

---

function move(id){
//移动函数，前面我们已将讲了
var i=1;
for(i=1; i