原生js拼圖，封裝，組件化
阿新 • • 發佈：2018-10-14
itl console proto cal anti -c fun ping 立即執行函數
利用原生js實現拼圖遊戲，實現封裝，變為插件，組件化，傳入參數調用，
使用立即執行函數，將變量私有化，不汙染全局，
利用canvas展示效果，減少dom操作，不影響HTML結構；
1 var myPingTu = (function(){ 2 function init(row_i,dom){ 3 var myCanvas = dom; 4 var row = row_i || 3,// 行列數 5 arr = [], 6 num = row * row;// 塊個數 7if (!myCanvas || !myCanvas.getContext) { return; } 8 myCanvas.width = row * 100 + 10 ; 9 myCanvas.height = row * 100 + 10 ; 10 var ctx = myCanvas.getContext(‘2d‘); 11 for(var i = 0; i < num; i++){ 12 arr.push(i); 13 } 14 varranodmArrKey = true; 15 ranodmArr(); 16 createMap(); 17 18 window.onkeydown = function (event){ 19 var e = event || window.event; 20 move(e.keyCode); 21 } 22 function move(n){ 23 switch (n) { 24case 38:{ 25 if(arr.indexOf(num -1) >= row){ 26 exchange(arr.indexOf(num -1),arr.indexOf(num - 1) - row); 27 } 28 return false; 29 } 30 break; 31 case 40:{ 32 if(arr.indexOf(num -1) < num-row){ 33 exchange(arr.indexOf(num -1),arr.indexOf(num - 1) + row); 34 } 35 return false; 36 } 37 break; 38 case 37:{ 39 if(arr.indexOf(num -1) % row != 0){ 40 exchange(arr.indexOf(num -1),arr.indexOf(num - 1) - 1); 41 } 42 return false; 43 } 44 break; 45 case 39:{ 46 if(arr.indexOf(num -1) % row != row-1){ 47 exchange(arr.indexOf(num -1),arr.indexOf(num - 1) + 1); 48 } 49 return false; 50 } 51 break; 52 default: 53 break; 54 } 55 } 56 function ranodmArr(){ 57 var j; 58 for(var i = 0; i < num * num-1; i ++){ 59 j = parseInt(Math.random()*4) + 37; 60 move(j); 61 } 62 ranodmArrKey = false; 63 } 64 function exchange(proto,target){ 65 var temp = arr[target]; 66 arr[target] = arr[proto]; 67 arr[proto] = temp; 68 if(ranodmArrKey){return false}; 69 createMap(); 70 if(isWin()){ 71 console.log("win"); 72 }; 73 } 74 75 function createMap(){ 76 for(var i = 0;i < row; i++){ 77 for(var j = 0; j < row ;j ++) 78 createSquare(i,j,arr[i + j * row]); 79 } 80 } 81 function createSquare(x,y,text){ 82 ctx.beginPath(); 83 ctx.fillStyle = ‘antiquewhite‘; 84 ctx.fillRect((10 + 100 * x), (10 + 100 * y), 90, 90); 85 ctx.fillStyle = ‘red‘; 86 ctx.font = "50px bolder"; 87 ctx.textAlign="center"; 88 if(text != num -1){ 89 ctx.fillText(text + 1 ,(55 + 100 * x), (75 + 100 * y)); 90 }else{ 91 ctx.fillText(‘:)‘ ,(55 + 100 * x), (75 + 100 * y)); 92 } 93 ctx.stroke(); 94 ctx.beginPath(); 95 } 96 function isWin(){ 97 for(var i = 0 ; i < arr.length; i ++){ 98 if(i != arr[i]){ 99 return false 100 } 101 } 102 return true 103 } 104 } 105 return function(row,dom){ 106 init(row,dom);// 自定義難度和canvas的dom對象 107 } 108 }())
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <!-- <script src="../jquery.min.js"></script> --> 8 <script src="pingtu.js"></script> 9 <style> 10 *{ 11 margin: 0; 12 padding: 0; 13 } 14 #pingtu { 15 border: 1px solid silver; 16 position: relative; 17 margin-top: 20px; 18 left: 50%; 19 transform: translateX(-50%); 20 } 21 </style> 22 <title>Document</title> 23 </head> 24 <body> 25 <canvas id="pingtu"></canvas> 26 <script> 27 window.onload = function(){ 28 var aaa = document.getElementById("pingtu"); 29 myPingTu(5,aaa);// 傳入行數與dom 30 } 31 32 </script> 33 </body> 34 </html>
一開始把這個只作為jQuery的擴展插件，後來發現不怎麽用得上jQuery的東西，主要還是canvas，就沒必要用jquery，原生就夠了！
原生js拼圖，封裝，組件化