Георгий777,
убрал массив ... достаточно одной переменной, плюс индикация окончания игры.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Grid</title>
<style type="text/css">
.output {
display:flex;
flex-wrap: wrap;
justify-content: center;
width: 603px;
margin: 50px auto;
}
.inner {
display: flex;
flex-basis: 150px;
height: 80px;
background-color: #ccc;
border: 1px solid gray;
text-align: center;
line-height: 80px;
transition: 1s;
}
.inner:hover {
cursor: pointer;
}
.inner span {
font-size: 48px;
opacity: 0;
width: 100%;
height: 100%;
transition: 1s;
}
.inner.ok span {
transition: .4s;
opacity: 1;
}
.output.end .inner{
background-color: #0000CD;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="output">
<div class="inner"><span>1</span></div>
<div class="inner"><span>3</span></div>
<div class="inner"><span>9</span></div>
<div class="inner"><span>5</span></div>
<div class="inner"><span>4</span></div>
<div class="inner"><span>1</span></div>
<div class="inner"><span>3</span></div>
<div class="inner"><span>8</span></div>
<div class="inner"><span>9</span></div>
<div class="inner"><span>5</span></div>
<div class="inner"><span>4</span></div>
<div class="inner"><span>8</span></div>
</div>
<script>
var elem, timer, duration = 1000, div = document.querySelectorAll(".inner"), len = div.length/2;
[].forEach.call(div, function(item) {
item.addEventListener("click", function() {
if (item.classList.contains("ok")) {
return;
}
window.clearTimeout(timer);
item.classList.add("ok");
if (elem) {
if (elem.textContent == item.textContent) {
elem = null;
--len || document.querySelector(".output").classList.add("end");
} else {
elem.classList.remove("ok");
elem = item;
}
}
else elem = item;
if(elem) timer = window.setTimeout(function() {
elem.classList.remove("ok");
elem = null;
}, duration);
});
});
</script>
</body>
</html>