Naučte se, jak manipulovat s DOM vytvořením jednoduché barevné hry JavaScript

Co je DOM?

DOM je zkratka pro Document Object Model. Není to nic jiného než blokové schéma všech prvků HTML načtených na stránce, když prohlížeč načte webovou stránku. Je prezentován jako strom objektů, které jsou HTML elementy. Podívejte se na obrázek níže a můžete získat lepší představu.

DOM reprezentace jednoduchého souboru .html

Pěkný čistý blokový diagram vašeho ošklivého souboru .html - není to skvělé! Ale teď si myslíte, jak mi to pomůže? Jaký je případ použití? Proč to musím vědět?

Jednoduše řečeno, DOM vám umožňuje přinést dynamiku na váš statický web. S použitím DOM můžete na webové stránce dělat spoustu užitečných věcí, jako například:

  • přidávání a mazání prvků a atributů HTML
  • přidání a odstranění pravidel CSS u události vyvolané uživatelem
  • vytváření nových událostí pro syntetické uživatelské události

A to je přesně to, co se naučíte v průběhu tohoto článku.

Chcete-li získat představu o tom, čeho dosáhneme do konce tohoto článku, podívejte se na tento odkaz.

Začínáme

Postavíme jednoduchou hru s hádáním barev. Při každém spuštění hry bude vybrán náhodný barevný kód RGB. V závislosti na režimu hry budeme mít na výběr tři (snadné) nebo šest (tvrdé) možnosti nebo barevné bloky. Pokaždé, když je vybrán nesprávný barevný blok, blok zmizí, dokud uživatel nevybere správnou barvu (nebo její poslední zbývající možnost).

Zde je hrubý diagram toho, co bychom stavěli:

To je něco, co jsem se naučil, když jsem chodil na kurz od Colta Steeleho, fenomenálního trenéra, co se týče výuky základních pojmů. Všichni byste si měli prohlédnout jeho videa na kanálu YouTube pro Udemy.

Maketa diagramu

Část 1

Začneme vytvořením jednoduché desky webového kotle, která bude ohrožena soubory index.html, app.css a app.js. Podívejme se, jak tyto soubory vypadají, když začínáme.

Nejprve si však prosím všimněte: jen proto, aby to bylo jednoduché pro každého, kdo to čte bez předchozí zkušenosti s vývojem, budu i nadále zobrazovat zdrojový kód, kdykoli změníme něco důležitého.

  • index.html


 Barevná hra 

Velká
RGB
Barevná hra


 


Je to tak jednoduché, jak to jde. Můžeme jednoduše rozdělit celou webovou stránku do tří primárních bloků.

Nejprve máme sekci záhlaví, která má text a může obsahovat nějaké další informace, pokud jej tam chcete přidat.

Další je ovládací panel, který má tlačítka pro resetování hry a přepínání mezi herními režimy.

Třetí - a nejzajímavější část - je hlavní herní oblast, která má šest divů. Tyto divy slouží jako možnosti pro každý náhodný barevný kód RGB, který lze vybrat nějakou fantastickou logikou (kterou uvidíme za chvíli).

  • app.css
tělo {
barva pozadí: # 232323;
marže: 0;
font-family: "Montserrat", "Avenir";
}
h1 {
zarovnání textu: střed;
výška řádku: 1,1;
font-weight: normal;
barva bílá;
pozadí: steelblue;
marže: 0;
textová transformace: velká písmena;
čalounění: 20px 0;
}
#container {
okraj: 20px auto;
max-width: 600px;
}
.náměstí {
šířka: 30%;
pozadí: fialová;
čalounění: 30%;
plavat vlevo;
marže: 1,66%;
poloměr hranice: 15%;
přechod: pozadí 0,6 s;
-webkit-transition: background 0.6s;
-moz-přechod: pozadí 0,6 s;
}

Byly přidány některé základní styly pro tělo, text a čtverce, které slouží jako možnosti hry.

  • app.js
var numSquares = 6;
var colours = [];
var pickedColor;
var squares = document.querySelectorAll (". square");
var resetButton = document.querySelector ("# reset");
var modeButtons = document.querySelectorAll (". mode");

Uložili jsme všechny prvky HTML ve formě proměnných. Pomůže nám to provést některé akce přidáním událostí do každé z těchto proměnných a jejich voláním v různých logických funkcích, které vytvoříme během tohoto článku.

