JavaScript 작성 Lianliankan 미니 게임_javascript 기술

다른 사람들이 Lianliankan을 매일 플레이하는 것을 보는데, 그들은 진지하게 플레이하지 않았다고 합니다. 똑같은 그림 두 개를 연결하면 어떨까요?

Javascript를 사용하여 작성하고 github에 호스팅했습니다. 온라인 DEMO 주소 보기: 열기

최종 렌더링:

연련관을 쓰기 전에 고려해야 할 사항은 무엇인가요?

1: 두 요소가 연결될 수 있는지 어떻게 판단하나요? 저도 처음에 헷갈렸어요. 여기를 참고하세요.

2: 템플릿 엔진을 선택하는 방법은 구문이 간단하기 때문에 최종 라이브러리의 템플릿을 사용했습니다. 원래는 핸들바를 사용하고 싶었으나 용량이 좀 크고, 결론적으로 라이브러리에서도 공통적인 도구와 방법을 많이 제공하고 있습니다. ( •̀ Ω •́ )y

3: 레이아웃을 배치하는 방법은 무엇입니까? 테두리 안에 div가 있습니다. div는 실제로 Lianliankan의 체스 조각입니다. 저는 캔버스에 직접 글을 씁니다.

4: 두 요소가 연결되면 어떻게 연결 효과를 얻을 수 있나요? DOM을 사용하여 구현하는 경우 요소가 연결되면 그림을 연결 경로에 배치해야 합니다. . 아니면 캔버스를 사용하여 연결 효과를 직접 그립니다.

저는 저사양 브라우저를 고려하지 않아서 zeptoJS 라이브러리를 사용했고, 습관적으로 부트스트랩도 참고했습니다.

Data, View, Score 등 세 가지 주요 생성자가 사용됩니다.

View의 구조는 다음과 같으며, 이벤트 바인딩, 인터페이스 생성, 두 개의 동일한 요소가 사라질 때 그리기 효과 등 상대적으로 적은 것들이 있습니다.

보기

/**
 * @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 메서드는 전역 창의 getImg 메서드를 호출하며 이 메서드는 데이터를 기반으로 그림 문자열을 생성하며 보조 함수입니다.

  window.getImg = function( num ) {
    switch(num){
      case 1:
        return "<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201507/2015070711041812.jpg?x-oss-process=image/resize,p_40"  class="lazy" / alt="JavaScript 작성 Lianliankan 미니 게임_javascript 기술" >";
      case 2:
        return "<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201507/2015070711041812.jpg?x-oss-process=image/resize,p_40"  class="lazy" / alt="JavaScript 작성 Lianliankan 미니 게임_javascript 기술" >";
      case 3:
        return "<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201507/2015070711041812.jpg?x-oss-process=image/resize,p_40"  class="lazy" / alt="JavaScript 작성 Lianliankan 미니 게임_javascript 기술" >";
      case 4:
        return "<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201507/2015070711041812.jpg?x-oss-process=image/resize,p_40"  class="lazy" / alt="JavaScript 작성 Lianliankan 미니 게임_javascript 기술" >";
      case 5:
        return "<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201507/2015070711041812.jpg?x-oss-process=image/resize,p_40"  class="lazy" / alt="JavaScript 작성 Lianliankan 미니 게임_javascript 기술" >";
      case 6:
        return "<img  src="/static/imghwm/default1.png"  data-src="http://files.jb51.net/file_images/article/201507/2015070711041812.jpg?x-oss-process=image/resize,p_40"  class="lazy" / alt="JavaScript 작성 Lianliankan 미니 게임_javascript 기술" >";
    }
  };

Lianliankan의 데이터는 2차원 배열이므로 템플릿에 두 개의 for 루프를 사용해야 합니다. 루프는 데이터와 템플릿을 결합하면 아래 그림과 같은 DOM 구조가 생성됩니다. >

Score 모듈 생성자 함수 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);
    }
  });

Constructor 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="js/zepto.js"></script>
  <script src="js/underscore1.8.js"></script>
  <style>
    table{
      border-collapse: collapse;
    }
    td{
      border:1px solid #f5f5f5;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
    td.active{
      opacity: 0.7;
    }
    td div{
      width:40px;
      height:40px;
    }
    .bg1{
      /*background: #2ECC71;*/
    }
    .bg2{
      /*background: #E67E22;*/
    }
    .bg3{
      /*background: #34495E;*/
    }
    .bg4{
      /*background: #1ABC9C;*/
    }
    .relative{
      position: relative;
    }
    .absolute{
      position: absolute;
      left:0;
      top:0;
    }
  </style>
