Lær hvordan man manipulerer DOM ved at opbygge et simpelt JavaScript-farvespil

Hvad er DOM?

DOM står for Document Object Model. Det er intet andet end blokniveaudiagrammet for alle HTML-elementer, der er indlæst på siden, når en browser indlæser en webside. Det præsenteres som et træ af objekter, der er HTML-elementer. Se på billedet herunder, så får du muligvis en bedre idé.

DOM-repræsentation af en simpel .html-fil

Et dejligt rent blokdiagram over din grimme .html-fil - er ikke så god! Men nu tænker du, hvordan hjælper det mig? Hvad er brugssagen? Hvorfor skal jeg vide det?

Kort sagt giver DOM dig mulighed for at bringe dynamik til dit statiske websted. Med brug af DOM kan du gøre en masse nyttige ting på hjemmesiden som:

  • tilføjelse og sletning af HTML-elementer og attributter
  • tilføje og slette CSS-regler for en brugerfyret begivenhed
  • oprette nye begivenheder til syntetiske brugerbegivenheder

Og det er nøjagtigt, hvad du vil lære i løbet af denne artikel.

For at give dig en idé om, hvad vi vil opnå ved udgangen af ​​denne artikel, tjek dette link.

Kom godt i gang

Vi bygger et simpelt farve gætteri spil. Hver gang spillet startes, vælges en tilfældig RGB-farvekode. Afhængig af spilletilstanden har vi tre (let) eller seks (hårde) indstillinger eller farveblokke på skærmen at vælge imellem. Hver gang der vælges en forkert farveblok, forsvinder blokken, indtil brugeren vælger den rigtige farve (eller dens sidste mulighed tilbage).

Her er et groft diagram over, hvad vi ville bygge:

Dette er noget, jeg lærte, mens jeg tog et kursus fra Colt Steele, fænomenal træner, når det kommer til undervisning af basale koncepter. I skal alle tjekke hans videoer på Udemys YouTube-kanal.

Mockup-diagram

Del 1

Vi starter med at oprette en enkel web-kedelplade, som kompromitteres med index.html, app.css og app.js-filer. Lad os se, hvordan disse filer ser ud, når vi starter.

Men først skal du bemærke: bare for at holde det enkelt for alle, der læser dette uden nogen forudgående udviklingserfaring, vil jeg fortsat vise kildekoden, hver gang vi ændrer noget større.

  • index.html


 Color Game 

Den store
RGB
Farve spil


 

 Hård 

Dette er så simpelt som det bliver. Vi kan blot adskille hele websiden i tre primære blokke.

Først har vi overskriftssektionen, der har teksten og kan indeholde nogle andre oplysninger, hvis du vil tilføje den derinde.

Dernæst er kontrolpanelet, der har knapper til at nulstille spillet og skifte mellem spiltilstande.

For det tredje - og den mest interessante del - er det vigtigste spilområde, der har seks divs. Disse divs fungerer som indstillingerne for enhver tilfældig RGB-farvekode, der kan vælges ved hjælp af en smule logik (som vi vil se i et stykke tid).

  • app.css
krop {
baggrund-farve: # 232323;
margen: 0;
font-family: "Montserrat", "Avenir";
}
h1 {
tekstjustering: center;
linjehøjde: 1,1;
font-vægt: normal;
farve: hvid;
baggrund: stålblå;
margen: 0;
tekst-transformation: store bogstaver;
polstring: 20px 0;
}
#container {
margin: 20px auto;
max-bredde: 600px;
}
.square {
bredde: 30%;
baggrund: lilla;
polstring-bund: 30%;
flyde: venstre;
margen: 1,66%;
grænseradius: 15%;
overgang: baggrund 0,6s;
-webkit-overgang: baggrund 0,6s;
-moz-overgang: baggrund 0,6s;
}

Nogle grundlæggende stilarter er tilføjet til den krop, tekst og firkanter, der tjener som spilindstillingerne.

  • app.js
var numSquares = 6;
var farver = [];
var plukket farve;
var squares = document.querySelectorAll (". firkant");
var resetButton = document.querySelector ("# reset");
var modeButtons = document.querySelectorAll (".tilstand");

Vi har gemt alle HTML-elementer i form af variabler. Dette vil hjælpe os med at udføre nogle handlinger ved at tilføje begivenheder til hver af disse variabler og ved at kalde dem inde i forskellige logiske funktioner, vi vil oprette i løbet af denne artikel.

