使用非html5實現(xiàn)js板連連看游戲示例代碼

1、/使用非html5實現(xiàn)js板連連看游戲示例代碼連連看游戲通常情況下都是使用html5來實現(xiàn)的，不過從現(xiàn)在開始就可以使用js來實現(xiàn)了，具體的代碼如下，喜歡的朋友可以參考下，希望對大家有所幫助 向大家分享一款如何實現(xiàn)js版連連看游戲，如下圖所示： 首先看一下html的布局方式在index.html文件中： 復(fù)制代碼 代碼如下: !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN /TR/xhtml1/DTD/xhtml1-transitional.dtd

2、html head meta http-equiv=Content-Type content=text/html; charset=utf-8/ title 連連看 /title link rel=stylesheet type=text/css href=css/index.css/ /head body center div id=whole div id=gamePanel tabindex=0 div id=pieces /div /div div id=gameLogo /div div id=scorePanel span 分 數(shù) /span /div div id=score s

3、pan 0 /span /div div id=timePanel span 時 間 /span /div div id=time span 0 /span /div div id=button input id=start type=button value=開始 /input input id=reset type=button value=重置 /input /div /div /center script type=text/javascript src=js/map.js /script script type=text/javascript src=js/piece.js /scr

4、ipt script type=text/javascript src=js/game.js /script /body /html css文件夾下的index.css文件如下： 復(fù)制代碼 代碼如下: body font-size : 16px; font-weight : bold; color : grey; #whole border : 1px double #999999; border-width : 5px; width : 800px; height : 505px; position : relative; #gamePanel margin: 1px 1px 1px 1px

5、; width : 602px; height : 502px; background : url(./img/background.gif) repeat; position : absolute; #pieces margin-top : 35px; border : 1px solid #999999; width : 546px; height : 434px; position: relative; #pieces .piece width : 32px; height : 36px; position : relative; cursor : pointer; float : le

6、ft; #pieces .track width : 32px; height : 36px; position : relative; float : left; #pieces .track2 width : 32px; height : 36px; position : relative; float : left; background : red; #gameLogo margin-top : 60px; border : 1px solid #999999; left : 607px; width : 187px; height : 73px; background : url(.

7、/img/logo.gif); position: absolute; #scorePanel border : 1px solid #999999; left : 607px; top : 200px; width : 187px; height : 30px; position : absolute; #score border : 1px solid #999999; left : 607px; top : 240px; width : 187px; height : 30px; position : absolute; #timePanel border : 1px solid #99

8、9999; left : 607px; top : 300px; width : 187px; height : 30px; position : absolute; #time border : 1px solid #999999; left : 607px; top : 340px; width : 187px; height : 30px; position : absolute; #button border : 1px solid #999999; left : 607px; top : 400px; width : 187px; height : 30px; position :

9、absolute; 下面讓我們來看一下最核心的js部分實現(xiàn)代碼，js部分分為三個源文件即game.js、map.js、piece.js每一個源文件對應(yīng)一個類，其中本游戲通過game類來操縱map和圖片piece對象： game.js代碼如下： 復(fù)制代碼 代碼如下: / 游戲控制類 var Game = / 游戲背景 gamePanel : null, / 分數(shù) score : 0, / 時間 time : 0, / 圖片映射表 pieceMap : null, / 圖片列表 pieceList : , / 圖片列表不包含圖片 pieceImgList : , / 圖片隨機數(shù)列表 randomL

10、ist : , / 軌跡列表 trackList : , / 游戲是否開始 isGameBigin : false, / 游戲是否結(jié)束 isGameOver : false, / 游戲是否重置 isGameReset : false, / 圖片元素是否第一次點擊 isFirstClick : true, / 開始游戲 start : function() document.getElementById(start).disabled = true; document.getElementById(reset).disabled = false; if (this.isGameReset) th

11、is.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; do

12、cument.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.gamePa

13、nel = 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 204; i +) var piece = new Piece(this); this.pieceList.pu

14、sh(piece); var x = (i%17); 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); pie