Ve skutečnosti rozdělme každou z těchto proměnných a uvidíme, jaký je jejich význam:

  • Proměnná numSquares ukládá počet čtverců, které budou ve hře dostupné podle režimu. Kvůli jednoduchosti jsem pevně zakódoval hodnotu vždy šest - můžeme se k tomu vrátit a přidat nějakou logiku, abychom ji udrželi v platnosti.
  • color je prázdné pole, které obsahuje náhodný šest nebo tři barevný kód RGB generovaný pokaždé, když je hra resetována nebo je změněn režim.
  • pickedColor je blok barvy / volby vybraný uživatelem při každém kliknutí.
  • čtverce je pole všech čtverců na stránce, které jsou k dispozici jako možnosti. Toto pole může mít tři nebo šest prvků v závislosti na režimu hry.
  • Resetovací proměnná je tlačítko „nová hra“ na ovládacím panelu.
  • modeButtons je opět pole, které obsahuje tlačítka pro snadný a tvrdý režim.

Pokud jste tento krok sledovali, měli byste zde mít docela základní verzi této hry. Soubor index.html můžete otevřít v kterémkoli prohlížeči a zkontrolovat. Dobře, takže teď, když máme pozemek, pojďme k vážným věcem.

Část 2

V této sekci budeme většinou pracovat se souborem JavaScript a několikrát se souborem CSS.

Vytváření náhodných barev

Naším prvním cílem bude generování náhodných barev při každém spuštění nebo restartování hry nebo změně režimu. Podívejme se, jak na to.

Abychom pochopili základní princip náhodného generování všeho, měli bychom začít tvrdým kódovým polem šesti RGB barevných kódů. Zkusme nastavit tyto barvy jako barvy pozadí šesti čtverců / možností dostupných na webové stránce.

var colours = [
    "rgb (255, 0, 0)",
    "rgb (255, 0, 255)",
    "rgb (255, 225, 0)",
    "rgb (255, 0, 255)",
    "rgb (0, 255, 255)",
    "rgb (0, 255, 0)"
];
var squares = document.querySelectorAll (.squares);
pro (i = 0; i <čtvereční délku; i ++) {
squares.style.backgroundColor = barvy [i]
}
  • Do pole barev jsem přidal šest statických barevných kódů RGB
  • Už vytvořené pole čtverců jsem použil ke spuštění smyčky přes všechna pole přítomná v poli.
  • Přizpůsobil jsem barvu pozadí každého čtverce jeho odpovídajícímu indexu v poli barev.

Pokud to přidáte do souboru app.js a aktualizujete prohlížeč, uvidíte, že každý čtverec je nyní jedinečnou barvou.

* screenshot z prohlížeče

Možná si všimnete, že tlačítka ještě nejsou stylizovaná, ale nechte to prozatím. K té části se dostaneme později.

Povolit funkci klikání

Potřebujeme tedy pouze aktivaci posluchačů událostí u každé možnosti / poslouchání barevného bloku pro události kliknutí. Nejjednodušší způsob, jak toho dosáhnout, je - opět jste uhodli správně - opakováním pole čtverců. Tato smyčka by vypadala podobně jako ta, která byla použita ke stylu pozadí barevných bloků. Pojďme se podívat na kód:

pro (i = 0; i <= čtvereční délku; i ++) {
  čtverce [i] .addeventListeners ('click', function () {
    alert ('click was clicked');
  });
}

Nyní pokaždé, když kliknete na jakýkoli blok, dostanete tuto výstražnou zprávu z prohlížeče. To bylo jednoduché! Nyní jsou naše možnosti vnímavé a reagují na vstup uživatele. Nyní musíme jen definovat logiku, která řekne, co se stane, pokud barva vybraná ve hře a barva vybraná uživatelem jsou stejné.

Nyní již možná máte řešení, pokud jste pečlivě věnovali pozornost výše uvedeným částem. Uvidíme, jak to dokážeme.

Kontrola, zda je barva správná nebo ne

Pojďme prozkoumat možnosti, které máme, protože naše možnosti / barevné rámečky jsou vnímavé a reagují zpět. Můžeme provést malý test a uvidíme, jestli se obě barvy shodují nebo ne. Velmi brzy budeme mít náhodně generované barvy pokaždé, když obnovíme stránku nebo pokaždé, když resetujeme hru nebo změníme režim hry. Prozatím však procvičíme sadu šesti barevných kódů RGB, které jsme v souboru přiřadili.

Pojďme se podívat na nějaký kód a pak bych to pro vás rozebral.

pro (i = 0; i <= čtvereční délku; i ++) {
  čtverce [i] .addeventListeners ('click', function () {
    // pokud kliknete na správný blok, udělejte něco ....
    // pokud kliknete na nesprávný blok, udělejte něco ....
  });
}

