<html>
<head>
<style>
td {
width: 100px;
height: 100px;
}
[data-id="1"] {
background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=1);
}
[data-id="2"] {
background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=2);
}
[data-id="3"] {
background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=3);
}
[data-id="4"] {
background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=4);
}
[data-id="5"] {
background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=5);
}
[data-id="6"] {
background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=6);
}
</style>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
const tab = document.querySelector('table');
const cells = [...document.querySelectorAll('td')];
const btn = document.getElementById('btn');
let nclick;
let wiewCellsNum = [];
function show2x2 () {
cells.sort(() =>Math.round(Math.random())-0.5);
tab.rows[0].innerHTML = '';
tab.rows[0].append(...cells.slice(0,2));
tab.rows[1].innerHTML = '';
tab.rows[1].append(...cells.slice(2,4));
nclick = 0;
wiewCellsNum = [...document.querySelectorAll('td')]
.map(td => +td.dataset.id)
.sort();
}
function mix2x2 () {
let cells = [...document.querySelectorAll('td')].sort(() =>Math.round(Math.random())-0.5);
tab.rows[0].innerHTML = '';
tab.rows[0].append(...cells.slice(0,2));
tab.rows[1].innerHTML = '';
tab.rows[1].append(...cells.slice(2,4));
}
tab.addEventListener('click', ({target}) => {
if (target.nodeName === 'TD') {
const curnum = +target.dataset.id;
if (curnum != wiewCellsNum[nclick]) {
alert ('Error! Try again.')
} else {
nclick++;
if (nclick === 4) {
alert("OK!");
nclick = 0;
}
}
mix2x2();
}
});
btn.addEventListener('click', show2x2);
show2x2();
blend.addEventListener('click', () => {mix2x2(); nclick = 0});
});
</script>
</head>
<body>
<table>
<tr>
<td data-id="1"></td>
<td data-id="2"></td>
<td data-id="3"></td>
</tr>
<tr>
<td data-id="4"></td>
<td data-id="5"></td>
<td data-id="6"></td>
</tr>
</table>
<button id="btn">New</button>
<button id="blend">Mix</button>
</body>
</html>