原生js拼图，封装，组件化

利用原生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;// 块个数
  7         if (!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         var ranodmArrKey = 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) {
 24                 case 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，原生就够了！

posted @ 2018-10-14 13:22  不爱吃鱼的喵~  阅读(965)  评论(0)  编辑  收藏  举报