Add a utility to your UI with Word shuffling game with 3 levels of difficulty. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Word Shuffling Game</title>
6
7 </head>
8 <body>
9 <div id="game">
10 <h1>Word Shuffle Game</h1>
11 <div id="word-grid"></div>
12 <div id="letter-container"></div>
13 <button id="checkBtn" style="display: none">Check</button>
14 <div id="message" class="message"></div>
15 <button id="nextLevelBtn" style="display: none">Next Level</button>
16 <button id="tryAgainBtn" style="display: none">Try Again</button>
17 <button id="restartBtn" style="display: none">Restart Game</button>
18 </div>
19
20 <script>
21 const levels = [
22 { length: 4, words: ['glow', 'pave', 'bend', 'hawk', 'jolt'] },
23 {
24 length: 6,
25 words: ['cipher', 'jargon', 'galaxy', 'magnet', 'exodus'],
26 },
27 {
28 length: 8,
29 words: ['wildfire', 'snapshot', 'juggling', 'abstract', 'necklace'],
30 },
31 ];
32
33 let currentLevel = 0;
34 let selectedWord = '';
35 let shuffledWord = [];
36
37 function checkEndGame() {
38 if (currentLevel < levels.length - 1) {
39 return;
40 }
41 document.getElementById('message').textContent = 'Thanks for playing!';
42 document.getElementById('message').style.display = 'block';
43 document.getElementById('restartBtn').style.display = 'inline';
44 document.getElementById('message').style.display = 'none';
45 document.getElementById('nextLevelBtn').style.display = 'none';
46 document.getElementById('checkBtn').style.display = 'none';
47 }
48
49 function startLevel() {
50 selectedWord =
51 levels[currentLevel].words[
52 Math.floor(Math.random() * levels[currentLevel].words.length)
53 ];
54 shuffledWord = selectedWord.split('').sort(() => Math.random() - 0.5);
55
56 document.getElementById('word-grid').innerHTML =
57 '<div class="box"></div>'.repeat(levels[currentLevel].length);
58 document.getElementById('letter-container').innerHTML = shuffledWord
59 .map(
60 (letter) =>
61 `<div id="letter" class="letter" draggable="true">${letter}</div>`
62 )
63 .join('');
64 setupDragAndDrop();
65 document.getElementById('checkBtn').style.display = 'inline';
66 document.getElementById('message').style.display = 'none';
67 document.getElementById('restartBtn').style.display = 'none';
68 }
69
70 function setupDragAndDrop() {
71 const letters = document.querySelectorAll('.letter');
72 const boxes = document.querySelectorAll('.box');
73
74 letters.forEach((letter) => {
75 letter.addEventListener('dragstart', dragStart);
76 });
77
78 boxes.forEach((box) => {
79 box.addEventListener('dragover', dragOver);
80 box.addEventListener('drop', drop);
81 });
82 }
83
84 function dragStart(e) {
85 if (e.target.classList.contains('dropped')) {
86 e.preventDefault();
87 return;
88 }
89 e.dataTransfer.setData('text/plain', e.target.textContent);
90
91 const letters = document.querySelectorAll('.letter');
92 letters.forEach((letter) => letter.classList.remove('dragging'));
93
94 e.target.classList.add('dragging');
95 }
96
97 function dragOver(e) {
98 e.preventDefault();
99 }
100
101 function drop(e) {
102 e.preventDefault();
103 const data = e.dataTransfer.getData('text');
104 if (e.target.textContent) {
105 return;
106 }
107 e.target.textContent = data;
108 e.target.classList.add('dropped');
109 const draggedLetter = document.querySelector(`.letter.dragging`);
110 if (!draggedLetter) {
111 return;
112 }
113 draggedLetter.classList.add('dropped');
114 draggedLetter.classList.remove('dragging');
115 draggedLetter.setAttribute('draggable', 'false');
116 }
117
118 function checkWord() {
119 const boxes = document.querySelectorAll('.box');
120 const userWord = Array.from(document.querySelectorAll('.box'))
121 .map((box) => box.textContent)
122 .join('');
123 if (userWord === selectedWord) {
124 document.getElementById('message').textContent = 'Level Completed!';
125 document.getElementById('message').className = 'message success';
126 document.getElementById('nextLevelBtn').style.display = 'inline';
127 boxes.forEach((box) => {
128 box.classList.add('success');
129 box.classList.remove('error');
130 });
131 checkEndGame();
132 } else {
133 document.getElementById('message').textContent = 'Invalid Word!';
134 document.getElementById('message').className = 'message error';
135 document.getElementById('tryAgainBtn').style.display = 'inline';
136 boxes.forEach((box) => {
137 box.classList.add('error');
138 box.classList.remove('success');
139 });
140 }
141 document.getElementById('message').style.display = 'block';
142 }
143
144 document.getElementById('checkBtn').addEventListener('click', checkWord);
145 document.getElementById('nextLevelBtn').addEventListener('click', () => {
146 currentLevel++;
147 document.getElementById('message').style.display = 'none';
148 document.getElementById('nextLevelBtn').style.display = 'none';
149 startLevel();
150 });
151 document
152 .getElementById('tryAgainBtn')
153 .addEventListener('click', startLevel);
154 document.getElementById('restartBtn').addEventListener('click', () => {
155 currentLevel = 0;
156 document.getElementById('restartBtn').style.display = 'none';
157 document.getElementById('message').style.display = 'none';
158 startLevel();
159 });
160
161 startLevel();
162 </script>
163 </body>
164</html>
165
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.