原生JavaScript實作連連看遊戲(附源碼)_javascript技巧-js教程-PHP中文網

向大家推薦一款原生JavaScript版連連看遊戲，原始碼下載，首頁如下圖：
原生JavaScript實作連連看遊戲(附源碼)_javascript技巧
首先看一下html的佈局方式在index.html檔案中：

複製程式碼代碼如下:

-/html/PUBL "IC DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

連連看

div>

分數

時間

body>

css資料夾下的index.css檔案如下：

複製程式碼

複製程式碼



複製程式碼



複製程式碼



複製程式碼



複製程式碼



複製程式碼



複製程式碼 

 程式碼如下:

 
body { 
font-size : 16px; 
font-weight : bold; 
color : grey; 
font-weight : bold; 
color : grey; 
} 
#whole { 
border : 1px double #999999; 
border-width : 5px; 
width : 800px; 
height : 505pxx; >#gamePanel { 
margin: 1px 1px 1px 1px; 
width : 602px; 
height : 502px; 
background : url(/gif/img/background.) gif; : absolute; 
} 
#pieces { 
margin-top : 35px; 
border : 1px solid #999999; 
width : 546pxsolid #999999; 
width : 546pxx; : relative; 
} 
#pieces .piece { 
width : 32px; 
height : 36px; 
position : relative; 
cursor : point; 
} 
#pieces .track { 
width : 32px; 
height : 36px; 
position : relative; 
float : left; ]piepieces . track2 { 
width : 32px; 
height : 36px; 
position : relative; 
float : left; 
background : redred; 
} border : 1px solid #99999; 
left : 607px; 
width : 187px; 
height : 73px; .gif); 
position: absolute; 
} 
#scorePanel { 
border : 1px solid #999999; 
left : 607px 
ptop 
 187px; 
height : 30px; 
position : absolute; 
} 
#score { 
border : 1px solid #999999 
p : 606 
width : 187px; 
height : 30px; 
position : absolute; 
} 
#timePanel { 
border : 1px solid #9999999ft; >top : 300px; 
width : 187px; 
height : 30px; 

position : absolute;
}
#time {
border : 1pv 99; : 607px;

