Javascript памяти игра - обмен изображениями

Question

Это мой текущий код для memorygame, над которым я работаю. Я использую чистый JavaScript, и у меня возникают проблемы с функцией onclick моих тегов. Я хочу, чтобы игра заменила щелкнутое изображение (знак вопроса) изображением, присвоенным номеру числа щелкнувших изображений, создав тем самым эффект флип.

В настоящее время я получаю то, что независимо от того, где я нажимаю, только последнее изображение заменяется.

"use strict" 

var newDiv = null; 
var innerDiv = null; 
var table = null; 
var row = null; 
var cell = null; 
var aTag = null; 
var image = null; 

// Use this to put class names on the images. 
var boxCounter = 0; 

// Static memory-object. 
var Memory = { 

    memoryArray: [], 

    init: function (e) { 

     // Calls a separate js-file which generates a random numbers. 
     Memory.memoryArray = RandomGenerator.getPictureArray(4, 4); 

     // Calls the rendering method 
     Memory.renderArray(Memory.memoryArray); 
    }, 

    renderArray: function (myArray) { 

     // Creates and places div-tags in the HTML-document. 
     newDiv = document.createElement("div"); 
     document.getElementsByTagName("body")[0].appendChild(newDiv); 
     innerDiv = document.createElement("div"); 
     newDiv.appendChild(innerDiv); 

     // Creates a table and places it in the HTML-document. 
     table = document.createElement("table"); 
     table.border = 1; 

     // Generates rows and cells, swap the 4's to change the size of the gameboard. 
     for (var i = 0; i < 4; ++i) { 
      row = document.createElement("tr"); 
      table.appendChild(row); 

      // Creates a cell, each with its own respective random number. 
      for (var j = 0; j < 4; ++j) { 
       cell = document.createElement("td"); 

       // Adds a "Question-mark"-picture to the cell and places them in a-tags. 
       image = document.createElement("img"); 
       image.className = myArray[i * 4 + j]; 
       image.src = "https://github.com/1dv403/1dv403-laborationer/blob/master/3-gameon/memory/pics/0.png?raw=true"; 
       aTag = document.createElement("a"); 
       aTag.onclick = function() { 

        Memory.flipTile(image.className); 
       }; 

       // Places the pictures in the document, along with its random number for easier testing purposes. 
       aTag.appendChild(document.createTextNode(myArray[i * 4 + j])); 
       aTag.appendChild(image); 
       cell.appendChild(aTag); 
       row.appendChild(cell); 
      }; 
     }; 
     innerDiv.appendChild(table); 

    }, 

    flipTile: function (imageClass) { 
     console.log(imageClass); 

     // This should flip the tiles if the number matches the class name. 
     if (imageClass == 1) { 
      image.src = "https://github.com/1dv403/1dv403-laborationer/blob/master/3-gameon/memory/pics/1.png?raw=true"; 
     }; 
     if (imageClass == 2) { 
      image.src = "https://github.com/1dv403/1dv403-laborationer/blob/master/3-gameon/memory/pics/2.png?raw=true"; 
     }; 
     if (imageClass == 3) { 
      image.src = "https://github.com/1dv403/1dv403-laborationer/blob/master/3-gameon/memory/pics/3.png?raw=true"; 
     }; 
     if (imageClass == 4) { 
      image.src = "https://github.com/1dv403/1dv403-laborationer/blob/master/3-gameon/memory/pics/4.png?raw=true"; 
     }; 
     if (imageClass == 5) { 
      image.src = "https://github.com/1dv403/1dv403-laborationer/blob/master/3-gameon/memory/pics/5.png?raw=true"; 
     }; 
     if (imageClass == 6) { 
      image.src = "https://github.com/1dv403/1dv403-laborationer/blob/master/3-gameon/memory/pics/6.png?raw=true"; 
     }; 
     if (imageClass == 7) { 
      image.src = "https://github.com/1dv403/1dv403-laborationer/blob/master/3-gameon/memory/pics/7.png?raw=true"; 
     }; 
     if (imageClass == 8) { 
      image.src = "https://github.com/1dv403/1dv403-laborationer/blob/master/3-gameon/memory/pics/8.png?raw=true"; 
     }; 

    } 

}; 
window.onload = Memory.init; 

Answer 1

Все обработчики ваших кликов ссылаются на одну и ту же переменную изображения (которая после окончания цикла for будет последним изображением). Вам нужно, чтобы каждый обработчик ссылался на другую переменную изображения. Вы можете сделать это, создав его копию, передав ее как параметр функции.

Заменить это:

function() { 
    Memory.flipTile(image.className); 
}; 

с этим:

function(classname) { 
    return function() { 
    Memory.flipTile(className); 
    }; 
}(image.classname); 

---

Вторая проблема: глобальное изображение. Функция flipTile делает что-то для переменной изображения, но в ней нет.Вы на самом деле хотите, чтобы передать изображение в качестве параметра, например так:

Bad:

flipTile: function (imageClass) { 

Хорошо:

flipTile: function (image, imageClass) { 

Теперь вам также необходимо изменить вызовы функции, чтобы передать image:

function(img, classname) { 
    return function() { 
    Memory.flipTile(img, className); 
    }; 
}(image, image.classname); 

Учитывая, что вы передали изображение как параметр в flipTile, оно не похоже на y ou нужно передать image.classname, чтобы вы могли изменить функцию, чтобы вместо этого использовать image.classname. Шаг Thais не является обязательным, код должен работать нормально без него.

Answer 2

Это классическая проблема, связанная с замыканием и петлями. Рассматривает закрытие создается ваше выражение функции

aTag.onclick = function() { 
    Memory.flipTile(image.className); 
}; 

Это ссылающееся image из высшей сферы, так что происходит на следующую итерацию в цикле?

image = document.createElement("img"); 

image теперь указывает на другой объект , так что к последней итерации цикла вашего, все image сек указывают на то же (последний) <img> элемента.

Вам нужно будет создать закрытие для image, так что этого не произойдет. Вы можете сделать это, написав функцию, генерирующую нужная функция

function makeClickListener(elm) { 
    return function() { 
     Memory.flipTile(elm.className); 
    }; 
} 

Теперь использовать это, чтобы создать свой нажмите слушателей

aTag.onclick = makeClickListener(image); 

Это может быть дополнительно оптимизирована путем передачи только строки а не целое Объект (требуется меньше памяти).