《原生JavaScript实现连连看游戏(附源码).doc》由会员分享，可在线阅读，更多相关《原生JavaScript实现连连看游戏(附源码).doc（20页珍藏版）》请在金锄头文库上搜索。
1、原生JavaScript实现连连看游戏(附源码)向大家推荐一款原生JavaScript版连连看游戏，首页如下图所示： 首先看一下html的布局方式在index.html文件中： 复制代码 代码如下: !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html head meta http-equiv=Content-Type content=text/html; charset=utf-8/ title 连连看 /titl
2、e 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 分 数 /span /div div id=score span 0 /span /div div id=timePanel span 时 间 /span /div div id=time span 0 /span /div div
3、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 /script script type=text/javascript src=js/game.js /script /body /html css文件夹下的index.css文件如下
4、： 复制代码 代码如下: 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; width : 602px; height : 502px; background : url(./img/background.gif) repeat; position
5、 : 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 : left; #pieces .track width : 32px; height : 36px; position : relative; float : left; #piec
6、es .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(./img/logo.gif); position: absolute; #scorePanel border : 1px solid #999999; left : 607px
7、; 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 #999999; left : 607px; top : 300px; width : 187px; height : 30px; position : absolute; #tim
8、e 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 : absolute; 下面让我们来看一下最核心的js部分实现代码，js部分分为三个源文件即game.js、map.js、piece.js每一个源文件对应一个类，其中本游戏通过ga
9、me类来操纵map和图片piece对象： game.js代码如下： 复制代码 代码如下: / 游戏控制类 var Game = / 游戏背景 gamePanel : null, / 分数 score : 0, / 时间 time : 0, / 图片映射表 pieceMap : null, / 图片列表 pieceList : , / 图片列表不包含图片 pieceImgList : , / 图片随机数列表 randomList : , / 轨迹列表 trackList : , / 游戏是否开始 isGameBigin : false, / 游戏是否结束 isGameOver : false,
10、/ 游戏是否重置 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
11、 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
12、).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.isG
13、ameBegin = 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.push(piece); var x = (i%17); var y = Math.floor(i/17); this.pieceMap.put(x+,+y, piece); pi
14、ece.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
