Umělá inteligence jako nástroj pro tvorbu webových her: zkušenost s výukou školáků
Školáci již zvládli základy HTML a CSS. Před použitím umělé inteligence bylo nutné rozvinout dovednost čtení cizího kódu. Úkol: otevřít soubor s komentáři, změnit hodnotu background-color na určeném řádku, uložit a obnovit stránku v prohlížeči. Tento přístup umožňuje rychle spojit změny v kódu s vizuálním výsledkem, čímž snižuje obavy z cizích zdrojů.
Následně jsme přešli k návrhu na papíře. Zvolili jsme mechaniku hry typu Whac-A-Mole s personalizací: místo standardních objektů fotografie žáků v normálním stavu a s nafouknutými tvářemi při aktivaci.
Logika hry a výběr technologií
Základní prvky mechaniky:
Google AdInline article slot
- Mřížka 3×3 z buněk (nory).
- Náhodné objevení aktivního obrázku každých 5 sekund.
- Zvyšování rychlosti s každým cyklem.
- Kliknutí na aktivní buňku ji vrátí do normálního stavu.
- Prohra: všech 9 buněk je aktivních současně – blokování vstupu na 5 sekund, blikání, modální okno s restartem.
Technologie: čisté HTML, CSS, JavaScript v jednom souboru. Výhody pro výuku:
- Žádná konfigurace prostředí – stačí prohlížeč.
- Okamžitá zpětná vazba při F5.
- Úplná přenositelnost: jeden HTML soubor funguje všude.
Pro prototyp jsme použili obrázky koťat: základní a s reakcí (vygenerovány umělou inteligencí podle promptu).
Tvorba efektivního promptu
Umělá inteligence je vnímána jako výkonný nástroj, který vyžaduje podrobný popis. Společně s dětmi jsme sestavili prompt pro Gemini:
Google AdInline article slot
Podrobný popis:
- Role: zkušený frontendový vývojář.
- Hra: obdoba Whac-A-Mole s fotografiemi (normální a s tvářemi).
- Styl: světlé pozadí, vycentrování.
- Herní pole: bílý panel 3×3 se zaoblenými rohy a stínem.
- Buňky: 9 obrázků s efektem stisknutí, responzivita pro mobilní zařízení.
- 18 souborů: photo1_normal.jpg ... photo9_highlighted.jpg.
- Logika: časovače, zrychlení, konec hry, modální okno s rozostřením.
- Požadavky: jeden soubor, moderní JavaScript, komentáře, bez zvýraznění na mobilech.
Výsledek: hotový kód hry
Umělá inteligence vydala funkční prototyp během sekund. Po minimálních úpravách vznikl finální produkt. Kód využívá CSS proměnné, Flexbox/Grid, backdrop-filter, moderní přechody a media queries.
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Koťátka!</title>
<style>
/* Proměnné pro snadnou úpravu velikostí a barev na jednom místě */
:root {
--bg-color: #f0f2f5; /* Světlé šedé pozadí */
--grid-gap: 15px; /* Vzdálenost mezi kartami */
--cell-size: 180px; /* Základní velikost čtverce s fotografií */
--text-color: #333; /* Tmavě šedá barva pro text */
}
/* Hlavní nastavení obrazovky */
body {
margin: 0;
padding: 0;
display: flex; /* Použití Flexboxu pro zarovnání */
justify-content: center; /* Vycentrování horizontálně */
align-items: center; /* Vycentrování vertikálně */
min-height: 100vh; /* Výška rovna oknu prohlížeče */
background-color: var(--bg-color);
font-family: 'Segoe UI', Tahoma, sans-serif;
overflow: hidden; /* Zakázání posouvání */
user-select: none; /* Zakázání výběru při rychlých kliknutích */
-webkit-tap-highlight-color: transparent; /* Odstranění modrého zvýraznění při dotyku na mobilu */
}
/* Hlavní kontejner pro instrukce a hru */
.main-wrapper {
display: flex;
flex-direction: column; /* Naskládání textu a mřížky vertikálně */
align-items: center; /* Vycentrování horizontálně */
}
/* Styly pro textové instrukce */
.instructions {
text-align: center; /* Vycentrování textu */
color: var(--text-color);
font-size: 1.8rem;
line-height: 1.4; /* Řádkování pro dva řádky */
margin-bottom: 25px; /* Odstup od textu k hernímu poli */
font-weight: 500;
}
/* Kontejner herní mřížky 3x3 */
.game-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 stejné sloupce */
grid-template-rows: repeat(3, 1fr); /* 3 stejné řádky */
gap: var(--grid-gap);
padding: 20px;
background: white; /* Bílé pozadí pod mřížkou */
border-radius: 24px; /* Zaoblení hlavní desky */
box-shadow: 0 10px 40px rgba(0,0,0,0.08); /* Jemný stín pro objem */
position: relative;
}
/* Stav zablokování: zakázání kliknutí při konci hry */
.game-container.disabled {
pointer-events: none; /* Ignorování vstupů myši/dotyku */
}
/* Obal pro každou fotografii */
.cell {
width: var(--cell-size);
height: var(--cell-size);
overflow: hidden; /* Oříznutí okrajů fotografie */
border-radius: 16px; /* Zaoblení rohů fotografie */
cursor: pointer;
transition: transform 0.1s ease; /* Plynulá animace při kliknutí */
background: #f9f9f9; /* Barva pozadí při načítání */
}
/* Efekt kliknutí: karta se mírně zmenší */
.cell:active {
transform: scale(0.96);
}
/* Skutečný obrázek uvnitř buňky */
.cell img {
width: 100%;
height: 100%;
object-fit: cover; /* Vyplnění čtverce bez zkreslení */
display: block;
}
/* Modální okno na celou obrazovku */
#modal {
display: none; /* Skryto ve výchozím nastavení */
position: fixed; /* Upevněno nad veškerým obsahem */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.01); /* Průhledné pozadí */
backdrop-filter: blur(15px); /* Hlavní efekt: rozostření pozadí */
-webkit-backdrop-filter: blur(15px); /* Podpora rozostření v Safari */
justify-content: center; /* Vycentrování obsahu horizontálně */
align-items: center; /* Vycentrování obsahu vertikálně */
z-index: 100; /* Přenesení do popředí */
}
/* Bílá karta uvnitř modálního okna */
.modal-content {
background: white;
padding: 50px;
border-radius: 30px;
text-align: center;
box-shadow: 0 15px 60px rgba(0,0,0,0.15); /* Hluboký stín pro důraz */
border: 1px solid rgba(255,255,255,0.3);
}
.modal-content h2 {
margin: 0 0 30px 0;
font-size: 28px;
color: #222;
}
/* Tlačítko restartu */
.modal-content button {
background: #222; /* Tmavé stylové tlačítko */
color: white;
border: none;
padding: 16px 50px;
font-size: 18px;
border-radius: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.modal-content button:hover {
background: #000;
transform: translateY(-2px); /* Efekt vznášení při najetí myší */
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* Přizpůsobení pro mobilní zařízení */
@media (max-width: 650px) {
:root {
--cell-size: 28vw; /* Velikost závisí na šířce obrazovky */
}
}
</style>
</head>
<body>
<div class="main-wrapper">
<div class="instructions">Klikni na koťátka s nafouknutými tvářemi!</div>
<div class="game-container" id="gameContainer">
<!-- 9 buněk bude vygenerováno JavaScriptem -->
</div>
</div>
<div id="modal">
<div class="modal-content">
<h2>😿 Všechna koťátka mají nafouknuté tváře!</h2>
<p>Zkusíš to znovu?</p>
<button onclick="resetGame()">Ano!</button>
</div>
</div>
<script>
// Proměnné stavu hry
let gameActive = true;
let activeCell = null;
let intervalId = null;
let speed = 5000; // Počátečních 5 sekund
let highlightedCount = 0;
const cells = [];
const totalCells = 9;
// Obrázky: nahraďte svými photo_normal.jpg a photo_highlighted.jpg
const images = {
1: { normal: 'photo1_normal.jpg', highlighted: 'photo1_highlighted.jpg' },
2: { normal: 'photo2_normal.jpg', highlighted: 'photo2_highlighted.jpg' },
// ... až do 9
};
// Inicializace hry
function initGame() {
const container = document.getElementById('gameContainer');
container.innerHTML = '';
cells.length = 0;
highlightedCount = 0;
for (let i = 1; i <= totalCells; i++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.index = i;
const img = document.createElement('img');
img.src = images[i].normal;
img.alt = `Koťátko ${i}`;
cell.appendChild(img);
cell.addEventListener('click', handleClick);
container.appendChild(cell);
cells.push(cell);
}
startGameLoop();
}
// Herní smyčka: aktivace náhodné buňky
function startGameLoop() {
if (intervalId) clearInterval(intervalId);
intervalId = setInterval(() => {
if (!gameActive || highlightedCount >= totalCells) return;
const availableCells = cells.filter(cell => !cell.classList.contains('highlighted'));
if (availableCells.length === 0) return;
const randomCell = availableCells[Math.floor(Math.random() * availableCells.length)];
activateCell(randomCell);
}, speed);
}
// Aktivace buňky (nafouknutí tváří)
function activateCell(cell) {
cell.classList.add('highlighted');
const img = cell.querySelector('img');
img.src = images[parseInt(cell.dataset.index)].highlighted;
highlightedCount++;
if (highlightedCount >= totalCells) {
gameOver();
}
}
// Zpracování kliknutí: reset buňky
function handleClick(e) {
const cell = e.currentTarget;
if (!cell.classList.contains('highlighted') || !gameActive) return;
cell.classList.remove('highlighted');
const img = cell.querySelector('img');
img.src = images[parseInt(cell.dataset.index)].normal;
highlightedCount--;
}
// Sekvence konce hry
function gameOver() {
gameActive = false;
clearInterval(intervalId);
const container = document.getElementById('gameContainer');
container.classList.add('disabled');
// Blikání všech buněk
const blinkInterval = setInterval(() => {
cells.forEach(cell => {
const img = cell.querySelector('img');
const index = parseInt(cell.dataset.index);
img.src = cell.classList.contains('blinking') ?
images[index].normal : images[index].highlighted;
cell.classList.toggle('blinking');
});
}, 500);
setTimeout(() => {
clearInterval(blinkInterval);
document.getElementById('modal').style.display = 'flex';
}, 5000);
}
// Restart hry
function resetGame() {
document.getElementById('modal').style.display = 'none';
document.getElementById('gameContainer').classList.remove('disabled');
speed = Math.max(1000, speed - 500); // Zvýšení obtížnosti
gameActive = true;
initGame();
}
// Spuštění hry při načtení
window.addEventListener('load', initGame);
</script>
</body>
</html>Co je důležité
- Podrobný prompt urychluje generování: Určení role, stylu, mechaniky a požadavků na kód dává funkční prototyp během sekund.
- Čtení kódu před umělou inteligencí: Základní dovednost analýzy snižuje bariéru pro experimenty.
- Návrh na papíře: Vizualizace logiky před kódováním zjednodušuje úkol pro umělou inteligenci.
- Jeden soubor pro vše: Ideální pro výuku a šíření.
- Responzivita a efekty: CSS Grid, proměnné, backdrop-filter zajišťují moderní uživatelský zážitek.
— Editorial Team
Google AdInline article slot
Zatím žádné komentáře.