AI SKOP

Tetris pro Gemini

Zveřejněno v od Milan Kajnar

Metaprompt: Funkční hra Tetris v prohlížeči Chrome

Tento metaprompt popisuje kompletní implementaci hry Tetris v prohlížeči, s důrazem na HTML strukturu, CSS stylování (včetně Tailwind CSS) a JavaScriptovou herní logiku. Cílem je vytvořit plně funkční a responzivní hru.

1. Základní požadavky

  • Jazyky: HTML5, CSS3 (s Tailwind CSS), JavaScript (ES6+).
  • Platforma: Webový prohlížeč (optimalizováno pro Chrome).
  • Responzivita: Plně responzivní design pro desktopová i mobilní zařízení.
  • Interakce: Ovládání pomocí klávesnice a dotykových tlačítek na obrazovce.

2. HTML Struktura (index.html)

Vytvořte standardní HTML5 dokument s následujícími klíčovými prvky:

  • <!DOCTYPE html> a základní struktura: <html>, <head>, <body>.
  • Meta tagy:
    • <meta charset="UTF-8">
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Titulek: <title>Tetris</title>
  • Import fontu: Google Fonts – ‚Inter‘ (váhy 400, 700).
  • Import Tailwind CSS: CDN odkaz <script src="https://cdn.tailwindcss.com"></script>.
  • Vlastní CSS styly: Vložené přímo do <style> tagu v <head>.
  • Hlavní kontejner hry: div s třídou game-container.
    • Bude obsahovat všechny herní prvky.
  • Informační panel: div s třídou info-panel.
    • div pro skóre: Skóre: <span id="score">0</span>
    • div pro úroveň: Úroveň: <span id="level">1</span>
  • Canvas pro hru: <canvas id="tetrisCanvas" width="300" height="600"></canvas>
    • Důležité: width a height budou dynamicky upraveny JavaScriptem pro responzivitu.
  • Ovládací tlačítka: div s třídou controls.
    • Tlačítka (<button>) pro pohyb doleva (id="leftBtn"), otočení (id="rotateBtn"), pohyb doprava (id="rightBtn").
    • Tlačítko pro rychlý pád (id="downBtn") s třídou wide pro roztažení přes celou šířku.
  • Overlay pro konec hry: div s třídou game-over-overlay a počátečním display: none;.
    • Nadpis <h2>KONEC HRY!</h2>
    • Zobrazení konečného skóre: <p>Vaše skóre: <span id="finalScore">0</span></p>
    • Tlačítko pro restart: <button class="start-button" id="restartBtn">Hrát znovu</button>
  • JavaScript kód: Vložený přímo do <script> tagu na konci <body>.

3. CSS Stylování (Tailwind a vlastní)

Použijte kombinaci Tailwind CSS tříd a vlastních CSS pravidel pro dosažení moderního a responzivního vzhledu.

  • body:
    • font-family: 'Inter', sans-serif;
    • background-color: #1a202c; (tmavé pozadí)
    • color: #e2e8f0; (světlý text)
    • Flexbox pro centrování obsahu (display: flex, flex-direction: column, justify-content: center, align-items: center, min-height: 100vh).
    • margin: 0; padding: 20px; box-sizing: border-box; overflow: hidden;
  • .game-container:
    • Flexbox pro vnitřní uspořádání (display: flex, flex-direction: column, gap: 20px).
    • background-color: #2d3748; (o něco světlejší tmavé pozadí)
    • padding: 20px; border-radius: 15px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    • max-width: 90%; width: 400px; align-items: center; (responzivní šířka)
  • canvas:
    • background-color: #000; border: 5px solid #4a5568; border-radius: 8px;
    • display: block; touch-action: none; (pro dotykové ovládání)
    • width: 100%; max-width: 300px; aspect-ratio: 1/2; (responzivní a udržuje poměr stran)
  • .info-panel:
    • display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: center;
  • .score-display, .level-display:
    • font-size: 1.2em; font-weight: bold; color: #a0aec0;
  • .controls:
    • display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: 15px;
  • .control-button:
    • background-color: #4299e1; color: white; padding: 12px 0; border: none; border-radius: 8px;
    • font-size: 1.1em; font-weight: bold; cursor: pointer;
    • transition: background-color 0.2s, transform 0.1s; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); text-align: center;
    • Stavy :hover a :active pro vizuální zpětnou vazbu.
  • .control-button.wide: grid-column: span 3;
  • .game-over-overlay:
    • position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    • background-color: rgba(0, 0, 0, 0.7);
    • Flexbox pro centrování obsahu (display: flex, flex-direction: column, justify-content: center, align-items: center).
    • z-index: 1000; border-radius: 15px; text-align: center;
    • Styly pro h2 a p uvnitř overlay.
  • .start-button:
    • background-color: #48bb78; color: white; padding: 15px 30px; border: none; border-radius: 10px;
    • font-size: 1.5em; font-weight: bold; cursor: pointer;
    • transition: background-color 0.2s, transform 0.1s; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
    • Stavy :hover a :active.
  • Responzivní úpravy (@media (max-width: 600px)):
    • game-container a canvas úpravy šířky a odsazení.
    • Menší velikost fontu a padding pro tlačítka a text v overlay.

4. JavaScript Logika

