Комбинация будет новой, но сами рисунки старые
<!DOCTYPE html>
<html>
<head>
<style>
[data-id="girl"] {
background-image:url(https://loremflickr.com/100/100/girl?random=1);
width: 100px;
height: 100px;
}
[data-id="boy"] {
background-image:url(https://loremflickr.com/100/100/boy?random=1);
width: 100px;
height: 100px;
}
[data-id="cat"] {
background-image:url(https://loremflickr.com/100/100/cat?random=1);
width: 100px;
height: 100px;
}
[data-id="dog"] {
background-image:url(https://loremflickr.com/100/100/dog?random=1);
width: 100px;
height: 100px;
}
[data-id="car"] {
background-image:url(https://loremflickr.com/100/100/car?random=1);
width: 100px;
height: 100px;
}
[data-id="house"] {
background-image:url(https://loremflickr.com/100/100/house?random=1);
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
const tab = document.querySelector('table');
const cells = [...document.querySelectorAll('td.Image')];
const btn = document.getElementById('btn');
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));
};
btn.addEventListener('click', show2x2);
show2x2();
});
</script>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td class="Image" data-id="girl"></td>
<td class="Image" data-id="boy"></td>
<td class="Image" data-id="cat"></td>
</tr>
<tr>
<td class="Image" data-id="dog"></td>
<td class="Image" data-id="car"></td>
<td class="Image" data-id="house"></td>
</tr>
</table>
<button id="btn">New</button>
</body>
</html>