Jquery做的网页版连连看（初稿）

最新推荐文章于 2015-06-22 23:45:00 发布

lai_gb

最新推荐文章于 2015-06-22 23:45:00 发布

阅读量2.2k

点赞数

分类专栏： Javascript &amp; JQuery 文章标签： jquery function html button border input

本文链接：https://blog.csdn.net/lai_gb/article/details/4418323

版权

Javascript & JQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这两天一直构思做一个网页版连连看，不过一直没有时间也没有算法。今天早上有空，先完成了一个外壳，就少了算法。我知道网页版的连连看其实也有人做过了，但可能每个人的想法不同，思路也不同。我只是当做一种练习。不过本次的练习有缺陷：

1、没有完整的算法，目前只是判断是否一样的图形，如果一样就消除；只需要完善ExcuteFindPath（）方法就能实现整个代码。如果有谁可以提供一个完整的算法，请与我联系。

2、因为图片不是作为背景形式呈现，所以在浏览器中拖动时会有问题，欢迎大家修改，并将修改后的代码公布一下。

3、重新排列没有做完，也不打算继续做，希望有人做了公布一下。

4、为了方便定位，使用了table，可能这个不太迎合某些高要求的人。

本代码的一些特色：

1、ajax从handler读取数据在前台呈现，并非完全由页面生成代码。

2、代码较简单易懂，适合初学者。

项目层次如下图：

项目层次

效果图如下：

效果图

主要代码：

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .picMouseEnter { /*border: solid 1px blue;*/ filter: alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; } .picSelect { border:solid 1px Red; } </style> <mce:script src="js/jquery.js" mce_src="js/jquery.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="divContainer"> <div id="divGameArea"> </div> <div id="divButtonArea"> <input type="checkbox" id="chkShowType" /><label for="chkShowType">另一种呈现（用处不大，只是两种实现）</label><br /> <input type="button" id="btnSimple" value="简单" /> <input type="button" id="btnNormal" value="一般" /> <input type="button" id="btnHard" value="高手" /> <input type="button" id="btnReverse" value="重新调整" /> </div> </div> </body> </html>