V tomto díle si do projektu přidáme potřebnou grafiku.

Nyní už víme, s jakými jazyky budeme pracovat a jakou roli v naší hře budou hrát. Máme také založený projekt na Repl.it.

Editor nám už základní kostru HTML stránky připravil. Když se podíváš do souboru index.html, najdeš v něm spoustu tagů. Nás bude nyní zajímat sekce <head>…</head>. V ní je značka <title>…</title>, která obsahuje titulek naší stránky. Přepíšeme výchozí text "repl.it" na něco rozumnějšího. Já jsem si do titulku napsal "Moje hra".

Upravený kód by měl vypadat takto:

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>Moje hra</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
   <div id="game">
       <canvas id="canvas"></canvas>
   </div>

   <script src="script.js"></script>
</body>

</html>

Stažení obrázků

Do projektu si potřebujeme přidat všechny obrázky, se kterými budeme pracovat v průběhu vývoje.

Grafické podklady najdeš zde.

Odkaz vede na Google drive, kde si vše můžeš stáhnout.

ZIP rozbal někde u sebe na disku. Soubory nyní musíme dostat do našeho online editoru. Naštěstí je to v Repl.itu jednoduché. Otevři svůj projekt - všechny své projekty najdeš pod odkazem My repls nahoře v menu.

Nad seznamem souborů vlevo jsou ikonky pro vytváření nových souborů a složek. Klikni na ikonku New folder a vytvoř si v projektu novou složku. Pojmenuj ji images - vše malými písmeny. Pak klikni na 3 tečky a zvol možnost Upload folder, vyber složku kterou sis rozbalila ve svém počítači a naimportuj si ji do projektu. S největší pravděpodobností se ti obrázky nenaimportují do vytvořené složky, postačí, když je do složky přetáhneš.

Na závěr

Grafiku máme, zítra už se pustíme do samotného kódu. :)

Zaujal Tě tento online kurz?

Přihlásit k newsletteru

Projekt online vzdělávání byl realizován v rámci Stipendia Czechitas v projektu: „Ženy do IT“ (reg.č. CZ.03.1.51/0.0/0.0/16_061/0003268), který je financován z prostředků Evropského sociálního fondu prostřednictvím Operačního programu Zaměstnanost.