print_map( )按地圖map中記錄圖案信息將圖10-2中圖標圖案顯示在Canvas對象中，生成遊戲開始的界面。
/***按地圖map中記錄圖案信息將圖標圖案顯示在Canvas對象中，生成遊戲開始的界面。*/print_map: function() { //輸出map地圖letctx = this.ctxfor(varx = 0; x < Width; x++)for(vary = 0; y < Height; y++)if(map[x][y] != ' ') {varimg1 = '/images/'+ map[x][y] + ".jpg";//ctx.drawImage('/images/4.jpg', 50 * i, 50, 50, 50)ctx.drawImage(img1, 25* x, 25* y, 25, 25);}},用戶在窗口中上單擊時，由屏幕像素坐標(e.touches[0].x, e.touches[0].y)計算被單擊方塊的地圖棋盤位置坐標（x,y)。判斷是否是第一次選中方塊，是則僅僅對選定方塊加上紅色示意框線。如果是第二次選中方塊，則加上黑色示意框線，同時要判斷是否圖案相同且連通。假如連通則畫選中方塊之間連接線。
Canvas對象觸屏事件則調用智能查找功能find2Block()。
find2Block: function(){ #自動查找…… //見前文程序設計的思路}Canvas對象觸屏開始事件代碼。
touchStart: function(e) {varx = Math.floor(e.touches[0].x / 25);vary = Math.floor(e.touches[0].y / 25);letctx = this.ctx;varpair=false; //是否配對成功this.print_map(); //輸出map地圖console.log("clicked at"+ x + "，"+ y);if(map[x][y] == " ")console.log("提示此處無方塊");else{if(Select_first == false) {p1 = newPoint(x, y);//畫選定（x1,y1)處的框線ctx.setStrokeStyle("red");ctx.strokeRect(x * 25, y * 25, 25, 25);Select_first = true;} else{p2 = newPoint(x, y);//判斷第二次單擊的方塊是否已被第一次單擊選取，如果是則返回。if((p1.x == p2.x) && (p1.y == p2.y))return;//畫選定（x2,y2)處的框線console.log('第二次單擊的方塊'+ x + ', '+ y)ctx.strokeRect(x * 25, y * 25, 25, 25);if(this.IsSame(p1, p2) && this.IsLink(p1, p2)) { //判斷是否連通console.log('連通'+ x + ', '+ y);Select_first = false;//畫選中方塊之間連接線 this.drawLinkLine(p1, p2);map[p1.x][p1.y] = ' '; //清空記錄地圖中第1個方塊map[p2.x][p2.y] = ' '; //清空記錄地圖中第2個方塊pair=true; //配對成功，定時0.5秒後刷新屏幕 linePointStack=[];if(this.isWin()) { //遊戲結束console.log("遊戲結束,你通關了！！");}} else{ //不能連通則取消選定的2個方塊 Select_first = false;}}}ctx.draw();if(pair) { //配對成功this.print_map(); //重新輸出map地圖//定時0.5秒後刷新屏幕setTimeout(function() { ctx.draw();}, 500); //過半秒}},IsSame(p1,p2)判斷p1 ( x1, y1)與p2(x2, y2)處的方塊圖案是否相同。
IsSame: function(p1, p2) {if(map[p1.x][p1.y] == map[p2.x][p2.y]) {console.log("clicked at IsSame");returntrue;}returnfalse;},以下是畫方塊之間連接線的方法。
drawLinkLine(p1,p2)繪製(p1,p2)所在2個方塊之間的連接線。判斷linePointStack數組長度，如果為0，則是直接連通。linePointStack數組長度為1，則是一折連通，linePointStack存儲是一折連通的折點。linePointStack數組長度為2，則是2折連通，linePointStack存儲是2折連通的兩個折點。
drawLinkLine: function(p1, p2) { //畫連接線console.log("折點數"+ linePointStack.length);if(linePointStack.length == 0) //直線聯通this.drawLine(p1, p2);if(linePointStack.length == 1) { //一折連通varz = linePointStack.pop();console.log("一折連通點z"+ z.x + z.y);this.drawLine(p1, z);this.drawLine(p2, z);}if(linePointStack.length == 2) { //2折連通varz1 = linePointStack.pop()//print("2折連通點z1",z1.x,z1.y)this.drawLine(p2, z1)varz2 = linePointStack.pop()//print("2折連通點z2",z2.x,z2.y)this.drawLine(z1, z2);this.drawLine(p1, z2);}},drawLinkLine(p1,p2)繪製(p1,p2)之間的直線。
drawLine: function(p1, p2) { //繪製(p1, p2)之間的直線letctx = this.ctx;ctx.beginPath();ctx.moveTo(p1.x * 25+ 12, p1.y * 25+ 12);ctx.lineTo(p2.x * 25+ 12, p2.y * 25+ 12);ctx.stroke();},IsWin()檢測是否尚有非未被消除的方塊，即地圖map中元素值非空（" "），如果沒有則已經贏得了遊戲。
/***#檢測是否已經贏得了遊戲*/isWin: function(){//檢測是否尚有非未被消除的方塊//(非BLANK_STATE狀態)for(vary = 0; y < Height; y++)for(varx = 0; x < Width; x++)if(map[x][y] != " ")returnfalse;returntrue;},至此完成連連看遊戲。
留言列表