用javascript做一個webgame連連看大家看下

2019-11-21 01:49:31

字體：大中小

來源：轉載

供稿：網友

最后成品代碼寫的倉促，沒有容錯，封裝也不合理，只實現了核心部分，其他部分，喜歡添加的舊添加吧。

下面就開始我的教程（姑且算是教程吧，草草寫點吧，時間太少，大家原諒）

以最高難度游戲級別作的分析。
第一步，大體分析
看看游戲主要包含哪些元素，發現3部分，一些成對的圖片塊，一個能盛圖片塊的方盤容器，一個能連接兩個圖塊的線。

第二步，元素分析
圖塊：圖塊一共有32種不同的圖案，每種圖案4張，圖塊會相應鼠標的點擊，圖塊會消失，圖塊有高度和寬度。
方盤：能承載128個圖塊，2維承載，橫向16塊，縱向8塊，方盤可以放圖塊，可以打亂已有圖塊的位置順序。
連線：游戲的核心，連接兩塊圖塊得中心點，最多只能折兩次，不能穿透圖塊，連線可以通過方盤外部

第三步，抽象
有了上面的分析，把3個元素抽象成3個對象，怎么抽象的，自己動腦吧，我寫的代碼就是因為動腦不足，導致封裝亂七八糟的。

第四部，核心算法

1，洗牌算法（很簡單的算法）
把2維數組的數據推到1維數組，交換數據中位置屬性，重新按照位置放置元素

2，查找路徑：
其實連連看最主要的地方就是如何查找兩個圖塊之間的一條最多只有兩個折點的路徑，這里的實現方法有很多種，我這里實現的是找到的方法，不是最短路徑或者最優路徑的方法。
根據研究你會發現，連線可以分成兩部分，一部分是法線，一部分是圖塊投影到法線上的射線，那么，我們就可以利用這個關系，查找一條路徑。

首先，設兩個圖塊A,B，那么每個圖塊都有X向和Y向兩條射線，那么如果存在一條Y向法線在AB的X射線公共區之間，或者存在X向法線在AB的Y射線公共區之間，那么就找到了一條路徑。

沒有實現的地方：（這些基本都是無關緊要了，關口可以根據洗牌的方法很容易改造出來，有興趣你就去實現吧）
計時、計分、提示、關口

