JavaScript to write repeatedly watch games _javascript tips

Every day to see others play repeatedly see, said not seriously played, do not put two of the same picture connected together, I write a can.

Use JavaScript to write a, hosted to GitHub, online demo address view: Open

The final effect chart:

What do you think about before you write?

1: How to determine the two elements can be connected, just the beginning of the time I also wonder, you can refer to here: open;

2: How to choose the template engine, I used the template of the base line, because the syntax is simple. Originally wanted to use handlebars, but this is a bit big ah, and the bottom line library also provides a lot of common tool methods (̀ω ́) y;

3: Layout How to layout, with table, TD plus border, a div,div inside the border is repeatedly looking at the pieces, the interface is more refreshing, simple, in fact, directly with canvas write also line, did not seriously study canvas;

4: Two elements connecting the effect of the connection how do we do it, if you use the DOM implementation then need to use the picture, element connection time to the picture to the connection path. Or use canvas, directly with canvas to draw the effect of the connection, I choose the latter;

Because I do not consider the low browser, using the Zeptojs library, based on the habit, the bootstrap also cited;

Three main constructors were used, including data, View, Score;

The view is structured as follows, with fewer things including event binding, interface generation, and drawing effects when two of the same elements disappear:

View

/**
 * @desc Generate Map * *
 /renderhtml:function/** * Based on data
@desc The main event binding of the interface
* @return this;
* * * * * * *
 bindevents:function


/**
* @desc tool method, in the canvas above the drawing;
* @param [{x:0,y:0},{x:1,y:1},{x:2,y:2},{x:3,y:3}] an array that is automatically redrawn;
* * * * * *
showsparkline:function

tbody Internal element template is like this:

<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>

The Getimg method of the above code invokes the Global window's Getimg method, which generates a picture string based on the data and is an auxiliary function:

  window.getimg = function (num) {
    switch (num) {case
      1: Return
        " ';
      Case 2: Return
        " ';
      Case 3: Return
        " ';
      Case 4: Return
        " ';
      Case 5: Return
        " ';
      Case 6: Return
        " 
 

Because the data is a two-dimensional array, the template must use two for loops, looping the generation of HTML strings, if the combination of data and templates, will generate the following image of the DOM structure:

Fractional module constructor score, all the code for scoring is this (passing elements in, directly calling the Addscore method of the generated instance, rendering the DOM automatically), and writing a constructor for the score is because of decoupling:

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

  $.extend (Score.prototype, {
    /**
     * @desc Change the element's HTML, incrementing the score;
     * @param
     * */
    addscore:function () {
      this.el.html (++this.score);
    }
  );

constructor data, the main structure is as follows, although the method is relatively small, in fact, data this piece of code accounted for 300 lines .... To determine whether the element can be connected with the Canconnect method, the Canconnect method will call the Dirconnect method, calculation is more cumbersome, want to understand the best to write their own:

New initialization
Newdata:function

//Tool method, random array of mixed dishes;
Suffer:function

 /**
* @desc set value, the corresponding data in the map is emptied or set, dual interface
 * @param x, y
* @return Chain
* * * *
set:function

/**
 * @desc Determine whether two elements can be connected
* @param [{x:1,y:1},{x:1,y:1}]
* @return False | | []
* */
canconnect:function

/**
* @desc determine if the element can be directly connected
* @param [{x:1,y:1},{x:1,y:1}]
* return False | | True
* */
Dirconnect

All of the code is as follows, as a reference:

<! DOCTYPE html>  

Online Demo address view: Open

Found a person to write repeatedly, the code is very few, as a reference bar:

<!
DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >  

The above is the entire contents of this article, I hope you can enjoy.