Борис К,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');
body {
background-color: #D3D3D3
}
.block {
background-color: var(--color);
text-align: center;
line-height: 100px;
margin: var(--rip);
flex-basis: calc(100% / var(--cols) - var(--rip) * 2);
font-family: 'Playfair Display', serif;
color: #FFFFFF;
font-size: 48px;
}
.out:after {
content: var(--snippet);
}
.btn:after {
content: "init";
}
.game {
display: flex;
flex-wrap: wrap;
--cols: 3;
--gap: 2px;
--rip: calc(var(--gap) - 1px);
padding: var(--gap);
}
.game {
width: 700px;
margin: 40px auto;
}
.win .block {
background-image: linear-gradient(45deg, rgba(255, 255, 255, .0) 50%, rgba(255, 255, 255, .8), rgba(255, 255, 255, .0) 70%), radial-gradient(190% 100% at 50% 0%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .5) 50%, rgba(0, 0, 0, 0) 50%);
box-sizing: border-box;
background-position: 200% 0, 0 0;
box-shadow: rgba(0, 0, 0, .3) 0 2px 5px;
background-repeat: no-repeat;
background-size: 200% 100%, auto;
animation: anim 3s linear infinite;
}
@keyframes anim {
from {
background-position: 200% 0, 0 0;
}
to {
background-position: -200% 0, 0 0;
}
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
let snippets = `Hello Java script !
1 2 3 4 5 6 7 8 9 10 11 12
Good morning forum
Roney good luck`.split(/\n/);
let colors = [
'#0000FF', //blue
'#FFFF00', //yellow
'#008000', //green
'#FFA500', // orange
'#FF0000', //red
'#800080', //purple
'#808000', //olive
'#00FF00', //lime
'#800000', //maroon
'#00FFFF', //aqua
'#008080', //team
'#000080', //navy
'#FF00FF', //fushua
'#808080' //gray
];
let out = document.querySelector(".out");
let btn = document.querySelector(".btn")
let game = document.querySelector(".game");
let win = _ => true;
let temp = [];
let cols = 3;
function shuffle(array, elem) {
let length = array.length,
arr = array.slice(0);
const randomIndex = _ => Math.trunc(Math.random() * length);
let k = randomIndex();
if (elem) return arr[k];
arr.forEach((_, i) => {
k = randomIndex();
[arr[i], arr[k]] = [arr[k], arr[i]];
});
return arr;
}
// rule
let [a, b] = [0, 1];
function rule(x, y) {
return a == x && b == y
}
function exch(event) {
if (win()) return;
let block = event.target.closest(".block");
if (block) {
let i = block.style.order;
let [c, d] = [i % cols, i / cols | 0];
if (temp.length) {
let x = Math.abs(c - temp[1]);
let y = Math.abs(d - temp[2]);
if (x > y)[x, y] = [y, x];
let move = rule(x, y);
if (move || block === temp[0]) {
[block.style.order, temp[0].style.order] = [temp[0].style.order, block.style.order];
temp = [];
}
} else {
temp = [block, c, d];
};
win()
}
}
game.addEventListener("click", exch);
function createContent() {
if (!win()) return;
temp = [];
let snippet = shuffle(snippets, true).trim();
let words = snippet.split(/\s+/);
let len = words.length;
cols = len > 5 ? 3 : len;
let bgColor = shuffle(colors);
out.style.setProperty("--snippet", `"collect ${snippet}"`);
let div = document.createElement('div');
div.classList.add('block');
let content = words.map((word, i) => {
let elem = div.cloneNode();
elem.textContent = word;
elem.style.setProperty("--color", bgColor[i % bgColor.length]);
return elem;
});
shuffle(content).forEach(({
style
}, i) => style.order = i);
game.classList.remove("win")
game.innerHTML = "";
game.style.setProperty("--cols", cols);
game.append(...content);
win = _ => {
let validate = content
.every(({
style: {
order
}
}, i) => order == i);
if (validate) {
out.style.setProperty("--snippet", `"${snippet} right!!! More? click init"`);
game.classList.add("win")
}
return validate
}
}
btn.addEventListener("click", createContent);
createContent()
});
</script>
<title></title>
</head>
<body>
<p class="out"></p>
<div class="game"></div>
<button class="btn"></button>
</body>
</html>