跟大家分享如何實現js版連連看遊戲，如下圖：
首先看一下html的版面方式在index.html檔：
css資料夾下的index.css檔案如下：
複製程式碼
程式碼如下:
body {
font-size : 16px;
font-weight : bold;
color : grey;
}
}
border : 1px double #999999;
border-width : 5px;
width : 800px;
height : 505px; }
#gamePanel {
margin: 1px 1px 1px 1px;
width : 602px;
height : 502pxx; .gif) repeat;
position : absolute;
}
#pieces {
margin-top : 35px;
border : 1px margin-top 9935px;
border : 1px 99;
width : 546px;
height : 434px;
position: relative;
}
#pieces .piece {
}
#pieces .piece {
height : 36px;
position : relative;
cursor : pointer;
float : left;
}
width : 32px;
height : 36px;
position : relative;
float : left;
}
pieces .track>piem width : 32px;
height : 36px;
position : relative;
float : left;
background : red;
}
background : red;
}
>
margin-top : 60px;
border : 1px solid #999999;
left : 607px;
width : 187px;
height : 733; /img/logo.gif);
position: absolute;
}
#scorePanel {
border : 1px solid #999999; 🎜> ;
top : 200px;
width : 187px;
height : 30px;
position : absolute;
}
position : absolute; border : 1px solid #999999;
left : 607px;
top : 240px;
width : 187px;
height : 30px;
#timePanel {
border : 1px solid #999999;
left : 607px;
top : 300px
;
position : absolute;
}
#time {
border : 1px solid #999999;
left : 607ptop;
width : 187px;
height : 30px;
position : absolute;
}
#button {
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 :>
// 圖片清單
pieceList :>
// 圖片清單
pieceList :>
// 圖片清單
pieceList : [],
// 圖片清單不包含圖片
pieceImgList : [],
// 圖片隨機數列表
randomList : [],
// 軌跡清單
trackList : [],
// 遊戲是否開始
isGameBigin : false,
// 遊戲是否結束
isGameOver ver >
// 遊戲是否重置
isGameReset : false,
// 圖片元素是否第一次點擊
isFirstClick : true,
// 開始遊戲
start : function() {
document.getElementById("start").disabled = true;
document.getElementById("reset").disabled = false
if (this.isGameReset) {
this.isGameOver = false;
this.startTime();
return;
} else if (this.isGameBegin) {裡
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.is = true;
},
// 初始化
init : function() {
if (this.isGameBegin) {
return;
}
this.pieceMap = new Map();
var _this = this;
this.time = 0;
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;
} 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);
}
},
// 打亂隨機表
},
// 打亂隨機表
mess] : function() {
for (var i = 0; i
var random = parseInt(Math.random()*15*10000, 10);
var number = random 0;
var temp;
temp = this.randomList[i];
this.randomList[i] = this.randomList[number] ;
this.randomList[number] = temp;
}
},
// 開始計時
startTime : function() {
// 開始計時
startTime : function() {
var _this = this;
if (this.isGameOver) {
return;
} else {
this.. >document.getElementById("time").innerHTML = this.time;
this.isGameBegin = true;
setTimeout(function() {_this.startTime();}, 1000);
}
},
// 清除
clear : function() {
for (var i = 0; i for (var i = 0; i
this.gamePanel.removeChild(this.pieceList[i].dom);
}
this.pieceList = []; this.randList = [];
this.pieceImgList = [];
this.isGameOver = true;
this.isGameBegin = false;
}
}
}
} } } ^ 🎜>window.onload = function() { document.getElementById("start").disabled = false; document.getElementById("reset").disabled = true } // 遊戲開始入口function Start() { Game.start(); } / / 遊戲重置入口function Reset() { Game.reset(); }
自訂的js版映射結構map.js原始檔如下：
程式碼如下:
var Map = function(){
this.data = [];
}
Map.prototype = {
put
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;
}
複製程式碼 程式碼如下:
var Piece = function(game) {
// 遊戲物件
this.game = game;
// 是否為邊緣元素
this. isEdge = false;
// 是否挨著邊緣元素
this.atEdge = false;
// 圖片dom元素
this.dom = null;
// 圖片元素
this.img = null;
// 圖片元素來源
this.src = null;
// 軌跡元素
this. track = null;
// 是否可以作為軌跡
this.isTracked = false;
// 選取標記元素
this.selected = null;
// 圖片橫向排列
this.x = 0;
// 圖片縱向排列
this.y = 0;
// 圖片閃爍Id
this .flashId = null;
// 圖片是否點擊
this.onClicked = false;
// 閃爍次數
this.flashCount = 0;
this.flashCount = 0;
this.init();
}
Piece.prototype = {
// 初始化
init : function() {
this
this. dom = document.createElement("div");
this.dom.className = "piece";
this.selected = document.createElement("img");
} ,
// 初始化圖片
initImg : function() {
this.img = document.createElement("img");
this.dom.appendld. (this.img);
},
// 滿足演算法後初始化track元素
initTrack : function() {
if (this.flashId != null) {
// 停止閃爍
this.stopFlash();
}
//alert("initTrack middle");
if (🎜>//alert("initTrack middle");
if ( this.track != null) {
return;
}
this.onClicked = false;
this.dom.removeChild(this.img); 🎜>
this.track = document.createElement("div");
this.track.className = "track";
this.dom.appendChild(this.track);
this.dom.appendChild(this.track);
},
// 位元圖片設定來源
setImgSrc : function(src) {
this.src = src;
},
// 為圖片設定二維排列位置
setPosition : function(x, y) {
this.x = x;
this.y = y;
} ,
// 為圖片設定選取元素
setSelected : function() {
if (this.flashCount % 2 == 0) {
//this .dom.removeChild(this.img);
//this.selected.src = "img/selected.gif";
//this.dom.appendChild(this.selected);
this. img.src = "img/pieces/flash.gif";
} else {
//if (this.selected != null) {
// this .dom.removeChild(this.selected);
//}
this.img.src = this.src;
//this.dom.appendChild(this.img) ;
}
},
// 設定是否為邊緣元素
setEdge : function(isEdge) {
this.isEdge = isEdge ;
},
// 設定是否挨著邊緣元素
setAtEdge : function(atEdge) {
this.atEdge = atEdge;
},
// 開始閃爍
flash : function() {
var _this = this;
this.flashId = setInterval(function() {_this.setSelected( );}, 500);
},
// 停止閃爍
stopFlash : function() {
clearInterval(this.flashId);
clearInterval(this.flashId);
if (this.flashCount % 2 == 1) {
//if (this.selected != null) {
// this.dom.removeChild(this.selected );
//}
this.img.src = this.src;
//this.dom.appendChild(this.img);
}
},
// 物件被選取的內部函數
onClick : function() {
if (this.onClicked) {
if (this.onClicked) {
return;
}
var _this = this;
this.img.onclick = function() {
if (!document.getElementById(" start").disabled) {
return;
}
if (_this.onClicked) {
return;
if (_this.checkPiece()) {
if (_this.checkPiece()) {
return;
}
_this.flash();
_this.onClicked>this.onClicked ;
};
},
// 檢查是否有被點擊的圖片
checkPiece : function() {
for (varvar i = 0; i
if (this.game.pieceList[i].onClicked && !this.game.pieceList[i].equal(this) ) {
if (this.game.pieceList[i].equalImage(this)) {
//alert("The same Image");
this.searchTrack(this .game.pieceList[i]);
} else {
this.game.pieceList[i].stopFlash();
this.game.pieceList[i].onClicked = false;
this.onClicked = false;
return false;
}
return true;
} else
continue;
}
}
return false;
},
// 是否為同一個物件>equal : function(piece) {
return (this.x == piece.x && this.y == piece.y);
},
/ / 是否為同一張圖片
equalImage : function(piece) {
return this.src == piece.src;
},
// 搜尋路徑
searchTrack : function(piece) {
if (this.isNear(piece)) {
this.linkTrack(piece);
return
; }
if (this.isReach(piece) || this.isReach2(piece)) {
this.linkTrack(piece);
return; } }, // 是否相鄰isNear : function(piece) { var a = (Math.abs(piece.x - this.x ) == 1) && (piece.y == this.y) || (Math.abs(piece.y - this.y) == 1) && (piece.x == this.x); return a; },
// 直線
isStraightReach : function(piece) {
//alert("isStraightReach");
if (this.isNear(piece)) {
回傳 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));
繼續;
} else {
a = false;
this.game.trackList = [];
回傳一個;
}
}
}
//沿著x軸搜尋方向
if (this.y ==
//沿著x軸搜尋方向 / /警報（「！！！！！！！！！！！」）;
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));
繼續;
} else {
b = false
this.game.trackList = [];
返回b;
}
}
}
回||乙;
},
//拐點彎道搜尋
isReach1 : function(piece) {
//alert("isReach1");
varcorner_1 = this.game.pieceMap.get(this.x ","piece.y);
varcorner_2 = this.game.pieceMap.get(piece.x "," this.y);
var _this = this;
if ((_this.isStraightReach(corner_1))
&& (corner_1.isStraightReach(piece))
&&corner_1.isPass()) {
("corner_1:"this.x","piece.y);
this.game.trackList.push(corner_1);
回傳 true;
}
if ((_this.isStraightReach(corner_2))
&& (corner_2.isStraightReach(piece))
&Pass)_2. {
//alert(“corner_2：”piece.x“，”this.y);
this.game.trackList.push(corner_2);
返回 true;
}
返回 false;
},
//直接或拐點一次彎搜尋
isReach : function(piece) {
var a = this.isStraightReach(piece);
var b = this.isReach1(piece);
返回 ||乙；
},
//拐點二次彎搜尋
isReach2 : function(piece) {
//沿xx正向搜尋
for (var i = this.x 1; i
if (!this.game.pieceMap.get(i "," this.y).isPass()) {
this.game.trackList = []
休息；
} 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));
回傳true；
}
}
//沿x軸搜尋
for ( var i = this.x - 1; i >= 0; i --) {
if (!this.game.pieceMap.get(i "," this.y).isPass()) {
this.game.trackList = [];
休息；
} 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));
回傳true;
}
}
//沿y 軸搜尋
for (var i = this.y - 1; i >= 0; i --) {
if (!this.game.pieceMap.get(this.x "," i).isPass()) {
this.game.trackList = []
休息；
} 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.獲取（this.x“，”i））；
回傳 true;
}
}
//沿y軸正向搜尋
for (var i = this.y 1; i
if (!this.game.pieceMap.get(this.x "," i).isPass()) {
this.game.trackList = [];
休息；
} 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));
回傳 true;
}
}
回傳 false;
},
//路徑連接
linkTrack : f （片）{
this.initTrack();
piece.initTrack();
this.changeScore();
this.showTrack(piece);
},
//顯示足跡
showTrack : function(piece) {
this.game.trackList.push(piece);
this.track.className = "track2";
for (var i = 0; i //alert(i);
this.game.trackList[i].track.className = "track2";
}
var _this = this;
setTimeout(function() {_this.hideTrack()}, 500);
},
//隱藏足跡
hideTrack : function() {
for (var i = 0; i
this.game.trackList[i].track.className = "track";
}
this.game.trackList = [];
this.track.className = "track";
this.isTracked = true;
},
// 分數增加
changeScore : function() {
this.game.score = 100;
document.getElementById("score").ininner8 = .in. game.score;
},
min : function(a, b) {
if (a
return a;
} else {
return b;
}
},
max : function(a, b>},
max : function(a, b) {
if (a > b) {
return a;
} else {
return b;
}
},
// 判斷是否經過
isPass : function() {
return this.track != null;
}
}
}
}
}
}
以上是原始檔的程式碼,具體的實作程式碼請關注CSDN中zhangjinpeng66下載。下面講連連看遊戲最核心的部分，js實作搜尋路徑。
js實作搜尋路徑演算法首先最簡單的是判斷兩張圖片能否直線到達函數程式碼如下：
複製程式碼
複製程式碼
程式碼如下:
// 直線
isStraightReach : function(piece) {
//alert("isStraightReach");
if (this.isNear( piece)) {
return true;
}
var a = false;
var b = false;
// 沿沿軸方向搜尋
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>} // 沿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;
}
return a || b;
該函數實現了連連看判斷兩圖片是否符合連接條件的最簡單的一步,然後是拐一次彎搜尋。
複製程式碼
程式碼如下:
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(piepiece) 🎜>&& corner_2.isPass()) { //alert("corner_2: " piece.x "," this.y); this.game.trackList.push(corner_2); return true; } return false; }, 在拐一次彎搜尋的函數中呼叫了直接搜尋的函數，同樣最複雜的拐兩次彎搜尋也會呼叫拐一次彎搜尋的函數。 複製程式碼 程式碼如下:
//拐點二次彎搜尋
isReach2 : function(piece) {
//沿x軸正向搜尋
for (var i = this.x 1; i
if (!this.game.pieceMap.get(i "," this.y).isPass()) {
this.game.trackList = [];
休息；
} 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));
回傳 true;
}
}
//沿 x 軸搜尋
for (var i = this.x - 1; i >= 0 ; i --) {
if (!this.game.pieceMap.get(i "," this.y).isPass()) {
this.game.trackList = [ ];
休息；
} 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));
回傳 true;
}
}
//沿著 y 軸搜尋
for (var i = this.y - 1; i >= 0 ; i --) {
if (!this.game.pieceMap.get(this.x "," i).isPass()) {
this.game.trackList = [ ];
休息；
} 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));
回傳 true;
}
}
//沿y軸正向搜尋
for (var i = this.y 1; i
if (!this.game.pieceMap.get(this.x "," i).isPass()) {
this.game.trackList = [];
休息；
} 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));
傳回 true;
}
}
傳回 false;
},
此函數以點擊的圖片為中心分別沿著x軸,y軸展開搜尋。
