fillika,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.show div{
width: 60px;
height: 60px;
border: 1px solid #6e6d70;
box-sizing: border-box;
text-align: center;
line-height: 60px;
transition: .8s;
}
.show {
display: flex;
flex-wrap: wrap;
width: 240px;
}
.show.end div{
color: transparent;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="show"></div>
<button>new</button>
<script>
class field {
constructor(pair, parentCls) {
this.cls = parentCls;
this.parent = document.querySelector(this.cls);
this.pair = pair;
this.elems = this.createElems(this.pair * 2);
this.color = this.createColor(this.pair);
this.parent.append(...this.elems);
this.shuffleArray(this.elems);
this.parent.addEventListener("pointerdown", this.eventHandler.bind(this));
this.timer = null;
this.current = null;
this.duration = 1000;
this.init.bind(this);
}
createElems(length) {
let elems = Array.from({length}, () => document.createElement("div"));
return elems
}
createColor(length) {
let color = Array.from({length}, (v, k) => `hsl(${360 * Math.random()|0}, 100%, 50%)`)
return color
}
shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
eventHandler(event) {
event.preventDefault();
const target = event.target.closest(this.cls + ">div");
if (!target || target.classList.contains("ok")) return;
let index = (this.elems.indexOf(target) / 2) | 0;
target.style.backgroundColor = this.color[index];
target.textContent = index;
window.clearTimeout(this.timer);
target.classList.add("ok");
if (this.current) {
if (this.current.textContent == target.textContent) {
this.current = null;
--this.pair || this.parent.classList.add("end");
} else {
this.clearItem(this.current);
this.current = target;
}
} else this.current = target;
if (this.current) this.timer = window.setTimeout(() => {
this.clearItem(this.current);
this.current = null;
}, this.duration);
}
clearItem(item){
item.classList.remove("ok");
item.style.backgroundColor = "";
item.textContent = "";
return item
}
init(){
this.pair = this.color.length;
this.color = this.createColor(this.pair);
this.shuffleArray(this.elems);
this.elems.forEach(this.clearItem);
this.parent.classList.remove("end");
};
}
const game = new field(8, ".show");
document.querySelector("button").addEventListener("click", () => game.init())
</script>
</body>
</html>