</head>
<body>

<div class="container ">
  <div class="row" style="width:80%;margin:0 auto;">
    <h3 id="得分-span-class-label-label-default-id-score-span">得分<span class="label label-default" id="score">0</span></h3>
  </div>
</div>

<div class="container">
  <div class="row relative">
    <table class="absolute">
      <thead></thead>
      <tbody id="tbody">
      </tbody>
    </table>
    <canvas id="canvas">
      <p>Your browserdoes not support the canvas element.</p>
    </canvas>
  </div>
</div>
<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>
<script>
  var el = document.getElementById("tbody");
  var elCan = document.getElementById("canvas");
  var tpl = document.getElementById("tr-td-tpl");

  var cfg = {
    width : 8,
    height : 8
  };
  window.getImg = function( num ) {
    switch(num){
      case 1:
        return "<img  src="/static/imghwm/default1.png"  data-src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"  class="lazy" / alt="JavaScript 작성 Lianliankan 미니 게임_javascript 기술" >";
      case 2:
        return "<img  src="/static/imghwm/default1.png"  data-src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"  class="lazy" / alt="JavaScript 작성 Lianliankan 미니 게임_javascript 기술" >";
      case 3:
        return "<img  src="/static/imghwm/default1.png"  data-src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"  class="lazy" / alt="JavaScript 작성 Lianliankan 미니 게임_javascript 기술" >";
      case 4:
        return "<img  src="/static/imghwm/default1.png"  data-src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"  class="lazy" / alt="JavaScript 작성 Lianliankan 미니 게임_javascript 기술" >";
      case 5:
        return "<img  src="/static/imghwm/default1.png"  data-src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"  class="lazy" / alt="JavaScript 작성 Lianliankan 미니 게임_javascript 기술" >";
      case 6:
        return "<img  src="/static/imghwm/default1.png"  data-src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"  class="lazy" / alt="JavaScript 작성 Lianliankan 미니 게임_javascript 기술" >";
    }
  };

  var View = function(data, score) {
      this.data = data;
      this.score = score;
     },
     Data = function(cfg) {
      this.cfg = {
        width : cfg.width+2,
        height : cfg.height+2
      };
       this.getRandom = this.getRandom();
     },
     Score = function(el) {
       this.el = $(el);
       this.score = 0;
     };

  $.extend( Data.prototype, {
    /**
     * @desc 把两个
     * @param HTMLELEMENT
     * @return true || false
     * */
    clear : function(obj, target) {
    },
    /**
     * @desc 根据this.cfg新建数据到this.map
     * @param void
     * @return void
     * */
    newData : function() {
      var result = [];
      for(var i=0; i<=this.cfg.height+1; i++ ) {
        result[i] = result[i] || [];
        for(var j = 0; j<= this.cfg.width+1; j++) {

          if(i === 0 || j===0 || (i===this.cfg.height+1) || j === (this.cfg.width+1) ) {
            result[i][j] = 0;
          }else{
            //1-4
            result[i][j] = this.getRandom();
          }
        };
      };
      this.map = result;
      return this;
    },
    //随机混肴数组;
    suffer : function(obj) {
      function random(min, max) {
        if (max == null) {
          max = min;
          min = 0;
        }
        return min + Math.floor(Math.random() * (max - min + 1));
      };
      var set = obj;
      var length = set.length;
      var shuffled = Array(length);
      for (var index = 0, rand; index < length; index++) {
        rand = random(0, index);
        if (rand !== index) shuffled[index] = shuffled[rand];
        shuffled[rand] = set[index];
      }
      return shuffled;
    },
    /**
     * @return 返回值必须是成双的， 消除到最后尼玛，发现有一堆不匹配的，玩个球;
     * */
    getRandom : function() {
      //如果消消乐是3*3， 那么你告诉我....最后一个和谁消, 所以要做的就是把所有的元素生成变成一半，然后返回;
      var arr = new Array( (this.cfg.height) * (this.cfg.width) / 2 );
      var result = [];
      for(var i=0; i<arr.length; i++ ) {
        arr[i] = (Math.floor( Math.random()*6 ) + 1);
      };
      result = Array.prototype.concat.call( [] , arr, arr);
      result = this.suffer( result );
      return function( ) {
        return result.pop();
      };
    },
    /**
     * @desc set值
     * @param x, y
     * @return chain
     * */
    set : function( x, y) {
      this.map[y][x] = 0;
      return this;
    },
    /**
     * @desc 判断元素是否可以连接
     * @param [{x:1,y:1},{x:1,y:1}]
     * @return false || true
     * */
    canConnect : function(obj,target) {
      var map = this.map;
      //循环obj的y轴相等 ， obj.x旁边所有数据为0的元素;;
      var getX = function( obj ) {
        var result = [];
        //循环找出在X附近为0的元素;
        for(var i=obj.x+1; i< map[0].length; i++) {
          if( map[obj.y][i] == 0 ) {
            result.push( {x:i, y:obj.y} );
          }else{
            break;
          };
        };
        for(var i=obj.x-1; i>=0; i--) {
          if( map[obj.y][i] == 0 ) {
            result.push( {x:i,y:obj.y} );
          }else{
            break;
          };
        };
        return result;
      };
      //循环obj的x轴相等， obj.y旁边所有数据为0的元素;
      var getY = function(obj) {
        var result = [];
        for(var i=obj.y+1; i<map.length; i++) {
          if( map[i][obj.x] == 0) {
            result.push( { x : obj.x ,y : i} );
          }else{
            break;
          };
        };
        for(var i=obj.y-1; i>=0; i--) {
          if( map[i][obj.x] == 0 ) {
            result.push( { x : obj.x ,y : i} );
          }else{
            break;
          };
        };
        return result;
      };
      var arr0 = Array.prototype.concat.call( [], getX(obj), obj, getY(obj)).filter(function(obj) {
        return !!obj;
      });
      var arr1 = Array.prototype.concat.call( [], getX(target), target, getY(target) ).filter(function(obj) {
        return !!obj;
      });
      for(i = 0; i<arr0.length; i++) {
        for(var j = 0; j<arr1.length; j++) {
          //只要有一个连接就返回true;
          if( this.dirConnect(arr0[i],arr1[j]) ) {
            return [obj, arr0[i], arr1[j], target];
          };
        };
      };
      return false;
    },
    /**
     * @desc 判断元素是否可以直接连接
     * @param [{x:1,y:1},{x:1,y:1}]
     * @return false || true
     * */
    dirConnect : function(obj, target) {
      var map = this.map;
      //row是x轴 列
      //col是y轴 行
      var min = 0, max = 0, sum = 0;
      if(obj.y === target.y) {
        if(obj.x < target.x) {
          min = obj.x;
          max = target.x;
        }else{
          min = target.x;
          max = obj.x;
        };
        for(var i=min; i<=max; i++) {
          sum += map[obj.y][i];
        };
        if(sum === (map[obj.y][obj.x] + map[target.y][target.x])) {
          return true;
        }else{
          return false;
        };
      };
      if(obj.x === target.x) {
        if(obj.y < target.y) {
          min = obj.y;
          max = target.y;
        }else{
          min = target.x;
          max = obj.y;
        };
        for( i=min; i<=max; i++) {
          sum += map[i][obj.x];
        };
        if( sum === (map[obj.y][obj.x] + map[target.y][target.x])) {
          return true;
        }else{
          return false;
        };
      };
    }
  });
  $.extend( View.prototype, {
    /**
     * @desc 为view添加视图的主元素
     * @return void
     * */
    setEL : function(el) {
      this.el = el;
      return this;
    },
    setTpl : function(tpl) {
      this.tpl = _.template( tpl.innerHTML );
      return this;
    },
    /**
     * @desc 根据数据生成map
     * */
    renderHTML : function() {
      $(this.el).html( this.tpl( {data : this.data.map} ) );
      return this;
    },
    /**
     * @desc 界面的主要事件绑定
     * @return this;
     * */
    bindEvents : function() {
      $(this.el).delegate("td", "click", this.click.bind(this));
      return this;
    },
    /**
     * @desc click事件， 单独抽出来的;
     * */
    click : function(ev) {
      //修改样式;
      $("td.active").removeClass("active");
      var target = $(ev.target).closest("td");
      target.addClass("active");

      //第一次点击我们做的特殊处理;
      var prev = this.prev;
      if( !prev || target[0] === prev[0]){
        this.prev = target;
        return;
      };
      
      if( prev.attr("data-data") === target.attr("data-data")) {
        var xy = JSON.parse( prev.attr("data-info") );
        var xxyy = JSON.parse( target.attr("data-info") );
        //保存了连接的数组信息
        var connectionInfo = [] || false;
        if( connectionInfo = this.data.canConnect( xy, xxyy) ) {
          this.showSparkLine( connectionInfo );
          this.prev = undefined;
          this.data.set(xy.x, xy.y);
          this.data.set(xxyy.x, xxyy.y);
          this.score.addScore();
          var _this = this;
          setTimeout(function() {
            _this.renderHTML();
          },2000);
        };
        prev.attr("data-data", "");
        target.attr("data-data","")
      }else{
        this.prev = target;
      };
    },
    /**
     * @desc 工具方法，在canvas上面进行绘图;
     * @param [{x:0,y:0},{x:1,y:1},{x:2,y:2},{x:3,y:3}]一个数组， 会自动重绘;
    * */
    showSparkLine : function( arr ) {
      arr = arr.map(function(xy) {
        return {
          x : (xy.x)*40 + 20,
          y : (xy.y)*40 + 20
        }
      });
      var elCan = document.getElementById("canvas");
      function spark(ctx) {
        function showAndClear(arr, lineWidth) {
          ctx.clearRect(0,0,elCan.width,elCan.height);
          ctx.beginPath();
          ctx.lineJoin = "round";
          ctx.lineWidth = lineWidth;
          ctx.shadowColor = "rgba(241, 196, 15, 0.41)";
          ctx.shadowOffsetX = 1;
          ctx.shadowOffsetY = 1;
          ctx.shadowBlur = 1;
          for(var i=0; i<arr.length-1; i++) {
            var xy = arr[i];
            var nextXY = arr[i+1]
            ctx.moveTo(xy.x, xy.y);
            ctx.lineTo(nextXY.x, nextXY.y);
          };
          ctx.stroke();
        };
        var ctx = elCan.getContext("2d");
        ctx.strokeStyle = "#F1C40F";
        var lineWidthArr = [1,2,1,2,1,3,1,0];
        var len = lineWidthArr.length;
        var times = 400, addTimes = 200;
        while(len--) {
          (function(len){
            setTimeout(function() {
              showAndClear(arr, lineWidthArr[len]);
              if(len==0) {
                ctx.clearRect(0,0,elCan.width,elCan.height);
              }
            }, times);
            times += addTimes;
          })(len)
        };
      };
      spark( elCan );
    }
  });
  $.extend( Score.prototype , {
    /**
     * @desc 改变元素的HTML，递增分数;
     * @param
     * */
    addScore : function() {
      this.el.html(++this.score);
    }
  });

  $(function() {
    var score = new Score( document.getElementById("score") );
    var data = new Data(cfg).newData();
    var view = new View(data, score);
    view.setEL( el ).setTpl( tpl).renderHTML().bindEvents();
    (function init() {
      //如果通过style属性添加width或者height，会根据原来的宽和高度自动伸缩的
      elCan.width = el.offsetWidth;
      elCan.height = el.offsetHeight;
    })();
  });