top : 340px; width : 187px; height : 30px; position : absolute; } position : absolute; } } left : 607px; top : 400px; width : 187px; height : 30px; position : absolute>; 讓我們來看看最核心的js部分實作程式碼，js部分分為三個原始檔即game.js、map.js、piece.js每一個原始檔對應一個類，其中本遊戲透過game類來操縱map及圖片piece物件：game.js程式碼如下：複製程式碼程式碼如下:

 
// 遊戲控制類別
var Game = { 
// 遊戲背景
gamePanel : null, 
// 分數
score : 0, 
//時間
time : 0, 
// 圖片映射表
pieceMap : null, 
// 圖片清單
pieceList : [], 
// 圖片清單不包含圖片
pieceImgList : [], 
// 圖片隨機數列表
randomList : [], 
// 軌跡列表
trackList : [], 
// 遊戲是否開始
isGameBigin : false, 
// 遊戲是否結束
isGameOver : false, 
// 遊戲是否重置
isGameReset : false, 
// 圖片元素是否第一次點擊
isFstClickC : true, 
// 開始遊戲
start : function() { 
document.getElementById("start").disabled = true; 
document.getElementById("reset").disabled = falsedisabled = falsedisabled = falsedisabled = falsedisabled = falsedisabled = falsedisabled = falsedisabled ; 
if (this.isGameReset) { 
this.isGameOver = false; 
this.startTime(); 
return; 
} else if (this.isGameBegin) { 
return 
return ; 
} else { 
this.init(); 
return; 
} 
}, 
reset : function() { 
document.getElementById("start") .disabled = false; 
document.getElementById("reset").disabled = true; 
this.clear(); 
this.initPieces(); 
this.initImgPieces(); >this.time = 0; 
document.getElementById("time").innerHTML = 0; 
this.score = 0; 
document.getElementById("score").innerHTML = 0; 
this.isGameReset = true; 
this.isGameBegin = true; 
}, 
// 初始化
init : function() { 
if (this.isGameBegin) { 
return ; 
} 
this.pieceMap = new Map(); 
var _this = this; 
this.time = 0; 
this.startTime(); 
this.gamePanel = document.getElementById("pieces"); 
this.initPieces(); 
this.initImgPieces(); 
this.isGameBegin = true; 
}, 
/// 將隨機產生的150張圖片加入畫布
initPieces : function() { 
var _this = this; 
this.initRandomList(); 
//打亂隨機列表排序
this.messRandomList() ; 
for (var i = 0; i var piece = new Piece(this); 
this.pieceList.push(piece); 
var x = (i ); 
var y = Math.floor(i/17); 
this.pieceMap.put(x "," y, piece); 
piece.setPosition(x, y); 
this.gamePanel.appendChild(piece.dom); 
if (x == 0 || x == 16 || y == 0 || y == 11) { 
piece.track = document. createElement("div"); 
piece.track.className = "track"; 
piece.dom.appendChild(piece.track); 
piece.isTracked = true; 
continue; 
piece.isTracked = true; 
continue; 
piece.isTracked = true; 
continue; 
piece.isTracked = true; 
continue; 
} else { 
if (x == 1 || x == 15 || y == 1 || y == 10) { 
piece.setAtEdge(true); 
} 
 this.pieceImgList.push(piece); 
} 
} 
}, 
// 初始化圖片
initImgPieces : function() { 
for (var i = 0; i this.pieceImgList[i].initImg(); 
this.pieceImgList[i].img.src = "img/pieces/" this.randomList[i] " .gif" 
this.pieceImgList[i].setImgSrc(this.pieceImgList[i].img.src); 
// 執行圖片點擊事件
this.pieceImgList[i].onClick(); 
} 
}, 
// 初始化隨機表
initRandomList : function() { 
// 取得隨機數列，成雙出現
for (var i = 0; i var random = parseInt(Math.random()*22*10000, 10); 
var number = random#; 
this.randomList.push(number); 
 this.randomList.push(number); 
} 
}, 
// 打亂隨機表
messRandomList : function() { 
for (var i = 0; i var random = parseInt(Math.random()*15*10000, 10); 
var number = random 0; 
var temp; 
var number = random 0; 
var temp; 
temp = this .randomList[i]; 
this.randomList[i] = this.randomList[number]; 
this.randomList[number] = temp; 
} 
}, 
// 開始計時
startTime : function() { 
var _this = this; 
if (this.isGameOver) { 
return; 
} else { 
this.time ; .getElementById("time").innerHTML = this.time; 
this.isGameBegin = true; 
setTimeout(function() {_this.startTime();}, 1000); 
} 
 }, 
// 清除
clear : function() { 
for (var i = 0; i this.gamePanel.removeChild(this.pieceList [i].dom); 
} 
this.pieceList = []; 
this.randomList = []; 
this.pieceImgList = []; 
this.isGameOver = true; 
this.isGameBegin = false; 
} 
} 
window.onload = function() { 
document.getElementById("start").disabled = false 
; ("reset").disabled = true; 
} 
// 遊戲開始入口
function Start() { 

Game.start();
}
// 遊戲重置入口

function Reset() { Game.reset(); } 自訂的js版映射結構map.js來源檔案如下：

複製程式碼程式碼如下:

 
var Map = function(){ 
this.data = []; 
} 
Map.prototype = { 
put : function(key, value) { 
 this.data[key] = value; 
}, 
get : function(key) { 
return this.data[key]; 
}, 
remove : function(key) { 
this.data[key] = null; 
}, 
isEmpty : function() { 
return this.data.length == 0; 
}, 
size : function () { 
return this.data.length; 
} 
} 

圖片類piece.js原始檔如下：

複製程式碼程式碼如下:

複製程式碼

 程式碼如下:

 