Lad os faktisk bryde hver af disse variabler ned og se, hvad deres betydning er:

  • Variablen numSquares gemmer antallet af firkanter, der vil være tilgængelige i spillet i henhold til tilstanden. For enkelhedens skyld har jeg hårdt kodet værdien til at være seks altid - vi kan vende tilbage til dette og tilføje en vis logik for at holde den ændret.
  • farver er et tomt array, der indeholder den tilfældige seks eller tre RGB-farvekode, der genereres hver gang spillet nulstilles eller tilstanden ændres.
  • PickColor er den farve / indstillingsblok, der er valgt af brugeren ved hvert klik.
  • firkanter er en matrix af alle firkanter på siden, der er tilgængelige som indstillinger. Denne matrix kan have tre eller seks elementer afhængigt af spilletilstand.
  • Nulstil-variablen er knappen "nyt spil" i kontrolpanelet.
  • modeButtons er igen en matrix, der har let og hård tilstand knapper i det.

Hvis du har fulgt op til dette punkt, skal du her have en temmelig grundlæggende version af dette spil. Du kan åbne filen index.html i enhver browser og tjekke den ud. Okay, så nu vi har bunden, skal vi komme til de alvorlige ting.

Del 2

I dette afsnit vil vi for det meste arbejde med JavaScript-filen og et par gange med CSS-filen.

Genererer tilfældige farver

Vores første mål genererer tilfældige farver, hver gang spillet startes eller genstartes, eller tilstanden ændres. Lad os se, hvordan vi kan gøre det.

For at forstå det underliggende princip om at generere noget tilfældigt, bør vi starte med en hårdkodet matrix med seks RGB-farvekoder. Lad os prøve at indstille disse farver som baggrundsfarver på de seks firkanter / indstillinger, der er tilgængelige på websiden.

