177 lines
5.4 KiB
HTML
177 lines
5.4 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>
|
|
<link rel="icon" href="data:,">
|
|
<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, .drag-area, .drop-area {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 1rem;
|
|
}
|
|
.grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
|
}
|
|
.card, .letter, .drop-zone, .drag-item {
|
|
background: white;
|
|
border-radius: 6px;
|
|
padding: 10px;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
user-select: none;
|
|
}
|
|
.hidden { background: #ccc; color: transparent; }
|
|
.matched { background: #d4edda; }
|
|
.drop-zone { height: 80px; background: #eee; border: 2px dashed #bbb; }
|
|
.drag-item[draggable="true"] { cursor: grab; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1 id="game-title">Game Nusantara</h1>
|
|
<div id="game-board"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const items = [
|
|
'pempek.png', 'sumsel.png',
|
|
'sopkonro.png', 'sulsel.png',
|
|
'rendang.png', 'sumbar.png',
|
|
'tinutuan.png', 'sulut.png',
|
|
'ayambetutu.png', 'bali.png',
|
|
'bikaambon.png', 'sumut.png',
|
|
'gudeg.png', 'yogyakarta.png',
|
|
'sotobanjar.png', 'kalsel.png',
|
|
'ayamtaliwang.png', 'ntb.png'
|
|
];
|
|
|
|
const board = document.getElementById('game-board');
|
|
board.className = 'grid';
|
|
board.style.gridTemplateColumns = 'repeat(3, 1fr)';
|
|
|
|
let selectedItems = shuffle([...items]);
|
|
let shuffled = shuffle(selectedItems.slice(0, 18));
|
|
let selected = [], matched = [];
|
|
|
|
function shuffle(array) {
|
|
return array.sort(() => Math.random() - 0.5);
|
|
}
|
|
|
|
function render() {
|
|
board.innerHTML = '';
|
|
shuffled.forEach((img, i) => {
|
|
const card = document.createElement('div');
|
|
card.className = 'card hidden';
|
|
card.style.backgroundImage = 'url("../freekake.png")';
|
|
card.style.backgroundSize = 'contain';
|
|
card.style.backgroundRepeat = 'no-repeat';
|
|
card.style.backgroundPosition = 'center';
|
|
card.dataset.index = i;
|
|
card.style.aspectRatio = '1/1';
|
|
card.style.borderRadius = '12px';
|
|
card.style.overflow = 'hidden';
|
|
card.style.backgroundColor = '#fff';
|
|
card.style.display = 'flex';
|
|
card.style.flexDirection = 'column';
|
|
card.style.alignItems = 'center';
|
|
card.style.justifyContent = 'center';
|
|
card.style.padding = '8px';
|
|
card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
|
|
board.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function revealCard(i) {
|
|
const el = board.children[i];
|
|
el.classList.remove('hidden');
|
|
el.style.backgroundImage = 'none';
|
|
el.innerHTML = `<img src="${shuffled[i]}" alt="" style="width: 100%; height: auto; object-fit: contain;">`;
|
|
}
|
|
|
|
function hideCard(i) {
|
|
const el = board.children[i];
|
|
el.classList.add('hidden');
|
|
el.style.backgroundImage = 'url("../freekake.png")';
|
|
el.style.backgroundSize = 'contain';
|
|
el.style.backgroundRepeat = 'no-repeat';
|
|
el.style.backgroundPosition = 'center';
|
|
el.innerHTML = '';
|
|
}
|
|
|
|
function checkMatch() {
|
|
const [a, b] = selected;
|
|
const pairs = {
|
|
'pempek.png': 'sumsel.png', 'sumsel.png': 'pempek.png',
|
|
'sopkonro.png': 'sulsel.png', 'sulsel.png': 'sopkonro.png',
|
|
'rendang.png': 'sumbar.png', 'sumbar.png': 'rendang.png',
|
|
'tinutuan.png': 'sulut.png', 'sulut.png': 'tinutuan.png',
|
|
'ayambetutu.png': 'bali.png', 'bali.png': 'ayambetutu.png',
|
|
'bikaambon.png': 'sumut.png', 'sumut.png': 'bikaambon.png',
|
|
'gudeg.png': 'yogyakarta.png', 'yogyakarta.png': 'gudeg.png',
|
|
'sotobanjar.png': 'kalsel.png', 'kalsel.png': 'sotobanjar.png',
|
|
'ayamtaliwang.png': 'ntb.png', 'ntb.png': 'ayamtaliwang.png'
|
|
};
|
|
if (pairs[shuffled[a]] === shuffled[b]) {
|
|
matched.push(a, b);
|
|
board.children[a].classList.add('matched');
|
|
board.children[a].style.backgroundColor = '#d4edda';
|
|
board.children[b].classList.add('matched');
|
|
board.children[b].style.backgroundColor = '#d4edda';
|
|
} else {
|
|
setTimeout(() => {
|
|
hideCard(a);
|
|
hideCard(b);
|
|
}, 800);
|
|
}
|
|
selected = [];
|
|
}
|
|
|
|
render();
|
|
|
|
board.addEventListener('click', (e) => {
|
|
const index = e.target.closest('.card')?.dataset.index;
|
|
if (!index || selected.includes(+index) || matched.includes(+index)) return;
|
|
revealCard(index);
|
|
selected.push(+index);
|
|
if (selected.length === 2) checkMatch();
|
|
});
|
|
|
|
window.render = render;
|
|
|
|
if (window.flutter_inappwebview) {
|
|
window.flutter_inappwebview.callHandler('pageReady', {
|
|
boardExists: !!document.getElementById("game-board"),
|
|
hasRender: typeof render === "function"
|
|
});
|
|
}
|
|
|
|
// Optional helper
|
|
function includeScript(file) {
|
|
const script = document.createElement('script');
|
|
script.src = file;
|
|
document.body.appendChild(script);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|