Jak již možná víte, použijeme jednoduchý blok if-else.

pickedColor = barvy [3];

pro (i = 0; i <= čtvereční délku; i ++) {
 // použít barvu pozadí na všechna pole ...
 čtverce [i] .style.backgroundColor = barvy [i]
   // povolit událost kliknutí na každém čtverci .....
     čtverce [i] .addEventListener ('click', function () {
       // pokud uživatel vybral správnou barvu ....
         var clickedColor = this.style.backgroundColor;
        // zkontrolujte, zda vybraná barva odpovídá výchozí barvě ...
         if (pickedColor === clickedColor) {
             changeColors (pickColor);
           }
         // pokud uživatel vybral nesprávnou barvu ....
         jinde {
           this.style.backgroundColor = "# 232323";
           messageDisplay.text = "Nesprávná volba!";
         }
    })
};

Já vím - je to hodně kódu. Podívejme se však, co to ve skutečnosti znamená:

  • Začínáme definováním výchozí barvy vybrané ve hře, s proměnnou pickedColour.
  • Pak spustíme smyčku for for, která nám umožní procházet řadou barevných bloků / možností.
  • Poté povolíme události click na každé barevné barce / možnosti. Děláme to pomocí funkce zpětného volání. Tato funkce neudělá nic jiného než barvu pozadí vybraného barevného bloku / volby jednoduše tím, že ji přiřadí proměnné zvané clickedColour.
  • Nyní máme obě barvy: jednu, která byla vybrána hrou a druhou uživatelem. Zbývá už jen zápas a zjistit, zda byl výběr správný nebo ne.
  • Můžeme to udělat snadno pomocí bloku if if else. Pokud je volba správná, udělejte to, nebo udělejte něco jiného
  • Pokud je vybrána správná barva, přidáme na stránku nějaký text, abychom potvrdili správnou volbu, a přidáme nějaký vizuální efekt pro potvrzení. Jinak se shodujeme s barvou dané konkrétní možnosti / bloku, aby odpovídala barvě pozadí stránky. Výsledkem bude efekt, jako by právě barevný blok / volba právě zmizela.
  • Nyní jste viděli, že pokud je vybrána stejná barva, je vykonána funkce. Uvidíme, z čeho je tato funkce vytvořena:
funkce changeColors (color) {
 pro (i = 0; i <= čtvereční délku; i ++) {
  čtverce [i] .style.backgroundColor = color;
  messageDisplay.text = "Jste v hádání!";
 }
}

Tato funkce prochází řadou barevných bloků / možností a resetuje barvu pozadí na barvu vybrané nebo výchozí barvy.

V případě, že barvy nejsou stejné, jednoduše nastavíme barvu pozadí aktuálního výběru na barvu webové stránky.

jinde {
  this.style.backgroundColor = "# 232323";
  messageDisplay.text = "Nesprávná volba!";
}

Dobře, teď, když máme hlavní herní sadu, musíme si dělat starosti s minimálními problémy s designem a přidáním funkčnosti do ovládacího panelu.

Nejprve se ale podívejme, jak vypadá složka s kódem v tomto okamžiku, pokud jste všechny kroky správně dodrželi:

index.html

app.css

app.js

Krok 3

Vše je v pořádku. Nyní však musíme v naší hře vytvořit nové náhodně generované barevné kódy RGB, které nejsou stejnou sadou barev, které by byly přiřazeny v barevných blocích / možnostech.

Pokud vás to přiměje přemýšlet o funkcích, pak je to správná volba. Vytvoříme novou funkci spolu s úplně náhodnými (novými) barevnými kódy a přiřadíme je k poli barev. Potom je načteme do pole barevných bloků / voleb.

Podívejme se, jak kód vypadá, a pak jdeme přes něj řádek po řádku.

Vestavěná metoda v JavaScriptu nám pomáhá generovat náhodné číslo mezi 0 a 1. Potom provedeme několik manipulací, abychom zajistili, že rozsah tohoto náhodného čísla zůstane mezi číslicemi 0 a 255.

  • Nejprve implementujeme Math.random, vybereme libovolné náhodné číslo mezi 0 a 1, pak vynásobíme číslo 256, protože nechceme, aby číslo bylo větší než 255. Jakmile máme náhodné číslo, použijeme Math.floor a ujistěte se, že máme pouze číslici před desetinnými hodnotami (celé číslo).
  • Tato generovaná náhodná čísla přiřazujeme proměnným zvaným r, g a b. Každý z nich označuje své vlastní příslušné číslo RGB pro barevný kód.
  • Nakonec přidáme všechna tato čísla nebo proměnné do řetězce. Vracíme řetězec tak, aby to vypadalo takto: rgb (23, 45, 112).
  • Zbývá pouze spustit tuto funkci v závislosti na režimu hry a vygenerovat tři nebo šest náhodných barevných kódů RGB a přiřadit je v poli barev.

