Hry – Část 7: Kóduj hry!

Hra 1

Had

Klasická hra — ovládej šipkami!

🐍

🎯 Co se naučíš

Had tě naučí: Canvas API (kreslení na plátno), herní smyčku pomocí setInterval, zpracování klávesnice a práci s polem pro tělo hada.

🐍 Snake — hraj šipkami!

🎮 ŽIVÁ HRA

📝 Kód

<div id="info">🐍 Had — ovládej šipkami nebo WASD</div>
<canvas id="plocha" width="280" height="280"></canvas>
<div id="skore-display">Skóre: 0</div>
<div id="zprava">Stiskni šipku pro start!</div>

let had, jidlo, smer, skore, interval, hraJede;

function init() {
    had = [{x:7, y:7}, {x:6,y:7}, {x:5,y:7}];
    smer = {x:1, y:0};
    skore = 0;
    hraJede = false;
    novéJídlo();
    kresli();
  }

function novéJídlo() {
    jidlo = {
      x: Math.floor(Math.random() * SIRKA),
      y: Math.floor(Math.random() * VYSKA)
    };
  }

function kresli() {
    // Pozadí
    ctx.fillStyle = "#070D0A";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

// Mřížka (jemná)
    ctx.strokeStyle = "rgba(74,222,128,0.05)";
    ctx.lineWidth = 0.5;
    for(let i=0;i<SIRKA;i++){ctx.beginPath();ctx.moveTo(i*MRIZ,0);ctx.lineTo(i*MRIZ,canvas.height);ctx.stroke();}
    for(let i=0;i<VYSKA;i++){ctx.beginPath();ctx.moveTo(0,i*MRIZ);ctx.lineTo(canvas.width,i*MRIZ);ctx.stroke();}

// Jídlo
    ctx.fillStyle = "#FCD34D";
    ctx.beginPath();
    ctx.arc(jidlo.x*MRIZ+MRIZ/2, jidlo.y*MRIZ+MRIZ/2, MRIZ/2-2, 0, Math.PI*2);
    ctx.fill();

// Had
    had.forEach((seg, i) => {
      ctx.fillStyle = i === 0 ? "#4ADE80" : `hsl(${140 - i*3}, 80%, ${50 - i*1}%)`;
      ctx.beginPath();
      ctx.roundRect(seg.x*MRIZ+1, seg.y*MRIZ+1, MRIZ-2, MRIZ-2, 4);
      ctx.fill();
    });

document.getElementById("skore-display").textContent = "Skóre: " + skore;
  }

function krok() {
    const hlava = {x: had[0].x + smer.x, y: had[0].y + smer.y};

// Kontrola stěn
    if (hlava.x < 0 || hlava.x >= SIRKA || hlava.y < 0 || hlava.y >= VYSKA) {
      konec(); return;
    }
    // Kontrola sebe sama
    if (had.some(s => s.x===hlava.x && s.y===hlava.y)) {
      konec(); return;
    }

had.unshift(hlava);

// Jídlo?
    if (hlava.x === jidlo.x && hlava.y === jidlo.y) {
      skore++;
      novéJídlo();
    } else {
      had.pop();
    }

kresli();
  }

function start() {
    if (hraJede) return;
    hraJede = true;
    document.getElementById("zprava").textContent = "";
    interval = setInterval(krok, 150);
  }

function konec() {
    clearInterval(interval);
    hraJede = false;
    document.getElementById("zprava").textContent = "💀 Konec! Skóre: " + skore + " — stiskni šipku pro restart";
    init();
  }

init();
</script>

👁️ Hra

💡 Canvas: ctx.fillRect() kreslí čtverce, ctx.arc() kruhy. Canvas je jako papír — každý snímek ho celý přemalujeme!

Hra 2

Šibenice

Hádej slovo písmeno po písmenu

🔤

🎯 Co se naučíš

Šibenice tě naučí: práci s řetězci (String metody), includes(), split() a join() a jak dynamicky generovat HTML klávesnici.

🔤 Šibenice

🎮 ŽIVÁ HRA

📝 Kód

<h2>🔤 Šibenice</h2>
<div class="sibenice" id="obrazek"></div>
<div class="zivoty" id="zivoty"></div>
<div class="kategorie" id="kategorie"></div>
<div class="slovo" id="slovo"></div>
<div class="klavesnice" id="klavesnice"></div>
<div id="zprava"></div>
<button id="znovu" onclick="novaSlovoPicker()">↺ Nové slovo</button>

const OBRAZKY = ["😊","😅","😬","😰","😨","😱","💀"];

let tajneSlovo, hadanaSlova, zivoty, konecHry;

function novaSlovoPicker() {
    const vyber = slovnik[Math.floor(Math.random() * slovnik.length)];
    tajneSlovo = vyber.slovo;
    hadanaSlova = [];
    zivoty = 6;
    konecHry = false;
    document.getElementById("znovu").style.display = "none";
    document.getElementById("kategorie").textContent = "Kategorie: " + vyber.kategorie;
    zobrazHru();
  }

