Naprogramuj si Pac-Mana - lekce 4

V tomto díle si nastavíme herní pole a grafiku

Včera jsme si do našeho projektu stáhli všechnu potřebnou grafiku a dnes si připravíme herní plochu a vůbec základ celé hry.

Otevřeme si v editoru soubor index.html. Včera jsme pracovali s částí <head></head> a upravili jsme si obsah tagu <title></title>. V dalších dnech se budeme pohybovat hlavně v sekci <body></body>, kde bude uložená celá obsahová část naší hry. Na konci body by měl být tag <script src=“script.js“></script>. Pokud tam není, doplň si ho tam, prosím. Propojí nám náš základní html soubor s JavaScriptem, kde bude celá logika hry. Mezer v kódu si počítač nevšímá, je to jen zpřehlednění, tak aby se nám to četlo lépe.

Kód v index.html by měl vypadat takto:

<!DOCTYPE html>

<html>

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

<body>

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

</html>

Herní plocha

Primárně budeme využívat canvas. Je to super element, který se používá pro psaní 2D her a vykreslování různých obrázků pomocí JavaScriptu. Pokud už HTML trošku znáš, možná ti přijde divné, že obrázky nebudeme přidávat pomocí HTML a tagu <img>, ale pomocí JavaScriptu. Vše bude vysvětleno v následujících dnech.

Do index.html nad tag <skript> umístíme tag <div></div>. To je značka, která nemá výchozí styl, ale označuje nám jakýsi oddíl na stránce. Je to pomocný element, který nám pomáhá při stylování konkrétní sekce stránky. My do tohoto divu přidáme ještě jeden element, samotný canvas. Kód potom bude vypadat takto:

<div>
<canvas></canvas>
</div>

Později se budeme potřebovat na tuto herní plochu odkazovat v JavaScriptu. K tomu je nutné, aby byl JavaScript schopen HTML prvek naší herní plochy ve stránce najít a vybrat. Jde to zařídit několika způsoby, ale ten nejjednodušší a nejbezpečnější je, když k prvku přidáme jednoznačný identifikátor, takzvané ID (čti jako aj-dý).

ID přidáváme jako tzv. HTML atribut do otevírací poloviny značky. Různých HTML atributů existuje spousta, ale mají vždy následující podobu: nazev="hodnota". Název atributu je v našem případě id, jako hodnotu si zvolíme vlastní název, např. "game".

Ke značce <div> přidáme:

<div id=“game“>
<canvas></canvas>
</div>

A protože budeme chtít pracovat i s canvasem, tak přidáme ID i jemu, např. "canvas".

<div id=“game“>
<canvas id=“canvas“></canvas>
</div>

V HTML jsme prozatím hotoví. Když si stránku zobrazíme (stiskneme tlačítko Run nad editorem a vždycky, když uděláš změnu v programu, musíš kliknout na stop a zase run, aby se změny propsaly), zjistíme, že se nic nezměnilo a stránka vypadá stále prázdná. Jak už jsme říkali, značka <div> sama o sobě nijak nevypadá, vzhled jí musíme nastavit my sami. Vzhled se nastavuje v CSS. Kliknutím v levém sloupci otevřeme soubor style.css.

Jak už jsme si dříve řekli, CSS je tzv. selektivní jazyk, nyní musíme vybrat z HTML elementy, které budeme chtít nastylovat. K tomu nám slouží ta ID, které jsme si do elementů napsali. Pojďme si upravit náš canvas. Zápis selektoru pro výběr canvasu vypadá takto:

#canvas {
}

Teď canvas upravíme. Potřebujeme mu přidat nějaký obrázek na pozadí. K tomu slouží vlastnost background-image, která má jako hodnotu funkci url(), kam do závorky uvedeme cestu k našemu obrázku. Aby bylo pozadí vždy přes celou plochu, nastavíme jeho velikost na 100 % velikosti ve vodorovném i svislém směru.

#canvas {
background-image: url("images/inside.png");
}

Změnit bychom mohli i pozici celého canvasu, prozatím ho vidíme na levé straně. Mnohem lepší by bylo ho mít uprostřed. Celý canvas máme obalený tagem div s ID „game“. Pojďme tedy div pomocí vlastnosti text-align umístit na střed. Nastavme vlastnosti text-align hodnotu center. Po spuštění by canvas měl být umístěný na středu. Prozatím se nelekejme toho, že je herní plocha tak malá. Její velikost nastavíme až zítra v JavaScriptu.

Kód by měl po úpravě vypadat zhruba takto:

#canvas {
background-image: url("images/inside.png");
}

#game {
text-align: center;
}

Je trochu smutné, že je plocha kolem canvasu bílá a prázdná. Pojďme si přidat obrázek na celou stránku, aby to vypadalo hned veseleji. :) Protože chceme umístit obrázek na pozadí celé stránky, musíme změnit jako selektor zvolit celé body. A teď ta zásadní otázka, jakou vlastnost budeme upravovat? Pokud si myslíš background-image, tak ti gratuluji! Správně! Napíšeme si do CSS další kousek kódu:

body {
background-image: url('images/outside.png');
}

Když si spustíš projekt, tak hned poznáš rozdíl, hned to vypadá mnohem lépe a veseleji. Celý kód projektu najdeš zde.

Na závěr

První část kódu máme za sebou! Dobrá práce. Zítra se vrhneme na první práci s JavaScritptem a vygenerujeme celou herní plochu.

A protože budeme psát spoustu různých závorek a dalších zajímavých znaků, tak tady je malý tahák na klávesnici.

‍

Seznam lekcí

minulá lekce

další lekcE Vyber si další kurz

Naprogramuj si Pac-Mana - lekce 4

Herní plocha

<div> <canvas></canvas></div>

<div id=“game“> <canvas></canvas></div>

<div id=“game“> <canvas id=“canvas“></canvas></div>

#canvas {}

#canvas { background-image: url("images/inside.png");}

#canvas { background-image: url("images/inside.png");} #game { text-align: center;}

body { background-image: url('images/outside.png');}