Сохранение и сравнение значений ячейки таблицы

Question

Я создаю простую игру для сопоставления памяти, и я хочу сравнить текстовое значение каждой щелкнутой ячейки, чтобы узнать, выполнено ли совпадение. Обработчик события клика внизу - это моя попытка сделать это, но я не уверен, как сохранить эту ячейку. Как сохранить текстовое значение каждой ячейки и сравнить их, а также сохранить, какую ячейку я сравниваю, чтобы скрыть ее, если две ячейки, которые были нажаты, не равны? Text-indent установлен на 100%, а переполнение скрыто по умолчанию.

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

Лично я думаю, что я хотел бы создать пару функций для обработки две вещи:

1) onclick функция на каждой ячейке, которая будет просто переключать какой-то «щелкнул» класса (с помощью toggleClass()) , при нажатии на ячейку. Он также может иметь визуальный индикатор (например, изменить текст или цвет фона или что-то в этом роде).

2) независимая функция, которая будет вызвана «onclick» в # 1 после завершения переключения, чтобы проверить, было ли нажато ровно 2 ячейки. вы можете использовать селектор jQuery для получения всех ячеек с классом «щелкнул», и если длина возвращаемого набора равна 2, то используйте функции first()4 и last(), чтобы получить значения щелкнувших ячеек, чтобы вы могли сравнить их. Это функция, в которой вы могли бы интегрировать существующий код «они соответствуют» 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(); 
    } 
});