利用原生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，原生就够了！
原文地址：https://www.cnblogs.com/bacydm/p/9786086.html
时间： 2024-10-13 09:10:50