JavaScript编写连连看小游戏

网络编程 2024/11/15 佚名

3 2 1

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

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

　　最终的效果图：

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

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

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

/**
 * @desc 根据数据生成map
 * */
 renderHTML : function

/**
* @desc 界面的主要事件绑定
* @return this;
* */
 bindEvents : function


/**
* @desc 工具方法，在canvas上面进行绘图;
* @param [{x:0,y:0},{x:1,y:1},{x:2,y:2},{x:3,y:3}]一个数组， 会自动重绘;
* */
showSparkLine : function

　　tbody内部元素的模板是这样的:

<script type="text/template" id="tr-td-tpl">
  <% for(var i=0; i<data.length; i++) {%>
    <tr>
      <% for(var j=0; j< data[i].length; j++ ) { %>
        <td id="<%=i%><%=j%>" class="bg<%=data[i][j]%>" data-x="<%=j%>" data-y="<%=i%>" data-data="<%=data[i][j]%>" data-info='{"x":<%=[j]%>,"y":<%=[i]%>}'>
          <div>
            <%=getImg(data[i][j])%>
          </div>
        </td>
      <% } %>
    </tr>
  <% } %>
</script>

　　上面代码的getImg方法会调用全局window的getImg方法，这个方法是根据数据生成图片字符串，是一个辅助的函数：

  window.getImg = function( num ) {
    switch(num){
      case 1:
        return "<img src='imgs/ani (1).gif' />";
      case 2:
        return "<img src='imgs/ani (2).gif' />";
      case 3:
        return "<img src='imgs/ani (3).gif' />";
      case 4:
        return "<img src='imgs/ani (4).gif' />";
      case 5:
        return "<img src='imgs/ani (5).gif' />";
      case 6:
        return "<img src='imgs/ani (6).gif' />";
    }
  };

　　因为连连看的数据是个二维的数组，所以模板中必须使用两个for循环，循环产生HTML字符串，如果把数据和模板合在一起，会生成下图的DOM结构：

　　分数模块构造函数Score，所有有关得分的代码就这些了 (把元素传进去，直接调用生成实例的addScore方法，会自动渲染DOM)，为分数单独写一个构造函数是因为为了解耦：

     Score = function(el) {
       this.el = $(el);
       this.score = 0;
     };

  $.extend( Score.prototype , {
    /**
     * @desc 改变元素的HTML，递增分数;
     * @param
     * */
    addScore : function() {
      this.el.html(++this.score);
    }
  });

　　构造函数Data，主要的结构如下，虽然方法比较少，实际上Data这块代码占了300行.... 要判断元素是否可以连接用canConnect方法，canConnect方法又会调用dirConnect方法，计算比较繁琐，想了解的话最好自己写写：

//新建初始化
newData : function

//工具方法，随机混肴数组;
suffer : function

 /**
* @desc set值，把地图中对应的数据清空或者设置，两用接口
 * @param x, y
* @return chain
* */
set : function

/**
 * @desc 判断两个元素之间是否可以连接
* @param [{x:1,y:1},{x:1,y:1}]
* @return false || []
* */
canConnect : function

/**
* @desc 判断元素是否可以直连
* @param [{x:1,y:1},{x:1,y:1}]
* @return false || true
* */
dirConnect

　　所有所有代码如下，作为参考：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <title>link</title>
  <script src="/UploadFiles/2021-04-02/zepto.js">

　　在线DEMO地址查看：打开
　　找到了一个别人写的连连看， 代码极少， 作为参考吧：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> 连连看 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
    #board{width:508px; height:500px; margin: 30px auto 0px; overflow: hidden; position: relative; background-color: #999999;}
    #board span{display: block; position: absolute; width: 30px; height: 30px; }
  </style>
</head>
<body>
<div id="board" >
</div>
</body>

<!--       js        -->
<script src="/UploadFiles/2021-04-02/jquery.min.js">

以上所述 就是本文的全部内容了，希望大家能够喜欢。

javascript,连连看

标签：

javascript,连连看

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“JavaScript编写连连看小游戏”

JavaScript编写连连看小游戏

暂无“JavaScript编写连连看小游戏”评论...

更新动态

2024年11月15日

JavaScript编写连连看小游戏

javascript,连连看

使用JavaScript制作一个简单的计数器的方法

评论“JavaScript编写连连看小游戏”

更新动态

友情链接