JavaScript编写连连看小游戏_javascript技巧

来源：客趣旅游网

天天看到别人玩连连看，表示没有认真玩过，不就把两个一样的图片连接在一起么，我自己写一个都可以呢。

　　使用Javascript写了一个，托管到github，在线DEMO地址查看：打开

　　最终的效果图：

　　写连连看之前要先考虑哪些呢？

　　　　1：如何判断两个元素可以连接呢，刚刚开始的时候我也纳闷，可以参考这里：打开；

　　　　2：模板引擎怎么选择呢，我用了底线库的template，因为语法简单。本来想用Handlebars，但是这个有点大啊，而且底线库也提供很多常用工具方法( •̀ ω •́ )y；

　　　　3：布局如何布局呢，用table， td加上边框，边框内部一个div，div就是连连看的棋子，界面更清爽，简单，其实直接用canvas写也行，没认真研究过canvas；

　　　　4：两个元素连接时连线的效果我们要怎么实现呢，如果用dom实现那么需要用到图片，元素连接时候把图片定位到连接的路径。或者用canvas，直接用canvas把连接的效果画出来，我选择后者；

　　因为我不考虑低浏览器，使用了zeptoJS库，基于习惯，把bootstrap也引用了；

　　使用了三个主要构造函数，包括Data， View， Score；

　　View的结构如下, 东西比较少包括事件绑定，界面生成，以及当两个相同元素消失时的绘图效果：

View