표 셀 값 저장 및 비교

Question

나는 간단한 메모리 매치 게임을 만들고 있는데, 각 클릭 된 셀의 텍스트 값을 비교하여 일치하는지 확인하려고합니다. 하단의 click 이벤트 핸들러는 그렇게하려는 시도이지만 클릭 한 셀을 저장하는 방법을 모르겠습니다. 각 셀의 텍스트 값을 저장하고 비교하면서 비교할 셀을 저장하는 방법. 클릭 한 두 셀이 동일하지 않은 경우이를 숨길 수 있습니까? 텍스트 들여 쓰기가 100 %로 설정되고 오버플로는 기본적으로 숨겨져 있습니다.)

가

1) 단순히 "클릭"어떤 종류를 전환 할 각 셀에 onclick 기능 클래스 (toggleClass()를 사용 : 개인적으로

var createTable = function (col, row) { 
    $('table').empty(); 
    for (var i = 1; i <= row; i++) { 
     $('table').append($('<tr>')); 
    } 
    for (var j = 1; j <= col; j++) { 
     $('tr').append($('<td>')); 
    } 
    countCells = row * col; 
}; 
createTable(4, 1); 

var arr = [1, 2, 1, 2]; 
var pushNum = function() { 
    var len = arr.length; 
    for (var i = 0; i <= len; i++) { 
     var ran = Math.ceil(Math.random() * arr.length) - 1; 
     $('td').eq(i).append(arr[ran]); 
     arr.splice(ran, 1); 
    } 
}; 
pushNum(); 

var match1; 
$('td').click(function() { 
    $(this).css('text-indent', 0); 
    match1 = $(this).eq(); 
    if (match1.val() === "1") { 
     alert("GOOD"); 
    } 
}); 

Answer 1

, 나는 내가 두 가지 일을 처리하는 기능의 몇 가지를 만들 것이라고 생각 셀을 클릭하면 또한 시각적 인 표시기를 가질 수 있습니다 (예 : 텍스트 또는 배경색 또는 이와 유사한 것을 변경).

2) 전환이 완료된 후 # 1에서 "onclick"에 의해 호출되어 2 개의 셀을 정확히 클릭했는지 확인하는 독립 함수입니다. jQuery 셀렉터를 사용하여 "클릭 된"클래스의 셀을 모두 가져올 수 있고 반환 세트의 길이가 2이면및 last() 함수를 사용하여 클릭 한 셀의 값을 가져 와서 비교할 수 있습니다. 그들. 이 함수는 위에서 나온 "do they match"JS 코드를 통합하는 함수입니다.

그런 식으로 실제로 값을 저장하지 않아도됩니다. 두 가지 선택이 있었는지 알지 못하면 확인하지 않고 실시간으로 확인합니다.

Answer 2

클래스를 사용하는 대신 테이블 셀 값에 대해 data-num 특성을 사용했습니다. 동일한 셀을 두 번 클릭하거나 이미 표시된 셀을 클릭하는 것과 같이 해결해야 할 몇 가지 문제가있었습니다.하지만 모두 이제는 작동합니다!

var countCells; 

var createTable = function (col, row) { 
    var str = ''; 
    for (var i = 1; i <= row; i++) { 
     str += '<tr>'; 
     for (var j = 1; j <= col; j++) { 
      str += '<td>'; 
     } 
     str += '</tr>'; 
    } 
    $('table').html(str); 
    countCells = row * col; 
}; 
createTable(6, 3); 

function shuffle(o) { 
    for (var j, x, i = o.length; i; j = parseInt(Math.random() * i, 10), x = o[--i], o[i] = o[j], o[j] = x); 
    return o; 
} 
// http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript 

var arr = []; 
for (var i = 0; i < countCells/2; i++) { 
    arr[i] = arr[i + countCells/2] = i + 1; 
} 
shuffle(arr); 
//console.log(arr); 

var tds = $('table td'); 
tds.each(function (i) { 
    this.setAttribute('data-num', arr[i]); 
}); 

