微信小程序使用canvas2d实现拼图游戏

  1 var num=[
  2   ['00','01','02'],
  3   ['10','11','12'],
  4   ['20','21','22']
  5 ];
  6 var w=100;
  7 var url='/images/pic01.jpg';
  8 Page({
  9   data: {
 10     isWin:false
 11   },
 12   onLoad(options) {
 13     url='/images/'+options.level;
 14     this.setData({url:url});
 15     
 16     this.shuffle();
 17     this.drawCanvas();
 18   },
 19   shuffle:function(){
 20     num=[
 21       ['00','01','02'],
 22       ['10','11','12'],
 23       ['20','21','22']
 24     ];
 25     var row=2;
 26     var col=2;
 27     for (var i = 0; i < 100; i++) {
 28       var direction=Math.round(Math.random()*3);
 29       if(direction==0){
 30         if(row!=0){
 31           num[row][col]=num[row-1][col]
 32           num[row-1][col]='22';
 33           row-=1;
 34         }
 35       }else if (direction==1){
 36         if(row!=2){
 37           num[row][col]=num[row+1][col]
 38           num[row+1][col]='22';
 39           row+=1;
 40         }
 41       }else if (direction==2){
 42         if(col!=0){
 43           num[row][col]=num[row][col-1]
 44           num[row][col-1]='22';
 45           col-=1;
 46         }
 47       }else if (direction==3){
 48         if(col!=2){
 49           num[row][col]=num[row][col+1]
 50           num[row][col+1]='22';
 51           col+=1;
 52         }
 53       }
 54     }
 55   },
 56   drawCanvas:function(){
 57     //新方法
 58     const query = wx.createSelectorQuery(); 
 59     query.select('#my-canvas')
 60     .fields({ node: true, size: true }).exec((res) => {
 61           const canvas = res[0].node;
 62           const ctx = canvas.getContext('2d');
 63           ctx.clearRect(0,0,300,300);
 64           
 65           //生成图片
 66           for (let i = 0; i < 3; i++) {
 67             for (let j = 0; j < 3; j++) {
 68               if(num[i][j]!='22'){
 69                 let row=parseInt(num[i][j]/10);
 70                 let col=num[i][j]%10;
 71 
 72                 const img = canvas.createImage();
 73                 img.src=url;
 74                 img.onload = () => {
 75                   ctx.drawImage(img, col*w, row*w, w, w, j*w, i*w/2, w, 50);
 76                 }
 77 
 78               }
 79             }
 80           }
 81         })
 82   },
 83   //移动拼图
 84   touchBox:function(e){
 85     if(this.data.isWin) return;
 86     var x=e.changedTouches[0].x;
 87     var y=e.changedTouches[0].y;
 88 
 89     var row=parseInt(y/w);
 90     var col=parseInt(x/w);
 91 
 92     if(num[row][col]!='22'){
 93       this.moveBox(row,col);
 94     }
 95     this.drawCanvas();
 96     if(this.Win()){
 97       wx.createSelectorQuery()
 98       .select('#my-canvas')
 99       .fields({ node: true, size: true })
100       .exec(res=>{
101         let ctx2 = res[0].node.getContext('2d');
102         let canvas2 = res[0].node;
103         // 通过设备的像素比等重新绘制宽高
104         const dpr = wx.getSystemInfoSync().pixelRatio
105           canvas2.width = res[0].width * dpr
106           canvas2.height = res[0].height * dpr
107           ctx2.scale(dpr, dpr)
108           ctx2.font="30px Arial";
109           ctx2.fillText("笨蛋",10,150);
110       })
111 
112     }
113   },
114   //具体移动函数
115   moveBox:function(i,j){
116     if(i>0){
117       //方块在上边
118       if(num[i-1][j]=='22'){
119         num[i-1][j]=num[i][j];
120         num[i][j]='22';
121         return;
122       }
123     }
124     if(i<2){
125       //方块在下边
126       if(num[i+1][j]=='22'){
127         num[i+1][j]=num[i][j];
128         num[i][j]='22';
129         return;
130       }
131     }
132     if(j>0){
133       //方块在左边
134       if(num[i][j-1]=='22'){
135         num[i][j-1]=num[i][j];
136         num[i][j]='22';
137         return;
138       }
139     }
140     if(j<2){
141       //方块在左边
142       if(num[i][j+1]=='22'){
143         num[i][j+1]=num[i][j];
144         num[i][j]='22';
145         return;
146       }
147     }
148   },
149   Win:function(){
150     for (let t = 0; t < 3; t++) {
151       for (let v = 0; v < 3; v++) {
152         if(num[t][v]!=t*10+v){
153           return false;
154         }
155       }
156     }
157     return true;
158   },
159   reset:function(){
160     this.shuffle();
161     this.drawCanvas();
162   },
163   help:function(){
164     num=[
165       ['00','01','02'],
166       ['10','11','12'],
167       ['20','22','21']
168     ];
169     this.Win();
170     this.drawCanvas();
171   },
172 
173   //生命周期函数--监听页面初次渲染完成
174   onReady() {},
175
176   //生命周期函数--监听页面显示
177   onShow() {},
178 
179   //生命周期函数--监听页面隐藏
180   onHide() {},
181 
182   //生命周期函数--监听页面卸载
183   onUnload() {},
184 
185   //页面相关事件处理函数--监听用户下拉动作
186   onPullDownRefresh() {},
187 
188   //页面上拉触底事件的处理函数
189   onReachBottom() {},
190 
191   //用户点击右上角分享
192   onShareAppMessage() {}
193 })

ctx.drawImage(img, col*w, row*w, w, w, j*w, i*w/2, w, 50);