function zobrazHru() {
    // Obrázek
    document.getElementById("obrazek").textContent = OBRAZKY[6 - zivoty];
    document.getElementById("zivoty").textContent = "❤️".repeat(zivoty) + "🖤".repeat(6-zivoty);

// Slovo
    const slovoDiv = document.getElementById("slovo");
    slovoDiv.innerHTML = "";
    [...tajneSlovo].forEach(p => {
      const d = document.createElement("div");
      d.className = "pismeno";
      d.textContent = hadanaSlova.includes(p) ? p : "";
      slovoDiv.appendChild(d);
    });

// Klavesnice
    const kl = document.getElementById("klavesnice");
    kl.innerHTML = "";
    "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").forEach(p => {
      const btn = document.createElement("button");
      btn.className = "klav";
      btn.textContent = p;
      btn.disabled = hadanaSlova.includes(p) || konecHry;
      if (hadanaSlova.includes(p)) btn.classList.add(tajneSlovo.includes(p) ? "spravne" : "spatne");
      btn.onclick = () => hadej(p);
      kl.appendChild(btn);
    });

// Kontrola výhry/prohry
    const vyhral = [...tajneSlovo].every(p => hadanaSlova.includes(p));
    const zprava = document.getElementById("zprava");
    if (vyhral) {
      zprava.innerHTML = '<span style="color:#4ADE80">🎉 Výborně! Uhodl jsi: ' + tajneSlovo + '!</span>';
      document.getElementById("znovu").style.display = "block";
      konecHry = true;
    } else if (zivoty <= 0) {
      zprava.innerHTML = '<span style="color:#F87171">💀 Prohrál jsi! Slovo bylo: ' + tajneSlovo + '</span>';
      document.getElementById("znovu").style.display = "block";
      konecHry = true;
    } else {
      zprava.textContent = "";
    }
  }

function hadej(pismeno) {
    if (konecHry || hadanaSlova.includes(pismeno)) return;
    hadanaSlova.push(pismeno);
    if (!tajneSlovo.includes(pismeno)) zivoty--;
    zobrazHru();
  }

novaSlovoPicker();
</script>

👁️ Hra

💡 Array metody: .includes() zkontroluje jestli pole obsahuje hodnotu. [...slovo] rozloží string na pole písmen!

Hra 3

Paměť (Memory)

Najdi všechny páry karet

🧩

🎯 Co se naučíš

Memory tě naučí: míchání pole (shuffle), setTimeout pro zpoždění, a jak sledovat stav hry s více proměnnými najednou.

🧩 Memory — najdi páry!

🎮 ŽIVÁ HRA

📝 Kód

<h2>🧩 Memory</h2>
<div id="stats">Tahy: 0 | Páry: 0/8</div>
<div class="grid" id="grid"></div>
<div id="zprava"></div>
<button id="znovu" onclick="novayHra()">↺ Nová hra</button>

let karty, otevrene, nalezene, tahy, cekani;

function novayHra() {
    // Zdvojíme a zamícháme
    karty = [...EMOJI, ...EMOJI].sort(() => Math.random() - 0.5);
    otevrene = [];
    nalezene = new Set();
    tahy = 0;
    cekani = false;
    document.getElementById("zprava").textContent = "";
    document.getElementById("znovu").style.display = "none";
    zobrazGrid();
  }

function klik(i) {
    if (cekani || otevrene.includes(i) || nalezene.has(i)) return;
    otevrene.push(i);
    zobrazGrid();

if (otevrene.length === 2) {
      tahy++;
      cekani = true;
      const [a, b] = otevrene;

if (karty[a] === karty[b]) {
        // Pár!
        nalezene.add(a); nalezene.add(b);
        otevrene = [];
        cekani = false;
        zobrazGrid();
        if (nalezene.size === karty.length) {
          document.getElementById("zprava").innerHTML = '<span style="color:#4ADE80">🎉 Výborně! Hotovo za ' + tahy + ' tahů!</span>';
          document.getElementById("znovu").style.display = "inline-block";
        }
      } else {
        // Ne pár — skryj po 800ms
        setTimeout(() => { otevrene = []; cekani = false; zobrazGrid(); }, 800);
      }
    }
  }

novayHra();
</script>

👁️ Hra

💡 Shuffle trik: .sort(() => Math.random() - 0.5) náhodně promíchá pole. Math.random() vrací 0 až 1 — odečtením 0.5 dostaneme záporná i kladná čísla náhodně!

🏆 Herní odznaky

🐍

Hadí Kodér

🔤

Šibeničář

🧩

Memory Mistr

← Část 6 Část 8: Závěr →

Kóduj Hry!

🎯 Co se naučíš

🎯 Co se naučíš

🎯 Co se naučíš

🏆 Herní odznaky