利用原生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 false100 ????????????????}101 ????????????}102 ????????????return true103 ????????} ?????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);// 传入行数与dom30 ????????}31 32 ????</script>33 </body>34 </html>一开始把这个只作为jQuery的扩展插件，后来发现不怎么用得上jQuery的东西，主要还是canvas，就没必要用jquery，原生就够了！
原生js拼图，封装，组件化
原文地址：https://www.cnblogs.com/bacydm/p/9786086.html