Постараюсь изо всех сил объяснить это как можно лучше.Поэтому я создаю головоломку с умом, в которой вы переворачиваете 2 карты, если их цвета совпадают, они остаются перевернутыми, в противном случае они возвращаются в исходное состояние.
Для моего игрового стола я использовал таблицу HTML, которую я заполняю через js
HTML:
<body>
<button id="start">New Game</button>
<table id="gametable">
</table>
<p>Turns: <span id="amntTurns"></span></p>
<p>Your Record: <span id="record"></span></p>
</body>
JS:
var fragment = document.createDocumentFragment();
for (var i = 0; i < GRID_HEIGHT; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < GRID_WIDTH; j++) {
var td = document.createElement('td');
td.className = 'flip-container';
(function(i, j, activeElements, self){
td.addEventListener('click', function eventListening(ev){...});
})(i, j, proto.activeElements, this);
tr.appendChild(td);
}
fragment.appendChild(tr);
}
table.appendChild(fragment);
Я знаючто использование таблицы HTML может быть не таким идеальным, как Canvas, но половина цели этого упражнения - также улучшить HTML и CSS.
Каждый раз, когда 2 элемента не совпадают, выполняется следующий код.
if(!self.uiListener.lastFound){
proto.updateUI(['red','red'],false);
}
updateUI : function (colors, asc) {
for (let i = 0; i < this.targets.length; i++) {
animate(this.targets[i], colors[i], asc);
}
}
function animate(element, color,asc) {
var pos;
if(asc){
pos = 0;
}else{
pos = 10;
}
var id = setInterval(frame, 5);
function frame() {
if ((pos == 10 && asc)||(pos == 0 && !asc)) {
clearInterval(id);
} else {
if(asc){
pos++;
}else{
pos--
}
element.style.transform = 'rotate(' + pos + 'deg)';
element.style.backgroundColor = color;
}
}
}
все это работает в первый раз, когда моя Игра и мой GameView были созданы.
Теперь проблема: если я запускаю новую Игру во второй раз, первый ход не совпадаеткарты возвращаются в исходное состояние (они вращаются назад), но по какой-то причине цвет фона сохраняет цвет, который имеет их «обратная сторона».
Я никогда не вызываю функцию animate по убыванию с любым другим цветом, кроме красного, поэтому я не знаю, почему это может происходить.
Код можно найти проверенным вследующий plunk
Запустите игру дважды, а затем переверните 3 карты.