var attempts = 0; 
var match1 = null; 
var info = $('#info'); 
var wait = false; 
$('td').click(function() { 
    if (wait) { 
     return; 
    } // wait until setTimeout executes 
    var num = this.getAttribute('data-num'); 
    if (match1 === null && num != 'X') { //1st click on unmatched cell 
     match1 = this; 
     this.innerHTML = num; 
     attempts++; 
     info.text('Attempts: ' + attempts); 
     return; 
    } else { //2nd click 
     var num1 = match1.getAttribute('data-num'); //1st num 
     if (match1 === this) { 
      // clicked twice this cell 
      return; 
     } else if (num == 'X') { 
      // clicked on already revealed cell 
      return; 
     } else if (num == num1) { 
      // both cells match 
      info.text('Bingo! Attempts: ' + attempts); 
      this.innerHTML = match1.innerHTML = num1; 
      this.setAttribute('data-num', 'X'); 
      match1.setAttribute('data-num', 'X'); 
      match1 = null; 
     } else { 
      // cells not match 
      info.text('Try again. Attempts: ' + attempts); 
      this.innerHTML = num; 
      var self = this; 
      wait = true; 
      window.setTimeout(function() { 
       self.innerHTML = match1.innerHTML = ''; 
       match1 = null; 
       wait = false; 
      }, 1000); 
     } 
    } 
}); 

jsfiddle

즐기세요! :-)

Answer 3

찾을 그것은 그래서 간단한 jQuery를

jQuery memory game

var $mainTable = $('#mainTable'), 
    myWords = [], 
    valA, valB, col=4, row=3, start; 

// function to create the table 
var createTable = function (col, row) { 
    var $table = $('<table>'), i; 

    // construct our table internally 
    for(var i=0; i<row; i++){ 
     var $tr = $('<tr data-row="'+i+'">'); // make row 

     for(var j=0; j<col; j++){ 
      $tr.append($('<td data-col="'+j+'">')); // make cell 
     } 
     $table.append($tr); 
    } 

    $mainTable.html($table.html()); 
}; 

// generate an array random words from a dictionary 
var giveWords = function(pairsRequested){ 
    var dictionary = ['now','this','is','only','a','test','I','think'], 
     ar = dictionary.slice(0,pairsRequested); 

    ar = ar.concat(ar); 
    // taken from @ http://jsfromhell.com/array/shuffle [v1.0] 
    for(var j, x, i = ar.length; i; j = parseInt(Math.random() * i), x = ar[--i], ar[i] = ar[j], ar[j] = x); 
    return ar; 
} 

// initialize 
createTable(col,row); 
myWords = giveWords(6); // our words array 

// listen 
$mainTable.on('click', 'td' ,function(){ 
    var $that = $(this), 
     thisCol = $that.data('col'), 
     thisRow = $that.closest('tr').data('row'); 

    if(!valB && !$that.hasClass('clicked')){ 
     var itemNum = (thisRow*(col))+thisCol; 

     if(!valA){ // first item clicked 
      valA = myWords[itemNum]; 
      $that.addClass('clicked') 
       .text(valA); 

     } else { // we already have a clicked one 
      valB = myWords[itemNum]; 

      if(valA === valB){ // if they match... 
       $mainTable.find('.clicked') 
          .add($that) 
          .removeClass('clicked') 
          .addClass('revealed') 
          .text(valA); 

       // check how many open remaining 
       var open = $mainTable.find('td') 
            .not('.revealed') 
            .length; 

       if(open===0){ // if 0, game over! 
        var elapsed = Date.now()-start; 
        alert('Congratulations! cleared the table in '+elapsed/1000+' seconds.'); 
       } 

       valA = valB = undefined; 
      } else { 
       $that.addClass('clicked') 
        .text(valB); 

       setTimeout(function(){ // leave the value visible for a while 
        $mainTable.find('.clicked') 
           .removeClass('clicked') 
           .text(''); 
        valA = valB = undefined; 
       },700); 
      } 
     } 
    } 

    if(!start){  // keep time of game completion 
     start=Date.now(); 
    } 
});