本文實例為大家分享了js實現連連看游戲的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html><html><head><title>連連看</title><meta charset="gbk"><style type="text/css"> body { text-align: center; } .text {text-align: center; margin-top: 60px; color: #fff;} .agin {text-align: center; margin-top: 60px; color: #fff;} #game-box { margin: 60px auto; position: relative; } #game-box img { float: left; width: 59px; height: 59px; border: 1px solid #000000; } #game-box img.hover { border: 1px solid #ffffff; } #game-box img.active { border: 1px solid #7fff00; } #game-box div { background-color: #7fff00; position: absolute; }</style><script type="text/javascript"> var byId = function (id) { return document.getElementById(id); } var boxWidth = 61; //格子寬度 var gameBox; var mapid = 'game-box';//地圖 id //22張圖片 var arr = '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22'.split(','); var h = 8; //圖片共8行 var w = 11; //圖片共11列 var boxsLength = h*w; var boxArr = {}; //map對象 var startBox = ''; //開始的格子 var endBox = ''; //結束的格子 window.onload = init; //初始化 function init() { byId('agin').style.display = 'none';//隱藏再來一把按鈕 boxsLength = h*w;//圖片方框的個數 boxArr = {}; startBox = ''; endBox = ''; var str = ''; gameBox = byId(mapid); for (var i = 0; i < h; i++) { for (var j = 0; j < w; j++) { str += '<img class="" onclick="choose(this);" id="t' + i + '_l' + j + '" src="img/blank.gif">' // alert(str); }//id="t0_l0,t0_l1,t0_l2,t0_l3..." } gameBox.innerHTML = str; gameBox.style.width = w * boxWidth + 'px'; pushBoxArr(); toHTML(); } // 隨機獲取坐標 function getPosition() { var t, f; (function () { t = parseInt(Math.random() * h); l = parseInt(Math.random() * w); if (('t' + t + '_l' + l) in boxArr) { arguments.callee(); } })(); return {t:t, l:l} } // 創建隨機坐標的格子 function CearteBox(name) { var p = getPosition(); this.name = name;//圖片名 this.t = p.t;//行 this.l = p.l;//列 this.position = 't' + p.t + '_l' + p.l;//位置 this.love = 0;//這個用于特殊,某些圖片不同也可以連接 switch (name) { case '100': case '200': this.love = 1; break; case '300': case '400': case '500': this.love = 2; break; case '600': case '700': this.love = 3; break; case '800': case '900': this.love = 4; break; } } // 產生88個格子（圖片框） function pushBoxArr() { var index = 0; var last = arr.length - 1; for (var i=0; i< h;i++) { for (var j=0;j< w;j++) { var a = new CearteBox(arr[index]);//用圖片名創建,每張圖片四次 boxArr['t' + a.t + '_l' + a.l] = a;//格子的位置(也是每張圖片的id) if (index === last) { index = 0; } else { index += 1; } } } } // 初始化html function toHTML() { for (var i in boxArr) {//遍歷所有圖片的id byId(i).src = 'img/' + boxArr[i].name + '.png'; } } // choose function choose(el) { if (el.src.indexOf('blank') >= 0) {//鼠標點擊了空白圖片 return false; }else{ el.className = 'active';//更改點擊圖片的樣式 //第一次點擊或點擊了同一張圖片 if (startBox == '' || startBox == el.id) { startBox = el.id; } else {//點擊了第二張圖片 endBox = el.id; test(boxArr[startBox], boxArr[endBox]); } } } // 判斷是不是可連接格子 function test(a, b) { var can = function (a, b) { if (a.name == b.name) {//圖片名相同就可以連接 return true; } else { if (a.love != 0 && b.love != 0) { if (a.love == b.love) { return true; } else { return false; } } else { return false; } } }(a, b);//立即執行 if (can) {//可以連接 go(a, b); } else {//不能連接 byId(startBox).className = ''; startBox = endBox;//指向第二張圖片 endBox = ''; } } // 判斷是否連通 function go(a, b) { var _ap = a.position, _bp = b.position; var a = a, b = b, temp, isKill = false; // 建立四個點，判斷是否兩兩相通 var pt1, pt2, pt3, pt4; // 上到下掃描 if (isKill == false) { //交換位置 if (a.t > b.t) { temp = a; a = b; b = temp; } for (var i = -1, len = h; i <= len; i++) { pt1 = a; pt2 = {t:i, l:a.l}; pt3 = {t:i, l:b.l}; pt4 = b; if( (!isNull(pt2) && (pt2.t != a.t) ) || ( !isNull(pt3) && (pt3.t != b.t) ) ){ continue; } else if (link4pt(pt1, pt2, pt3, pt4)){ isKill = true; kill(a, b); showLine(pt1, pt2, pt3, pt4); break; return; } } } // 左到右掃描 if (isKill == false) { //交換位置 if (a.l > b.l) { temp = a; a = b; b = temp; } for (var i = -1, len = w; i <= len; i++) { pt1 = a; pt2 = {t:a.t, l:i}; pt3 = {t:b.t, l:i}; pt4 = b; if( (!isNull(pt2) && (pt2.l != a.l) ) || ( !isNull(pt3) && (pt3.l != b.l) ) ){ continue; } else if (link4pt(pt1, pt2, pt3, pt4)){ isKill = true; kill(a, b); showLine(pt1, pt2, pt3, pt4); break; return; } } } //掃描完畢 if(isKill == false){ endBox = ''; byId(_ap).className = ''; startBox = _bp; } } //干掉格子，刪除boxArr中相應格子 function kill(a, b) { boxArr[a.position] = null; boxArr[b.position] = null; boxsLength -= 2; startBox = ''; endBox = ''; } // 顯示鏈接路徑 function showLine(a, b, c, d) { var line1 =show2pt(a,b); var line2 = show2pt(b,c); var line3 = show2pt(c,d); var hideLine = function () { gameBox.removeChild(line1); gameBox.removeChild(line2); gameBox.removeChild(line3); byId(a.position).src = byId(d.position).src ='img/blank.gif'; byId(a.position).className = byId(d.position).className = ''; if (boxsLength<=0) { alert('親，你贏了！好膩害啊。'); byId('agin').style.display = 'block'; } } setTimeout(hideLine, 300); function show2pt (a, b){ var top, left, width, height, line = document.createElement('div'); var a = a, b = b, temp; // 交換位置 if (a.t > b.t || a.l > b.l) { temp = a; a = b; b = temp; } top = boxWidth * a.t + 30 + 'px'; left = boxWidth * a.l + 30 + 'px'; // 同行(t相等) if (a.t == b.t) { width = boxWidth * (b.l - a.l) + 1 + 'px'; height = '1px'; } // 同列(l相等) if (a.l == b.l) { width = '1px'; height = boxWidth * (b.t - a.t) + 1 + 'px'; } line.style.top = top; line.style.left = left; line.style.width = width; line.style.height = height; return gameBox.appendChild(line); } } // 單個格子是否空值 function isNull (a) { return boxArr['t' + a.t + '_l' + a.l] ? false : true; } // 2點是否連通 function link2pt (a, b) { var a = a, b = b, temp, canLink = true; // 交換位置 if (a.t > b.t || a.l > b.l) { temp = a; a = b; b = temp; } if (a.t == b.t) { //同行（t相等），a在b的左邊 for (var i = a.l + 1, len = b.l - 1; i <= len; i++) { if (boxArr['t' + a.t + '_l' + i]) { canLink = false; break; } } }else if (a.l == b.l) { //同列（l相等），a在b的上邊 for (var i = a.t + 1, len = b.t - 1; i <= len; i++ ) { if(boxArr['t' + i + '_l' + a.l]) { canLink = false; break; } } } else { throw ('位置錯誤：a.t=' + a.t + ' b.t=' + b.t + ' a.l=' + a.l + ' b.l=' + b.l); } return canLink; } // 4個點是否兩兩連通 function link4pt (pt1, pt2, pt3, pt4) { return link2pt(pt1, pt2) && link2pt(pt2, pt3) && link2pt(pt3, pt4); }</script></head><body><p class="agin" id="agin" style="display: none;"><input type="button" onclick="init()" value="再來一把"></p><div id="game-box"></div><p class="text" style="">相同圖片可以連哦！啊哈哈哈~~ </p></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
