3D kroužek ZŠ a MŠ Všeň

Hry v prohlížeči pomocí JavaScriptu a Canvas.

Programujeme tak, aby to šlo i doma: stačí prohlížeč a textový editor. Klidně Notepad. Na kroužku používáme i VS Code (ten je potřeba instalovat).

Začít doma Projekty

Tip: Když něco nefunguje, otevři v prohlížeči F12 → Console a hledej červené chyby.

Rychlé info

Pro děti 1.–5. třídy

Jazyk: JavaScript
Hry: Canvas (plátno)
Doma stačí: Prohlížeč + Notepad
Na kroužku: VS Code + 3D tisk

Bez instalace to jde. Instalace VS Code je jen „plus“.

Projekty z kroužku

Děláme hry v JavaScriptu na canvasu.

Hra na plátně (Canvas)

Aktuální

Vykreslíme herní svět na canvas a rozhýbeme objekty v herním cyklu.

Kreslení, souřadnice, herní smyčka

Pohyb postavy

Rozpracované

Ovládání pomocí klávesnice, pohyb po obrazovce, hranice a jednoduché překážky.

Proměnné, podmínky, klávesy
Uděláme jednoduché animace pozadí a hráčů
Kolize, gravitace při výskoku ve hře
Spustit hru »
Stáhnout soubory hry »
Spustit aktuální verzi »

Radius

Hra

Padající / létající objekty, které hráč sestřeluje. Body a jednoduché kolize.

Hotová hra, kterou se děti naučili upravovat
Spustit hru »
Stáhnout soubory hry »

Pohádka

Základy

V této jednoduché pohádce jsme si ukázali základy použití proměnných, funkcí a objektů. Při stisku F5 (obnovení stránky) se spustí naše hra.

Manipulace HTML a výpis dat
Použití smyčky while
Využití funkce
Objekty Drak a Rytir
Pro spuštění je třeba obnovit stránku, spustí se boj mezi rytířem a drakem. Průběh boje je vypsán na stránku.
Spustit hru »
Stáhnout soubory hry »

V čem programujeme

Programujeme hlavně v JavaScriptu a hry kreslíme do canvas. Doma stačí prohlížeč a textový editor – klidně jen Notepad.

Prohlížeč + textový editor (doporučené)

Vytvoříš složku a v ní dva soubory: index.html a game.js. Otevřeš index.html v prohlížeči. Po změnách dáš F5 (obnovit). Když se něco pokazí, koukneš do F12 → Console.

Editor: Notepad (bez instalace) nebo VS Code (instalace, používáme na kroužku)
Prohlížeč: Chrome / Edge / Firefox
Canvas: „plátno“, na které JavaScript kreslí hru

Notepad: nejdůležitější trik

V Notepadu dej Uložit jako… → Typ: Všechny soubory, a soubor pojmenuj přesně index.html (ne index.html.txt).

F12 Console F5 Obnovit

Jak začít doma

Doporučený postup (stejný jako v kroužku). Zvládneš to i jen s Notepadem. VS Code je také možné použít, ale je potřeba ho nainstalovat.

Co je canvas? Canvas je „plátno“ v prohlížeči. JavaScript na něj kreslí (a maže a kreslí znovu) – a tím vzniká pohyb a hra.

Vytvoř složku

Např. Plocha → 3Dkrouzek. Všechno budeme ukládat sem.

Vytvoř soubory

Ve složce udělej index.html a game.js. Pozor na koncovky – nesmí to být .txt.

Spusť a kontroluj chyby

Otevři index.html v prohlížeči. Po úpravě dej F5. Když něco nejde: F12 → Console.

Mini šablona (zkopíruj)

Vlož přesně do souborů. Pak jen upravuj čísla a barvy.

index.html

<!doctype html>
<html lang="cs">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Moje Canvas hra</title>
  <style>
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 24px; }
    canvas { border: 1px solid #e5e5e5; border-radius: 12px; }
  </style>
</head>
<body>
  <h1>Moje Canvas hra</h1>
  <canvas id="game" width="420" height="280"></canvas>
  <p>Tip: otevři F12 → Console.</p>
  <script src="game.js"></script>
</body>
</html>

game.js

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let x = 40;
let y = 40;
let vx = 2;
let vy = 2;

function tick() {
  // vyčistit plátno
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // pohyb
  x += vx;
  y += vy;

  // odraz od okrajů
  if (x < 0 || x > canvas.width - 30) vx *= -1;
  if (y < 0 || y > canvas.height - 30) vy *= -1;

  // nakreslit "hráče"
  ctx.fillRect(x, y, 30, 30);

  requestAnimationFrame(tick);
}

tick();