</script>
</body>
</html>

온라인 DEMO 주소 보기:

열기

다른 사람이 작성한 Lianliankan을 발견했는데 코드가 거의 없습니다.

<!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></script>
<script  type="text/javascript" >

  $(function(){
    var cont=$("#board");
    var colors=["#ff0000","#00ff00","#0000ff","#ffcc33","#000000","#00ffcc","#ffffff"];
    var pos=[];
    var click=0;
    var firstSpan;
    var fx;
    var fy;
    var arr=[];

    arr=[0,0,0,0,0,0,0,0];
    pos.push(arr);

    for(var i=0;i<8;i++){
      new creSpan(i,cont,0,i*40,colors[6],0);
    }

    for(var i=1;i<=6;i++){
      m=new creSpan(i,cont,i*40,0,"#ffffff");
      arr=[0];

      for(var j=0;j<6;j++){
        var color=Math.floor(Math.random()*6);
        new creSpan(i,cont,i*40,(j+1)*40,colors[color],(color+1));
        arr.push(1);
      }
      m=new creSpan(i,cont,i*40,(j+1)*40,"#ffffff",0);
      arr.push(0);
      pos.push(arr);

    }
    for(var i=0;i<8;i++){
      m=new creSpan(i,cont,7*40,i*40,"#ffffff",0);
    }
    arr=[0,0,0,0,0,0,0,0];
    pos.push(arr);

    function clear(c1,c2,x,y){
      if(c1!=null)c1.style.background="#ffffff";
      if(c2!=null){
        c2.style.background="#ffffff";
        pos[x-1][y-1]=0;
        pos[fx-1][fy-1]=0;
      }
      fx=0;
      fy=0;
      click=0;
    }

    $.each($("#board span"),function(index,mSpan){
      $(this).click(function(){
        var x=Math.floor(index/8);
        var y=Math.floor(index%8);
        if(click==0){
          click=1;
          firstSpan=mSpan;
          fx=x;
          fy=y;
          return;
        }

        if(firstSpan.id!=mSpan.id||(x==fx&&fy==y)){
          clear(null,null,0,0);
          return;
        }
        var col=6;
        var row=6;

        for(var i=0;i<row+2;i++){
          var step=i-x>0&#63;1:-1;
          var count=0;
          for(var j=x;j!=i;j+=step){
            count+=pos[j][y];
          }
          step=y>fy&#63;-1:1;
          for(j=y;j!=fy;j+=step){
            count+=pos[i][j];
          }
          step=i>fx&#63;-1:1;
          for(j=i;j!=fx;j+=step){
            count+=pos[j][fy];
          }
          if(count==1){
            clear(firstSpan,mSpan,x,y);
            return;
          }
        }
        for(i=0;i<col+2;i++){
          step=i-y>0&#63;1:-1;
          count=0;
          for(j=y;j!=i;j+=step){
            count+=pos[x][j];
          }
          step=x>fx&#63;-1:1;
          for(j=x;j!=fx;j+=step){
            count+=pos[i][j];
          }
          step=i<fy&#63;1:-1;
          for(j=i;j!=fy;j+=step){
            count+=pos[fx][j];
          }
          if(count==1){
            clear(firstSpan,mSpan,x,y);
            return;
          }
        }
        clear(null,null,0,0);

      });
    });
  });

  function creSpan(n,cont,mtop,mleft,mcolor,idstr){
    var mSpan=document.createElement("span");
    cont[0].appendChild(mSpan);
    mSpan.id=idstr;
    with(mSpan.style){
      top=mtop+"px";
      left=mleft+"px";
      background=mcolor;
    }
  };

</script>
</html>

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.