Objevuj jako Newton - Pexeso
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pexeso | RaFF Discover</title>
<style>
:root {
--primary: #16696b;
--secondary: #f4f5f6;
--accent: #f59f00;
--success: #51cf66;
--danger: #fa5252;
--text: #1a2a32;
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', sans-serif;
background-color: var(--secondary);
color: var(--text);
}
header {
background-color: var(--primary);
color: white;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
header img {
height: 40px;
margin-right: 1rem;
}
h1 {
margin: 0;
font-size: 1.8rem;
}
main {
padding: 1rem;
max-width: 960px;
margin: 0 auto;
}
p {
margin-bottom: 1.5rem;
font-size: 1rem;
}
#game-board {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
}
.card {
background: #f59f00;
padding: 1rem;
border-radius: 10px;
border: 2px solid var(--primary);
font-weight: 600;
min-height: 80px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.card:hover {
transform: scale(1.03);
background-color: #e7f0ff;
}
.card.flipped, .card.matched {
background-color: var(--success);
color: white;
cursor: default;
}
.card.matched {
border: 2px solid var(--success);
}
.card.wrong {
background-color: var(--danger) !important;
color: white;
}
#controls {
margin: 2rem 0;
text-align: center;
}
button {
padding: 0.6rem 1.2rem;
font-size: 1rem;
font-weight: bold;
color: white;
background-color: var(--primary);
border: none;
border-radius: 8px;
cursor: pointer;
margin: 0.5rem;
}
button:hover {
background-color: #104e4f;
}
#victory-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.75);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
#victory-text {
background: white;
padding: 2rem;
border-radius: 16px;
text-align: center;
font-size: 1.8rem;
color: var(--success);
max-width: 90%;
}
@media (max-width: 600px) {
.card {
font-size: 0.9rem;
padding: 0.8rem;
}
header h1 {
font-size: 1.4rem;
}
}
</style>
</head>
<body>
<header>
<img src="https://images.squarespace-cdn.com/content/v1/67bc9e23471d0b30d17dd6de/b015725f-3ea6-43af-907e-ac0d00261932/logo+web.png?format=1500w" alt="RaFF Discover logo" />
<h1>Pexeso: Lidština vs Vědečtina</h1>
</header>
<main>
<p>Najdi dvojice slov, která se významově překládají. Dávej pozor – ne všechna slova jsou úplně stejná!</p>
<div id="game-board"></div>
<div id="controls">
<button id="reset-button">🔁 Hrát znovu</button>
<button id="toggle-sound">🔊 Zvuk: Zapnutý</button>
</div>
</main>
<div id="victory-modal">
<div id="victory-text">🎉 Gratuluji! Našel(a) jsi všechny správné dvojice!</div>
</div>
<audio id="success-sound" src="https://actions.google.com/sounds/v1/cartoon/concussive_drum_hit.ogg"></audio>
<script>
const pairs = [
["setrvačník", "těleso"], ["jablko", "těleso"],
["roztočit", "působit na těleso silou"], ["zatlačit", "působit na těleso silou"],
["šťouchnout prstem", "působit na těleso silou"], ["použít sílu naší ruky", "působit na těleso silou"],
["přitahovat gravitační silou", "působit na těleso silou"], ["zabrzdit odporem vzduchu nebo třením", "působit na těleso silou"],
["nesahat (na setrvačník nebo jablko)", "nepůsobit silou"], ["nechat být", "nepůsobit silou"],
["zůstat stát", "setrvávat v klidu"], ["zůstat nehybný dál a dál", "setrvávat v klidu"],
["točit se", "setrvávat v pohybu"], ["zůstávat v pohybu", "setrvávat v pohybu"],
["točit se čím dál rychleji", "zrychlovat"], ["točit se čím dál pomaleji", "zpomalovat"]
];
let cards = [], flippedCards = [], matched = [], soundOn = true;
function shuffle(array) {
return array.flatMap((pair) => pair.map((text, i) => ({text, matchGroup: pair[1], isTranslation: i === 0}))).sort(() => Math.random() - 0.5);
}
function createBoard() {
cards = shuffle(pairs);
flippedCards = [];
matched = [];
document.getElementById('victory-modal').style.display = 'none';
const board = document.getElementById('game-board');
board.innerHTML = '';
cards.forEach((card, index) => {
const div = document.createElement('div');
div.className = 'card';
div.dataset.index = index;
div.textContent = '🍏';
div.addEventListener('click', () => flipCard(index));
board.appendChild(div);
});
}
function flipCard(index) {
if (matched.includes(index) || flippedCards.includes(index)) return;
const card = cards[index];
const div = document.querySelectorAll('.card')[index];
div.classList.add('flipped');
div.textContent = card.text;
flippedCards.push(index);
if (flippedCards.length === 2) {
const [i1, i2] = flippedCards;
const c1 = cards[i1];
const c2 = cards[i2];
const div1 = document.querySelectorAll('.card')[i1];
const div2 = document.querySelectorAll('.card')[i2];
setTimeout(() => {
if (c1.matchGroup === c2.matchGroup && c1.isTranslation !== c2.isTranslation) {
matched.push(i1, i2);
div1.classList.add('matched');
div2.classList.add('matched');
if (soundOn) document.getElementById('success-sound').play();
if (matched.length === cards.length) {
document.getElementById('victory-modal').style.display = 'flex';
}
} else {
div1.classList.add('wrong');
div2.classList.add('wrong');
setTimeout(() => {
div1.textContent = '🎲';
div2.textContent = '🎲';
div1.classList.remove('flipped', 'wrong');
div2.classList.remove('flipped', 'wrong');
}, 1000);
}
flippedCards = [];
}, 1200);
}
}
document.getElementById('reset-button').addEventListener('click', createBoard);
document.getElementById('toggle-sound').addEventListener('click', () => {
soundOn = !soundOn;
document.getElementById('toggle-sound').textContent = soundOn ? '🔊 Zvuk: Zapnutý' : '🔇 Zvuk: Vypnutý';
});
createBoard();
</script>
</body>
</html>