Implementujte herní logiku uvnitř <script> tagu.

  • Získání DOM elementů: canvas, ctx, scoreDisplay, levelDisplay, gameOverOverlay, finalScoreDisplay, restartBtn.
  • Konstanty hry:
    • COLS = 10; (počet sloupců hrací plochy)
    • ROWS = 20; (počet řádků hrací plochy)
    • let BLOCK_SIZE; (velikost jednoho bloku, bude dynamicky vypočítána)
  • Herní stavové proměnné:
    • board = []; (2D pole pro hrací plochu)
    • currentPiece; (aktuálně padající kus)
    • nextPiece; (není vizuálně implementováno, ale může být pro budoucí rozšíření)
    • score = 0; level = 1; dropInterval = 1000; lastDropTime = 0; gameOver = false; animationFrameId;
  • Definice Tetrominoes:
    • Pole objektů TETROMINOES, každý s shape (2D pole 1 a 0) a color (hex kód). Zahrňte všechny standardní tvary (I, O, T, S, Z, L, J).
  • Funkce:
    • initBoard(): Inicializuje board naplněním nulami (prázdné buňky).
    • createPiece():
      • Náhodně vybere jeden z TETROMINOES.
      • Vrátí objekt s shape, color, x (horizontálně vycentrováno) a y (na začátku 0).
    • drawBlock(x, y, color):
      • Vykreslí jeden čtvercový blok na canvasu na daných souřadnicích s danou barvou.
      • Použije ctx.fillStyle, ctx.fillRect, ctx.strokeStyle, ctx.strokeRect.
    • draw():
      • Vymaže celý canvas (ctx.clearRect).
      • Vykreslí všechny usazené bloky z board.
      • Vykreslí currentPiece na jeho aktuální pozici.
    • checkCollision(x, y, pieceShape):
      • Zkontroluje, zda daný tvar kusu na pozici (x, y) koliduje s hranicemi hrací plochy nebo s již usazenými bloky na board.
      • Vrátí true při kolizi, false jinak.
    • mergePiece():
      • Spojí currentPiece s board tak, že buňky obsazené kusem se vyplní jeho barvou.
    • clearLines():
      • Iteruje odspodu hrací plochy.
      • Pokud je řádek plný (všechny buňky nejsou 0), odstraní ho z board a přidá nový prázdný řádek na začátek board.
      • Aktualizuje score a volá updateLevel().
    • updateLevel():
      • Zvýší level na základě score (např. každých 500 bodů).
      • S každou novou úrovní sníží dropInterval (zvýší rychlost padání).
    • dropPiece():
      • Pokusí se posunout currentPiece o jeden řádek dolů.
      • Pokud dojde ke kolizi, mergePiece(), clearLines(), vytvoří nový currentPiece.
      • Pokud nový currentPiece okamžitě koliduje, zavolá endGame().
      • Zavolá draw().
    • moveLeft(), moveRight(), rotatePiece():
      • Implementují pohyb a rotaci kusu.
      • rotatePiece() by měla obsahovat jednoduchou logiku „wall kick“ pro posun kusu, pokud se po rotaci dotýká stěny.
      • Vždy volají draw() po úspěšném pohybu/rotaci.
    • gameLoop(currentTime):
      • Hlavní herní smyčka využívající requestAnimationFrame.
      • Vypočítá deltaTime a pokud je větší než dropInterval, zavolá dropPiece() a aktualizuje lastDropTime.
    • endGame():
      • Nastaví gameOver = true.
      • Zobrazí gameOverOverlay a aktualizuje finalScoreDisplay.
      • Zruší animationFrameId (cancelAnimationFrame).
    • startGame():
      • Resetuje všechny herní proměnné na počáteční hodnoty.
      • Skryje gameOverOverlay.
      • Zavolá initBoard(), createPiece().
      • Nastaví lastDropTime na performance.now().
      • Zavolá draw() a spustí gameLoop().
  • Event Listenery:
    • document.addEventListener('keydown', ...): Pro ovládání klávesnicí (ArrowLeft, ArrowRight, ArrowDown, ArrowUp, Space).
    • document.getElementById(...).addEventListener('click', ...): Pro dotyková tlačítka.
    • restartBtn.addEventListener('click', startGame);
    • window.onload:
      • Nastaví canvas.width a canvas.height dynamicky na základě šířky rodičovského elementu (max 300px), udržuje poměr stran 1:2.
      • Přepočítá BLOCK_SIZE.
      • Zavolá startGame().
    • window.addEventListener('resize', ...):
      • Při změně velikosti okna znovu nastaví rozměry canvasu a přepočítá BLOCK_SIZE.
      • Zavolá draw() pro překreslení.

5. Herní Mechaniky

  • Padání kusů: Automatické padání kusů v pravidelných intervalech.
  • Detekce kolizí: Zajištění, že kusy nepřekročí hranice hrací plochy a neprojdou skrz usazené bloky.
  • Mazání řádků: Detekce a odstranění plných řádků, posun zbývajících bloků dolů.
  • Bodování: Přidělování bodů za vymazané řádky.
  • Progres úrovně: Zvyšování úrovně a rychlosti padání s rostoucím skóre.
  • Konec hry: Hra končí, když nový kus nemůže být umístěn na hrací plochu.
  • Rotace s „wall kick“: Možnost rotace kusu a jednoduchá logika pro posun kusu, pokud by se po rotaci dostal mimo hranice.