js实现数字拼图_javascript技巧_

                 
                         
1
             
2
             
3
             
4
             
5
             
6
             
7
             
8
         
         
                         
                 总用时：                              
                         
                 开始                 重来             
                     

* {             padding: 0;             margin: 0;             border: 0;         }                  body {             width: 100%;             height: 100%;         }                  #container {             position: relative;             width: 620px;             height: 450px;             margin: 0 auto;             margin-top: 100px;             border-radius: 1px;         }                  #game {             position: absolute;             width: 450px;             height: 450px;             border-radius: 5px;             display: inline-block;             background-color: #ffe171;             box-shadow: 0 0 10px #ffe171;         }                  #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;             transition: 0.3s;         }                  #game div:hover {             color: #ffe171;         }                  #control {             width: 150px;             height: 450px;             display: inline-block;             position: absolute;             top: 0;             right: 0;         }                  #control button {             height: 25px;             font-size: 20px;             color: #222;             margin-top: 10px;         }                  #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 让鼠标移到元素上面显示不同的鼠标形状，pointer是手型 */             cursor: pointer;         }                  #reset {             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;         }                  #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;         }

var time = 0; //添加暂停判断 var pause = true; var set_timer;  //创建编号，不使用第一个元素 var d = new Array(10); for (var i = 1; i < 9; i++) {             d[i] = i;         }         d[9] = 0;         //大div编号可移动的位置         var d_direct = new Array(             [0], [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编号的位置[left,top]         var d_posXY = new Array(             [0], [0, 0], [150, 0], [300, 0], [0, 150], [150, 150], [300, 150], [0, 300], [150, 300], [300, 300]         );             var game = document.querySelectorAll('#game>div');         for (var i = 0; i < game.length; i++) {             var j = i + 1;             game[i].setAttribute('index', j);             game[i].addEventListener('click', function(e) {                 move(e, e.target.getAttribute('index'));             });         }           //移动         function move(e, id) {             //查找小div在大div中的位置             var i = 1;             for (i = 1; i < 10; i++) {                 if (d[i] == id) {                     break;                 }             }             //查找小div可移动的位置，0则无法移动             var target_d = 0;             target_d = whereCanTo(i);               //判断当前被点击的小div是否可移动             if (target_d != 0) {                 //设置当前大div编号为0                 d[i] = 0;                 //将目标大div编号设置为被点击的小div编号                 d[target_d] = id;                 //设置被点击小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';             }             //判断游戏是否完成             var finish_flag = true;             for (var k = 1; k < 9; k++) {                 if (d[k] != k) {                     finish_flag = false;                     break;                 }             }             if (finish_flag == true) {                 if (!pause) {                     start();                     alert('bingo congratulation!');                 }             }         }           //查找并返回小div可以移动的编号         function whereCanTo(cur_div) {             var j = 0;             var move_flag = false;             for (j = 0; j < d_direct[cur_div].length; j++) {                 if (d[d_direct[cur_div][j]] == 0) {                     move_flag = true;                     break;                 }             }               if (move_flag == true) {                 return d_direct[cur_div][j];             } else {                 return 0;             }         }           //设置计时         function timer() {             time += 1;             var min = parseInt(time / 60);             var s = time % 60;             document.getElementById('timer').innerHTML = min + '分' + s + '秒';         }           //开始暂停         var start = document.querySelector('#start');         start.addEventListener('click', sta);           function sta() {             if (pause) {                 start.innerHTML = '暂停';                 pause = false;                 set_timer = setInterval(timer, 1000);             } else {                 start.innerHTML = '开始';                 pause = true;                 clearInterval(set_timer);             }         }           //重置游戏         var reset = document.querySelector('#reset');         reset.addEventListener('click', res);           function res() {             time = 0;             random_d();             if (pause) {                 sta();             }         }           //随机打乱         function random_d() {             for (var i = 9; i > 1; i--) {                 var to = parseInt(Math.random() * (i - 1) + 1);                 //设置当前div为随机产生的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 temp = d[to];                 d[to] = d[i];                 d[i] = temp;             }         }           //初始化         window.addEventListener('load', res);