// 直線
isStraightReach : function(piece) { 
//alert("isStraightReach"); 
if (this.isNear(piece)) { 
return true; 
} 
var a = false; 
var b = false; 
// 沿著y軸方向搜尋
if (this.x == piece.x ) { 
//alert("!!!!!!!!!!!"); 
for (var i = this.min(this.y, piece.y) 1; i //alert("this.x == piece.x: " piece.x "," i); 
if (this.game. pieceMap.get(piece.x "," i).isPass()) { 
a = true; 
this.game.trackList.push(this.game.pieceMap.get(piece.x "," i)); 
continue; 
} else { 
a = false; 
this.game.trackList = []; 
return a; 
} 
} 
} 
// 沿x軸方向搜尋
if (this.y == piece.y) { 
//alert("!!!!!!!!!!!"); 
for (var i = this.min(this.x, piece.x) 1; i //alert("this.y == piece.y: " i "," piece.y); 
if (this.game.pieceMap.get(i "," piece.y).isPass()) { 
b = true; 
this.game.trackList.push(this.game.pieceMap.get(i "," piece.y)); 
continue; 
} else { 
b = false 
this .game.trackList = []; 
return b; 
} 
} 

}
return a || b;
},

該>該函數實現了連連看判斷兩圖片是否符合連接條件的最簡單的一步,然後是拐一次彎搜尋。

複製程式碼

 程式碼如下:

 
// 拐彎一次
 (piece) { 
//alert("isReach1"); 
var corner_1 = this.game.pieceMap.get(this.x "," piece.y); 
var corner_2 = this.game .pieceMap.get(piece.x "," this.y); 
var _this = this; 
if ((_this.isStraightReach(corner_1)) 
&& (corner_1.isStraightReach(piece)) 
&& corner_1.isPass()) { 
//alert("corner_1: " this.x "," piece.y); 
this.game.trackList.push(corner_1); 
return true; 
} 
if ((_this.isStraightReach(corner_2)) 
&& (corner_2.isStraightReach(piece)) 
&& corner_2.isPass()) { 
//alert(" corner_2: " piece.x "," this.y); 
this.game.trackList.push(corner_2); 
return true; 

}
return false;
},

} return false; }, } return false; }, }

return false;

}, 
} 
return false; 
}, 

 
在拐一次彎搜尋的函數中呼叫了直接搜尋的函數，同樣最複雜的拐兩次彎搜尋也會呼叫拐一次彎搜尋的函數。 




複製程式碼


 程式碼如下:

 
// 拐彎兩次
is
Reach2 : function(piece) { 
// 沿x軸正向搜尋
for (var i = this.x 1; i if (!this.game.pieceMap.get( i "," this.y).isPass()) { 
this.game.trackList = []; 
break; 
} else if (this.game.pieceMap.get(i "," this.y).isReach(piece) 
&& this.game.pieceMap.get(i "," this.y).isPass()) { 
this.game.trackList.push(this.game. pieceMap.get(i "," this.y)); 
return true; 
} 
} 
// 沿x軸搜尋
for (var i = this.x - 1 ; i >= 0; i --) { 
if (!this.game.pieceMap.get(i "," this.y).isPass()) { 
this.game.trackList = [] ; 
break; 
} else if (this.game.pieceMap.get(i "," this.y).isReach(piece) 
&& this.game.pieceMap.get(i "," this.y).isPass()) { 
this.game.trackList.push(this.game.pieceMap.get(i "," this.y)); 
return true; 
} 
} 
// 沿y軸搜尋
for (var i = this.y - 1; i >= 0; i --) { 
if (!this.game.pieceMap.get( this.x "," i).isPass()) { 
this.game.trackList = []; 
break; 
} else if (this.game.pieceMap.get(this.x " ," i).isReach(piece) 
&& this.game.pieceMap.get(this.x "," i).isPass()) { 
this.game.trackList.push(this.game. pieceMap.get(this.x "," i)); 

return true; } } // 沿y軸正向搜尋for (var i = this.y 1; i if (!this.game.pieceMap.get(this.x "," i).isPass()) { this.game.trackList = []; break; } else if (this.game.pieceMap.get(this.x "," i).isReach(piece) && this.game.pieceMap.get(this.x "," i).isPass()) { this.game.trackList.push(this.game.pieceMap.get(this.x "," i)); return true; } } return false; },
此函數以點擊的圖片為中心分別沿x軸,y軸展開搜尋。
以上是本遊戲代碼的全部內容。具體遊戲源碼請到CSDN中zhangjinpeng66的資源裡下載。