15、ce.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.length; i +) this.pieceImgListi.initImg(); this.pieceImgListi.img.src = img/pieces/+this.randomListi

16、+.gif this.pieceImgListi.setImgSrc(this.pieceImgListi.img.src); / 執(zhí)行圖片點擊事件 this.pieceImgListi.onClick(); , / 初始化隨機表 initRandomList : function() / 獲取隨機數(shù)列，成雙出現(xiàn) for (var i = 0; i i +) var random = parseInt(Math.random()*22*10000, 10); var number = random%23; this.randomList.push(number); this.randomLis

17、t.push(number); , / 打亂隨機表 messRandomList : function() for (var i = 0; i this.randomList.length; i +) var random = parseInt(Math.random()*15*10000, 10); var number = random%150; var temp; temp = this.randomListi; this.randomListi = this.randomListnumber; this.randomListnumber = temp; , / 開始計時 startTi

18、me : function() var _this = this; if (this.isGameOver) return; else this.time +; document.getElementById(time).innerHTML = this.time; this.isGameBegin = true; setTimeout(function() _this.startTime();, 1000); , / 清除 clear : function() for (var i = 0; i this.pieceList.length; i +) this.gamePanel.remov

19、eChild(this.pieceListi.dom); this.pieceList = ; this.randomList = ; 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

20、(); / 游戲重置入口 function Reset() Game.reset(); 自定義的js版映射結(jié)構(gòu)map.js源文件如下： 復(fù)制代碼 代碼如下: var Map = function() this.data = ; Mtotype = put : function(key, value) this.datakey = value; , get : function(key) return this.datakey; , remove : function(key) this.datakey = null; , isEmpty : function() return th

21、is.data.length = 0; , size : function() return this.data.length; 圖片類piece.js源文件如下： 復(fù)制代碼 代碼如下: var Piece = function(game) / 游戲?qū)ο?this.game = game; / 是否為邊緣元素 this.isEdge = false; / 是否挨著邊緣元素 this.atEdge = false; / 圖片dom元素 this.dom = null; / 圖片元素 this.img = null; / 圖片元素來源 this.src = null; / 軌跡元素 this.tr

22、ack = null; / 是否可以作為軌跡 this.isTracked = false; / 選中標記元素 this.selected = null; / 圖片橫向排列 this.x = 0; / 圖片縱向排列 this.y = 0; / 圖片閃爍Id this.flashId = null; / 圖片是否點擊 this.onClicked = false; / 閃爍次數(shù) this.flashCount = 0; this.init(); Ptotype = / 初始化 init : function() this.dom = document.createElement(

23、div); this.dom.className = piece; this.selected = document.createElement(img); , / 初始化圖片 initImg : function() this.img = document.createElement(img); this.dom.appendChild(this.img); , / 滿足算法后初始化track元素 initTrack : function() if (this.flashId != null) / 停止閃爍 this.stopFlash(); /alert(initTrack middle)

24、; 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); , / 位圖片設(shè)置來源 setImgSrc : function(src) this.src = src; , / 為圖片設(shè)置二維排列位置 setPosition : function(x, y) this.

25、x = x; this.y = y; , / 為圖片設(shè)置選中元素 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.sel

26、ected); / this.img.src = this.src; /this.dom.appendChild(this.img); , / 設(shè)置是否為邊緣元素 setEdge : function(isEdge) this.isEdge = isEdge; , / 設(shè)置是否挨著邊緣元素 setAtEdge : function(atEdge) this.atEdge = atEdge; , / 開始閃爍 flash : function() var _this = this; this.flashId = setInterval(function() _this.setSelected()

27、;, 500); , / 停止閃爍 stopFlash : function() 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); , / 對象被選擇的內(nèi)部函數(shù) onClick : function() if (this.onClicked) return; var _this

