使用非html5实现js板连连看游戏示例代码.docVIP

使用非html5实现js板连连看游戏示例代码连连看游戏通常情况下都是使用html5来实现的，不过从现在开始就可以使用js来实现了，具体的代码如下，喜欢的朋友可以参考下，希望对大家有所帮助 向大家分享一款如何实现js版连连看游戏，如下图所示： 首先看一下html的布局方式在index.html文件中： 复制代码 代码如下: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 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 分 数 /span /div div id=score span 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 /script script type=text/javascript src=js/game.js /script /body /html css文件夹下的index.css文件如下： 复制代码 代码如下: 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 : 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; } #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(../img/logo.gif); position: absolute; } #scorePanel { border : 1px solid #999999;