<html> <head> <title>武林網-m.survivalescaperooms.com 連連看</title> <style> .select{filter:Gray} #lineDiv{height:20px} .lineDot{position:absolute; background:#f60;padding:0;font-size:0;width:10px;height:10px} #gridDiv{padding:50px;background:#000;border:5px solid #ccc} #gridTalbe{background-repeat:no-repeat; background-position:center; margin:0} #gridTalbe td{width:41px;height:50px;} #gridTalbe img{width:40px; border-right:1px solid #666;} body{ padding:0; margin:0} </style> </head> <body> <table width="100%" border="1">   <tr>     <td><div   class="iwvjtn8m0"   id="gridDiv"></div></td>     <td width="180" align="center" bgcolor="#CCCCCC"><input name="button" type="button" onClick="oGrid.shuffle()" value="洗牌"></td>   </tr> </table> <div   class="iwvjtn8m0"   id="lineDiv"></div> <div   class="iwvjtn8m0"   id="debug"></div> <script> /************************************************************************ 設計：tot 時間：2007-12-29 MSN：xiaotot@msn.com ************************************************************************/ //記錄被選擇圖塊的信息 var selectImg = ""; var selectX = 0; var selectY = 0; //圖塊寬度和高度，用來計算畫線的位置 var stepX = 41; var stepY = 50; //初始化棋盤,只能以oGrid命名 var oGrid = new objGrid(16,8); /*****************************功能函數*******************************************/ //數組元素隨機排序,tot設計，修改請保留 function rndArray(arr){     var le = arr.length;         for(var i=0; i < le; i++){             var s = Math.floor(Math.random()*le);             var zx = arr[i].x;             var zy = arr[i].y;//這里不能寫成z=arr[i],因為object是引用             arr[i].x = arr[s].x;             arr[i].y = arr[s].y;             arr[s].x = zx;             arr[s].y = zy;         } } //數組元素隨機排序 function ArrayRnd(arr,times){     for(i = 0; i < times; i++)rndArray(arr) } //獲取Html元素的絕對位置 function GetAbsoluteLocation(element){     if ( arguments.length != 1 || element == null ) return null;     var offsetTop = element.offsetTop;     var offsetLeft = element.offsetLeft;     var offsetWidth = element.offsetWidth;     var offsetHeight = element.offsetHeight;     while( element = element.offsetParent ) {          offsetTop += element.offsetTop;          offsetLeft += element.offsetLeft;      }      return {          absoluteTop: offsetTop,         absoluteLeft: offsetLeft,         offsetWidth: offsetWidth,         offsetHeight: offsetHeight     };  } /*****************************封裝對象*******************************************/ //方盤對象，用來放置圖塊，tot設計，修改請保留 function objGrid(width,height){     var imgNum = 32; //圖塊樣式個數     var gridNum = width * height;     //初始化圖塊所用的圖片名     var arrImg = new Array(imgNum);     for(i = 0;i < imgNum; i++) arrImg[i] = "llk_" + i;     //初始化圖塊數組     var arrImgBlock = new Array(gridNum);     for(i = 0; i< gridNum; i++){         arrImgBlock[i] = new objImgBlock(arrImg[Math.floor(i /4)]);         arrImgBlock[i].x = Math.floor(i / height);         arrImgBlock[i].y = i % height;     }     //打亂次序     ArrayRnd(arrImgBlock,5);     //生成方盤對象     var obj = new Object();     obj.backGround = "back.gif";//方盤的背景圖片     obj.arrGrid = new Array(width);     //初始化方盤二維數組     for(i = 0; i < width; i++)         obj.arrGrid[i] = new Array(height);     //向放盤中放置圖塊     obj.init = function (arrBlock){         for(i = 0; i < width; i++)             for(j = 0; j < height; j++){                 this.arrGrid[i][j] = "";             }         grid = arrBlock.length;         for(i = 0; i < grid; i++)                 this.arrGrid[arrBlock[i].x][arrBlock[i].y] = arrBlock[i];         this.drawGrid()         this.setGridBackground(this.backGround)     }     //洗牌     obj.shuffle = function (){         var arrIBlock = new Array();         for(i = 0; i < width; i++)             for(j = 0; j < height; j++)                 if(this.arrGrid[i][j] != "")arrIBlock.push(this.arrGrid[i][j]);         ArrayRnd(arrIBlock,5);         this.init(arrIBlock);     }     //查找最遠射點     obj.findRadial = function (point){         var minX = -1, minY = -1, maxX = width, maxY = height;         //水平查找最遠射點         for(i = 0; i < width; i++){             if(i < point.X){                 if(this.arrGrid[i][point.Y] != "")                     minX = point.X;                 else{                     if(minX == point.X) minX = i;                 }             }else if(i > point.X){                 if(this.arrGrid[i][point.Y] != ""){                     maxX = i - 1;                     break;                 }             }         }         //垂直查找最遠射點         for(i = 0; i < height; i++){             if(i < point.Y){                 if(this.arrGrid[point.X][i] != "")                     minY = point.Y;                 else{                     if(minY == point.Y) minY = i;                 }             }else if(i > point.Y){                 if(this.arrGrid[point.X][i] != ""){                     maxY = i - 1;                     break;                 }             }         }         return {             MinX : minX,             MinY : minY,             MaxX : maxX,             MaxY : maxY         }     }     //查找法線     obj.findNormal = function(sPoint,ePoint){         var    startPoint, endPoint         var sRadial = this.findRadial(sPoint);         var eRadial = this.findRadial(ePoint);         var pass;//是否可以通過標志                  maxSX = Math.max(sRadial.MinX,eRadial.MinX)         minEX = Math.min(sRadial.MaxX,eRadial.MaxX);         maxSY = Math.max(sRadial.MinY,eRadial.MinY);         minEY = Math.min(sRadial.MaxY,eRadial.MaxY)         //查找橫法線         if( maxSY <= minEY){             if(maxSY == -1){                 startPoint = new objPoint(sPoint.X,-1);                 endPoint = new objPoint(ePoint.X,-1);             }else if(minEY == height){                 startPoint = new objPoint(sPoint.X,height);                 endPoint = new objPoint(ePoint.X,height);             }             else{                 for(j = maxSY; j <= minEY; j++){                     pass = true;                     for(i = Math.min(sPoint.X,ePoint.X) + 1; i < Math.max(sPoint.X,ePoint.X); i++){                         if(this.arrGrid[i][j] != "") pass = false;                     }                     if(pass){                         startPoint = new objPoint(sPoint.X,j);                         endPoint = new objPoint(ePoint.X,j);                     }                 }             }         }//查找豎法線         else if( maxSX <= minEX){             if(maxSX == -1){                 startPoint = new objPoint(-1,sPoint.Y);                 endPoint = new objPoint(-1,ePoint.Y);             }else if(minEX == width){                 startPoint = new objPoint(width,sPoint.Y);                 endPoint = new objPoint(width,ePoint.Y);             }             else{                 for(i = maxSX; i <= minEX; i++){                     pass = true;                     for(j = Math.min(sPoint.Y,ePoint.Y) + 1; j < Math.max(sPoint.Y,ePoint.Y); j++){                         if(this.arrGrid[i][j] != "") pass = false;                     }                     if(pass){                         startPoint = new objPoint(i,sPoint.Y);                         endPoint = new objPoint(i,ePoint.Y);                     }                 }             }         }         //返回法線端點         if(startPoint){             return{sP : startPoint, eP : endPoint}         }         else {return false};     }     //畫方盤     obj.drawGrid = function (){         var gDiv = document.getElementById("gridDiv");         var tempHtml = "<table id=gridTalbe border=0 cellpadding=0 cellspacing=0 align=center>";         for(i = 0; i < height; i++){             tempHtml += "</tr>";             for(j = 0; j < width; j++){                 tempHtml += "<td>";                 if(this.arrGrid[j][i] != "")                      tempHtml += this.arrGrid[j][i].toHtml();                 tempHtml += "</td>";             }             tempHtml += "</tr>";         }         tempHtml += "</table>";         gDiv.innerHTML = tempHtml;     }     //設置背景     obj.setGridBackground = function(img){         var gTable = document.getElementById("gridTalbe");         gTable.style.backgroundImage = "url(images/" + img + ")";         this.backGround = img;     }     //執行初始化     obj.init(arrImgBlock);     return obj; } //圖塊對象 function objImgBlock(pic){     var obj = new Object();     obj.picName = pic;     obj.x = 0;     obj.y = 0;     obj.toHtml = function(){         return "<img name=" + this.picName + " onclick=clickImg(" + this.x + "," + this.y + ") src=https://www.jb51.netimages/"%20%20%20%20%20%20%20%20%20%20+%20this.picName%20+%20".gif>"     }     return obj; } //坐標點對象，對應于承載圖塊的二元數組下標 function objPoint(x,y){ return{ X : x, Y : y }} //點擊圖塊的動作 function clickImg(x,y){     eObj = event.srcElement;     if((selectImg.name == eObj.name) && (selectImg !== eObj)){         if(Line(new objPoint(selectX,selectY),new objPoint(x,y))){             selectImg.style.display = "none";             eObj.style.display = "none";             selectImg = "";             selectX = 0; selectY = 0;         }else changeSelect(eObj,x,y)     }else{         changeSelect(eObj,x,y)     } } //更換選擇的圖塊 function changeSelect(o,x,y){     selectImg.className = "";     selectImg = o;     selectImg.className = "select";     selectX = x; selectY = y; } //畫線 function Line(sPoint,ePoint){     var nLine = oGrid.findNormal(sPoint,ePoint);     if(nLine){         oGrid.arrGrid[sPoint.X][sPoint.Y] = "";         oGrid.arrGrid[ePoint.X][ePoint.Y] = "";         drawLine(sPoint,nLine.sP);         drawLine(nLine.sP,nLine.eP);         drawLine(ePoint,nLine.eP);         setTimeout(clearLine,500);         return true;     }else{         return false     } } //連接兩點的畫線函數 function drawLine(sPoint,ePoint){     var startPoint, endPoint, lineType = true;//默認畫橫線     var lineLen;//畫線長度     var linDiv = document.getElementById("lineDiv");     var O = document.getElementById("gridTalbe");     //原點的絕對坐標     var oPoint = new objPoint(GetAbsoluteLocation(O).absoluteLeft - 25, GetAbsoluteLocation(O).absoluteTop - 30);     if(sPoint.X == ePoint.X){ //畫豎線         if(sPoint.Y > ePoint.Y){//判斷起始點             startPoint = ePoint;             endPoint = sPoint;         }else{             startPoint = sPoint;             endPoint = ePoint;         }         lineLen = endPoint.Y - startPoint.Y + 1;         lineType = false;     }else{//畫橫線         if(sPoint.X > ePoint.X){//判斷起始點             startPoint = ePoint;             endPoint = sPoint;         }else{             startPoint = sPoint;             endPoint = ePoint;         }         lineLen = endPoint.X - startPoint.X + 1;     }     for(i = 1; i <= lineLen; i++){         var lineDot = document.createElement("<div   id="iwvjtn8m0"   class=lineDot></div>");         lineDot.style.left = lineType ? (oPoint.X + stepX * (startPoint.X + i) + "px") : (oPoint.X + stepX * (startPoint.X + 1) + "px");         lineDot.style.top = lineType ? (oPoint.Y + stepY * (startPoint.Y + 1) + "px") : (oPoint.Y + stepY * (startPoint.Y + i) + "px");         linDiv.insertBefore(lineDot);     } } //清除畫線 function clearLine(){     var linDiv = document.getElementById("lineDiv");     linDiv.innerHTML = ""; } //調試用 function debug(str){     var linDiv = document.getElementById("debug");     linDiv.innerHTML = str + "" + linDiv.innerHTML; } function odebug(obj,oname){     var linDiv = document.getElementById("debug");     for(o in obj){         if(typeof(obj[o]) == "object"){             odebug(obj[o],oname + o + ".")         }         else linDiv.innerHTML = oname + o + "=" + obj[o] + "" + linDiv.innerHTML;     } } </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：javascript 實現的多瀏覽器支持的貪吃蛇webgame

下一篇：利用js跨頁面保存變量做菜單的方法