28、= this; this.img.onclick = function() if (!document.getElementById(start).disabled) return; if (_this.onClicked) return; if (_this.checkPiece() return; _this.flash(); _this.onClicked = true; ; , / 檢查是否有被點擊的圖片 checkPiece : function() for (var i = 0; i this.game.pieceList.length; i +) if (this.game.pi

29、eceListi.onClicked & !this.game.pieceListi.equal(this) if (this.game.pieceListi.equalImage(this) /alert(The same Image); this.searchTrack(this.game.pieceListi); else this.game.pieceListi.stopFlash(); this.game.pieceListi.onClicked = false; this.onClicked = false; return false; return true; else cont

30、inue; 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.is

31、Reach2(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) ret

32、urn 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 this.max(this.y, piece.y); 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.g

33、ame.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 this.max(this.x, piece.x); i +) /alert(this.y = piece.y: + i + , + piece.y); if (this.game.pieceMap.get(i + , + piec

34、e.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; , / 拐一次彎搜索 isReach1 : function(piece) /alert(isReach1); var corner_1 = this.game.pieceMap.get(this.x + , + piece.y); var corner_2 = this.

35、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.isStraightR

36、each(piece) & corner_2.isPass() /alert(corner_2: + piece.x + , + this.y); this.game.trackList.push(corner_2); return true; return false; , / 直接或拐一次彎搜索 isReach : function(piece) var a = this.isStraightReach(piece); var b = this.isReach1(piece); return a | b; , / 拐兩次彎搜索 isReach2 : function(piece) / 沿x

37、軸正向搜索 for (var i = this.x + 1; i 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);

38、return true; / 沿x軸搜索 for (var i = this.x - 1; i 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

39、+ , + this.y); return true; / 沿y軸搜索 for (var i = this.y - 1; i 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.

40、pieceMap.get(this.x + , + i); return true; / 沿y軸正向搜索 for (var i = this.y + 1; i 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.trackLis

41、t.push(this.game.pieceMap.get(this.x + , + i); return true; return false; , / 路徑連接 linkTrack : function(piece) this.initTrack(); piece.initTrack(); this.changeScore(); this.showTrack(piece); , / 顯示足跡 showTrack : function(piece) this.game.trackList.push(piece); this.track.className = track2; for (var

42、 i = 0; i this.game.trackList.length; i +) /alert(i); this.game.trackListi.track.className = track2; var _this = this; setTimeout(function() _this.hideTrack(), 500); , / 隱匿足跡 hideTrack : function() for (var i = 0; i this.game.trackList.length; i +) this.game.trackListi.track.className = track; this.

43、game.trackList = ; this.track.className = track; this.isTracked = true; , / 分數(shù)增加 changeScore : function() this.game.score += 100; document.getElementById(score).innerHTML = this.game.score; , min : function(a, b) if (a b) return a; else return b; , max : function(a, b) if (a b) return a; else return

44、 b; , / 判斷是否通過 isPass : function() return this.track != null; 以上是源文件的代碼,具體的實現(xiàn)代碼請關(guān)注CSDN中zhangjinpeng66下載。下面講一下連連看游戲最核心的部分，js實現(xiàn)搜索路徑。 js實現(xiàn)搜索路徑算法首先最簡單的是判斷兩個圖片能否直線到達函數(shù)代碼如下： 復(fù)制代碼 代碼如下: / 直線 isStraightReach : function(piece) /alert(isStraightReach); if (this.isNear(piece) return true; var a = false; var b

45、= false; / 沿y軸方向搜索 if (this.x = piece.x) /alert(!); for (var i = this.min(this.y, piece.y) + 1; i this.max(this.y, piece.y); 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 + , +

46、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 this.max(this.x, piece.x); i +) /alert(this.y = piece.y: + i + , + piece.y); if (this.game.pieceMap.get(i + , + piece.y).isPass() b = true; this.ga

47、me.trackList.push(this.game.pieceMap.get(i + , + piece.y); continue; else b = false this.game.trackList = ; return b; return a | b; , 該函數(shù)實現(xiàn)了連連看判斷兩圖片是否符合連接條件的最簡單的一步,然后是拐一次彎搜索。 復(fù)制代碼 代碼如下: / 拐一次彎搜索 isReach1 : function(piece) /alert(isReach1); var corner_1 = this.game.pieceMap.get(this.x + , + piece.y);

48、 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) &