180 lines
5.7 KiB
HTML
180 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Game Nusantara</title>
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
margin: 0;
|
|
background: #f2f2f2;
|
|
}
|
|
.container {
|
|
max-width: 480px;
|
|
margin: auto;
|
|
padding: 1rem;
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
font-size: 1.4rem;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
gap: 4px;
|
|
margin-top: 1rem;
|
|
}
|
|
.letter {
|
|
background: white;
|
|
border-radius: 6px;
|
|
padding: 0;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
border: 1px solid #ccc;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
.found {
|
|
background-color: #a2f5a2 !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1 id="game-title">Game Nusantara</h1>
|
|
<div id="game-board"></div>
|
|
|
|
<h3>Kata yang harus ditemukan:</h3>
|
|
<ul id="target-words" style="padding-left: 1rem;"></ul>
|
|
<p id="penjelasan" style="margin-top: 1rem; font-size: 0.9rem; color: #444;"></p>
|
|
</div>
|
|
|
|
<script>
|
|
// Template Find The Word Game (drag to select)
|
|
const words = ['TENANG', 'SABAR', 'SYUKUR', 'CINTA', 'GEMBIRA', 'BANGGA'];
|
|
const board = document.getElementById('game-board');
|
|
const size = 12; // 12x12 grid
|
|
let grid = Array(size * size).fill('');
|
|
|
|
function randomLetter() {
|
|
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
|
return alphabet[Math.floor(Math.random() * alphabet.length)];
|
|
}
|
|
|
|
function placeWord(word) {
|
|
const dir = Math.random() < 0.5 ? 'H' : 'V';
|
|
let x, y, success = false;
|
|
while (!success) {
|
|
x = Math.floor(Math.random() * (dir === 'H' ? size - word.length : size));
|
|
y = Math.floor(Math.random() * (dir === 'V' ? size - word.length : size));
|
|
let fits = true;
|
|
for (let i = 0; i < word.length; i++) {
|
|
let idx = dir === 'H' ? y * size + (x + i) : (y + i) * size + x;
|
|
if (grid[idx] && grid[idx] !== word[i]) {
|
|
fits = false;
|
|
break;
|
|
}
|
|
}
|
|
if (fits) {
|
|
for (let i = 0; i < word.length; i++) {
|
|
let idx = dir === 'H' ? y * size + (x + i) : (y + i) * size + x;
|
|
grid[idx] = word[i];
|
|
}
|
|
success = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
words.forEach(w => placeWord(w));
|
|
grid = grid.map(cell => cell || randomLetter());
|
|
|
|
function renderGrid() {
|
|
board.className = 'grid';
|
|
board.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
|
|
board.innerHTML = '';
|
|
grid.forEach((char, i) => {
|
|
const div = document.createElement('div');
|
|
div.textContent = char;
|
|
div.className = 'letter';
|
|
div.dataset.index = i;
|
|
div.style.aspectRatio = '1/1';
|
|
div.style.border = '1px solid #ccc';
|
|
div.style.display = 'flex';
|
|
div.style.alignItems = 'center';
|
|
div.style.justifyContent = 'center';
|
|
div.style.fontSize = '1.2rem';
|
|
div.style.fontWeight = 'bold';
|
|
div.style.userSelect = 'none';
|
|
div.style.cursor = 'pointer';
|
|
board.appendChild(div);
|
|
});
|
|
}
|
|
|
|
renderGrid();
|
|
|
|
// Daftar kata yang harus ditemukan
|
|
// (Daftar kata tidak lagi ditampilkan sebagai list)
|
|
|
|
let currentSelection = [];
|
|
let currentWord = '';
|
|
let wordsFound = new Set();
|
|
let isMouseDown = false;
|
|
|
|
board.addEventListener('mousedown', (e) => {
|
|
if (!e.target.classList.contains('letter')) return;
|
|
isMouseDown = true;
|
|
selectCell(e.target);
|
|
});
|
|
|
|
board.addEventListener('mouseover', (e) => {
|
|
if (!isMouseDown || !e.target.classList.contains('letter')) return;
|
|
selectCell(e.target);
|
|
});
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
if (words.includes(currentWord)) {
|
|
currentSelection.forEach(c => {
|
|
c.style.backgroundColor = '#a2f5a2';
|
|
c.classList.add('found');
|
|
});
|
|
const penjelasanBox = document.getElementById('penjelasan');
|
|
const regex = new RegExp(currentWord, 'gi');
|
|
penjelasanBox.innerHTML = penjelasanBox.innerHTML.replace(regex, `<span style="color:green; font-weight:bold">${currentWord}</span>`);
|
|
|
|
wordsFound.add(currentWord);
|
|
if (wordsFound.size === words.length) {
|
|
alert('Selamat! Kamu telah menemukan semua kata positif. Ingat, berpikir positif setiap hari bisa membuat hidupmu lebih ceria dan penuh semangat 🌈');
|
|
}
|
|
} else {
|
|
currentSelection.forEach(c => c.style.backgroundColor = '');
|
|
}
|
|
currentSelection = [];
|
|
currentWord = '';
|
|
isMouseDown = false;
|
|
});
|
|
|
|
function selectCell(cell) {
|
|
if (cell.classList.contains('found') || currentSelection.includes(cell)) return;
|
|
cell.style.backgroundColor = '#ffeaa7';
|
|
currentSelection.push(cell);
|
|
currentWord += cell.textContent;
|
|
}
|
|
|
|
// Penjelasan pentingnya emosi positif
|
|
const penjelasan = `Di dalam hidup, kita bisa merasa banyak hal. Tapi tahukah kamu? Emosi positif seperti <strong>tenang</strong>, <strong>sabar</strong>, <strong>syukur</strong>, <strong>cinta</strong>, <strong>gembira</strong>, dan <strong>bangga</strong> adalah kunci untuk hidup yang sehat dan bahagia. Yuk, temukan kata-kata positif itu di puzzle, lalu pikirkan kapan terakhir kali kamu merasakannya!`;
|
|
document.getElementById('penjelasan').innerHTML = penjelasan;
|
|
|
|
function includeScript(file) {
|
|
const script = document.createElement('script');
|
|
script.src = file;
|
|
document.body.appendChild(script);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |