Zůstaň doma a naprogramuj si hru 3

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. Dnes si do projektu přidáme potřebnou grafiku.

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š.

Replit

Na závěr

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

Další den

Předcházející den