var farver = [
    "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);
for (i = 0; i 
  • Jeg føjede seks statiske RGB-farvekoder til farveopstillingen
  • Jeg brugte den allerede oprettede firkantserie til at køre en løkke på tværs af alle firkanter, der findes i matrixen.
  • Jeg matchede baggrundsfarven på hvert kvadrat til dets tilsvarende indeks i farvesættet.

Hvis du tilføjer dette til app.js-filen, og du opdaterer browseren, vil du se, at hvert firkant nu er en unik farve.

* skærmbillede fra browseren

Du vil muligvis bemærke, at knapperne endnu ikke er stylet, men lad det ligge nu. Vi kommer til den del senere.

Aktivér klikfunktionalitet

Så alt, hvad vi har brug for, er begivenhedslyttere aktiveret på hver mulighed / farvebloklytting til klikbegivenheder. Den nemmeste måde at gøre det på er - igen gættede du det rigtigt - ved at løbe gennem matrixen af ​​firkanter. Denne løkke ligner den, der blev brugt til at style baggrunden på farveblokkene. Lad os se på koden:

for (i = 0; i <= firkanter. længde; i ++) {
  firkanter [i] .addeventListeners ('klik', funktion () {
    alarm ('klikk på' mulighed ');
  });
}

Hver gang du klikker på en blok vil du få denne advarsel fra browseren. Det var let! Nu er vores muligheder modtagelige, og de reagerer på brugerinput. Alt, hvad vi skal gøre nu, er at definere den logik, der fortæller, hvad der sker, hvis den farve, der er valgt af spillet, og den, der er valgt af brugeren, er den samme.

På nuværende tidspunkt har du muligvis allerede løsningen, hvis du omhyggeligt har været opmærksom på ovenstående dele. Så lad os se, hvordan vi kan gøre det.

Kontroller, om farven er korrekt eller ikke

Lad os undersøge de muligheder, vi har med vores indstillinger / farvebokse, der er modtagelige og svarer tilbage. Vi kan gennemføre en lille test og se, om de to farver stemmer overens eller ej. Meget snart har vi tilfældigt genererede farver, hver gang vi opdaterer siden, eller hver gang vi nulstiller spillet eller ændrer spiltilstanden. Men indtil videre vil vi øve os med det sæt af seks RGB-farvekoder, vi har tildelt i filen.

Lad os se på noget kode, og så vil jeg opdele den for dig.

for (i = 0; i <= firkanter. længde; i ++) {
  firkanter [i] .addeventListeners ('klik', funktion () {
    // hvis der klikkes på den rigtige blok, gør noget ....
    // hvis der klikkes på forkert blok, gør noget ....
  });
}

Som du allerede ved, bruger vi en enkel, hvis-ellers-blok.

PickColor = farver [3];

for (i = 0; i <= firkanter. længde; i ++) {
 // anvende baggrundsfarve på alle firkanter ...
 firkanter [i] .style.backgroundColor = farver [i]
   // aktiver klikhændelse på hvert firkant .....
     firkanter [i] .addEventListener ('klik', funktion () {
       // hvis brugeren valgte den rigtige farve ....
         var clickedColor = this.style.backgroundColor;
        // Kontroller, om den valgte farve matcher standardfarven ...
         if (PickColor === clickedColor) {
             changeColors (pickedColor);
           }
         // hvis brugerbrugeren valgte forkert farve ....
         ellers {
           this.style.backgroundColor = "# 232323";
           messageDisplay.text = "Forkert valg!";
         }
    })
};

Jeg ved - det er en masse kode. Men lad os se, hvad det virkelig betyder:

  • Vi begynder med at definere, hvilken standardfarve, der er valgt af spillet, med variablen valgt farve.
  • Derefter kører vi vores for loop, som lader os gå gennem matrixen af ​​farveblokke / indstillinger.
  • Derefter aktiverer vi klikbegivenheder på hver farvebock / -indstilling. Vi gør dette ved hjælp af en tilbagekaldsfunktion. Denne funktion gør intet andet end at vælge baggrundsfarve på den valgte farveblok / indstilling blot ved at tildele den til variablen kaldet clickedColour.
  • Nu har vi begge farver: den ene blev valgt af spillet og den anden af ​​brugeren. Det eneste, der er tilbage, er at matche og se, om valget var korrekt eller ej.
  • Vi kan gøre dette let ved hjælp af blokken if ellers. Hvis valget er korrekt, skal du gøre dette, eller ellers gøre noget andet
  • Hvis den rigtige farve er valgt, tilføjer vi en tekst på siden for at bekræfte det rigtige valg og tilføjer en visuel effekt for at bekræfte. Ellers matcher vi farven på den bestemte farveindstilling / -blok for at matche baggrundens farve på siden. Dette giver en effekt, som om farveblokken / indstillingen netop forsvandt.
  • Nu har du set, at hvis den samme farve er valgt, udføres en funktion. Lad os se, hvad denne funktion består af:
funktionsændring Farver (farve) {
 for (i = 0; i <= firkanter. længde; i ++) {
  firkanter [i] .style.backgroundColor = farve;
  messageDisplay.text = "Du er god til at gætte!";
 }
}

Denne funktion går gennem matrixen af ​​farveblokke / indstillinger og nulstiller baggrundsfarven til at være den for den valgte farve eller standardfarven.

I tilfælde af, at farverne ikke er ens, indstiller vi blot det aktuelle valgs baggrundsfarve til at være på websiden.

ellers {
  this.style.backgroundColor = "# 232323";
  messageDisplay.text = "Forkert valg!";
}

Okay nu, hvor vi har hovedspilsættet, skal vi bare bekymre os om minimale designproblemer og tilføje funktionaliteten i kontrolpanelet.

Men lad os først se, hvordan kodemappen ser ud på dette tidspunkt, hvis du har fulgt alle trin korrekt:

index.html

app.css

app.js

Trin 3

Alt er godt. Men nu er vi nødt til at oprette nye tilfældigt genererede RGB-farvekoder i vores spil, som ikke er det samme sæt farver, der ville blive tildelt i farveblokke / indstillinger.

Hvis det får dig til at tænke på funktioner, er det det rigtige valg. Vi opretter en ny funktion sammen med helt tilfældige (nye) farvekoder, og vi tildeler dem til farvegruppen. Derefter henter vi dem i farveblokke / valgmuligheder.

Lad os se, hvordan koden ser ud, og så gennemgår vi den linje for linje.

En indbygget metode i JavaScript hjælper os med at generere et tilfældigt tal mellem 0 og 1. Derefter foretager vi nogle manipulationer for at sikre, at området for det tilfældige tal forbliver mellem cifrene 0 og 255.

  • Først implementerer vi Math.random, vælger et vilkårligt tilfældigt tal mellem 0 og 1, ganges derefter tallet med 256, da vi ikke ønsker, at tallet skal være større end 255. Når vi først har et tilfældigt tal, bruger vi Math.floor og Sørg for, at vi kun har cifferet før decimalværdierne (et helt tal).
  • Vi tildeler disse tilfældige tal genereret til variabler kaldet r, g og b. Hver angiver sit eget respektive RGB-nummer for farvekoden.
  • Til sidst tilføjer vi alle disse tal eller variabler for at danne en streng. Vi returnerer strengen, så den ser sådan ud: rgb (23, 45, 112).
  • Det eneste, der er tilbage at gøre, er at køre denne funktion, afhængigt af spilletilstand, og generere tre eller seks tilfældige RGB-farvekoder og tildele dem i farvesættet.

Men dette vil kun returnere en streng, der ligner en RGB-kode. Hvordan tilføjes dette til den række farver, vi har? Hvordan vælges en tilfældig farve, hver gang spillet startes eller nulstilles?

For at udføre begge disse ting opretter vi et par flere funktioner og se, hvordan de hjælper os med at løse dette problem.

Vælg en tilfældig farve fra matrixen

For at gøre dette vil vi oprette en ny funktion kaldet pickColor (). Lad os se, hvordan funktionen ser ud, og så nedbryder vi den.

funktion pickColor () {
  var tilfældig = Math.floor (Math.random () * farver.længde);
  returfarver [tilfældig];
}

Så enkel som det kan få, lad os se, hvad disse to kraftfulde linjer gør for os.

  • Som vi allerede har set med magien fra Math.random og Math.floor, bruger vi den samme funktion til at få et tilfældigt tal genereret mellem 0 og længden af ​​arrayet.
  • Dernæst får vi den tilsvarende RGB-kode i farverne ved at bruge det tilfældige tal i indekset

Tilføj seks (eller tre) tilfældige RGB-koder i farvegruppen

For at gøre dette bruger vi ovenstående to funktioner, som er tilfældige farver () og pickColors (). Hvad randomColors () -funktionen især gør, er, at den kører funktionen randomColors () seks eller tre gange (afhængigt af spilletilstand) og tilføjer det tilsvarende antal RGB-farvekoder til farvegruppen. Vi vil navngive denne generatorRandomColor (num *) -funktion. Lad os se, hvordan koden ser ud, og nedbryd den linje for linje.

* num afgøres på baggrund af spillets tilstand.

  • Først laver vi en enkel tom matrix
  • Derefter kører vi en løkke i henhold til spillets tilstand
  • Hver gang denne løkke udføres, skubbes en ny RGB-kode ind i den oprettede matrix
  • Til sidst returnerer vi dette array

Efter alle disse nye funktioner og al denne kodemanipulation er vores kodebase for app.js ændret en hel del. Lad os se, hvordan det ser ud nu:

Nulstil spil

Efter næsten at have indstillet den primære logik, kan dette se ud som en kagevandring. Det handler om at oprette en funktion og lade denne funktion udføre sit job mod enhver given brugerinput (i dette tilfælde et klik på nulstillingsknappen).

Alt, hvad vi ønsker med nulstillingsknappen, er

  • generere et sæt på seks tilfældige farver
  • vælg en tilfældig farve ud af den nye oprettede farvegruppe.

Lad os se, hvordan pseudokoden ser ud:

nulstilling af funktion () {
  // oprette en ny række 6 tilfældige farver
  // vælg ny tilfældig farve
  // fyld firkanterne med et nyt sæt genererede farver
}

Jeg anbefaler kraftigt at skrive pseudokode, mens jeg løser komplekse problemer. Denne vane med at skrive pseudokode har hjulpet mig med at spare en masse tid, når jeg sidder fast på komplekse algoritmiske udfordringer.

Okay, vender tilbage til vores nulstillingsknap: lad os se, hvordan den faktiske funktion ville se ud:

Lad os bryde det ned linie for linje:

  • Vi starter med at tilføje begivenhedslytteren til nulstillingsknappen. Derefter affyrer vi en tilbagekaldsfunktion, der gør en masse ting, når klikhændelsen affyres.
  • Når det fyres, begynder vi med at generere en ny række seks tilfældige farver.
  • Derefter vælger vi en tilfældig farve.
  • Til sidst nulstiller vi baggrundsfarven for alle farveblokke.

Sådan ser den opdaterede app.js ud efter alle de ændringer, vi har foretaget:

Dette ser ret godt ud nu! Jeg tilføjer ikke funktionaliteten til opsætning af tilstanden i denne artikel, da den allerede er ved at blive for stor, og jeg vil ikke kede jer alle sammen :). Men hvis du kunne lide alt dette, vil jeg gerne skrive en anden artikel, der dækker resten.

Her er linket til GitHub-lageret, hvor den endelige optimerede kode kan findes.

Jeg håber, at denne artikel inspirerer nogle få af jer til at lære mere om DOM-manipulation og dette smukke JavaScript-sprog. Indtil næste gang!