To však vrátí pouze řetězec, který vypadá jako kód RGB. Jak se to přidá do řady barev, které máme? Jak bude vybrána náhodná barva při každém spuštění nebo resetování hry?

Abychom splnili obě tyto věci, vytvoříme několik dalších funkcí a uvidíme, jak nám pomohou tento problém vyřešit.

Vyberte náhodnou barvu z pole

Za tímto účelem vytvoříme novou funkci nazvanou pickColor (). Uvidíme, jak bude funkce vypadat, a pak ji rozložíme.

funkce pickColor () {
  var random = Math.floor (Math.random () * colors.length);
  návratové barvy [náhodně];
}

Jak jednoduché to může být, podívejme se, co pro nás tyto dvě mocné linie dělají.

  • Jak jsme již viděli s kouzlem Math.random a Math.floor, stejnou funkcí získáváme náhodné číslo generované mezi 0 a délkou pole.
  • Dále získáme odpovídající kód RGB v poli barev pomocí náhodného čísla v indexu

Přidejte šest (nebo tři) náhodné kódy RGB do pole barev

K tomu používáme výše uvedené dvě funkce, kterými jsou randomColors () a pickColors (). Funkce randomColors () dělá zejména to, že provádí funkci randomColors () šestkrát nebo třikrát (v závislosti na režimu hry) a do pole barev přidává odpovídající počet barevných kódů RGB. Pojmenujeme tuto funkci createRandomColor (num *). Podívejme se, jak kód vypadá a rozdělte jej řádek po řádku.

* num bude rozhodnuto na základě režimu hry.

  • Nejprve vytvoříme jednoduché prázdné pole
  • Dále spustíme smyčku podle režimu hry
  • Při každém spuštění této smyčky se do vytvořeného pole vloží nový kód RGB
  • Nakonec vrátíme toto pole

Nyní po všech těchto nových funkcích a veškeré manipulaci s kódem se naše kódová základna pro app.js docela změnila. Uvidíme, jak to vypadá teď:

Resetovat hru

Po téměř nastavení primární logiky to může vypadat jako procházka s dortem. Jde jen o vytvoření funkce a nechání této funkce vykonávat svou práci proti jakémukoli danému vstupu uživatele (v tomto případě po kliknutí na tlačítko reset).

Vše, co chceme pomocí tlačítka reset, je

  • generovat sadu šesti náhodných barev
  • vyberte náhodnou barvu z nově vytvořeného pole barev.

Podívejme se, jak by vypadal pseudo kód:

reset funkce () {
  // vytvořit nové pole 6 náhodných barev
  // vyberte novou náhodnou barvu
  // vyplňte čtverce novou sadou generovaných barev
}

Důrazně doporučujeme psát pseudo kód při řešení složitých problémů. Tento zvyk psaní pseudo kódu mi pomohl ušetřit spoustu času, kdykoli jsem uvízl ve složitých algoritmických výzvách.

Dobře, vraťme se k našemu resetovacímu tlačítku: uvidíme, jak by vypadala skutečná funkce:

Rozdělme to řádek po řádku:

  • Začneme přidáním posluchače událostí pro tlačítko reset. Poté spustíme funkci zpětného volání, která provede spoustu věcí, když je spuštěna událost click.
  • Když je spuštěna, začneme generováním nového pole šesti náhodných barev.
  • Potom vybereme náhodnou barvu.
  • Nakonec resetujeme barvu pozadí pro všechny barevné bloky.

Takto vypadá aktualizovaná aplikace app.js po všech provedených úpravách:

Teď to vypadá docela dobře! V tomto článku nepřidávám funkčnost pro nastavení režimu, protože se to už stává velkým a nechci vás všechny nudit :). Ale pokud se vám to všechno líbilo, budu více než šťastný, když napíšu další článek týkající se zbytku.

Zde je odkaz na úložiště GitHub, kde lze najít konečný optimalizovaný kód.

Doufám, že tento článek inspiruje několik z vás, aby se dozvěděli více o manipulaci s DOM a tomto krásném jazyce JavaScriptu. Do příště!