Hoe om 'n basiese JavaScript -vasvra te maak (met foto's)

Om 'n speletjie met JavaScript te maak, kan lekker en bevredigend wees, sowel as 'n bietjie raaisel. Die kode in hierdie artikel is 'n manier om 'n speletjie te maak met JavaScript. Sodra u die basiese beginsels ken, kan u dit gerus aanpas en daarmee speel.

Stappe

Deel 1 van 5: Opstel

Stap 1. Stel u programmeringsomgewing op

U benodig 'n teksbewerkingsprogram om u kode in te skryf. U kan dit in 'n notaboekdokument skryf, maar u sal waarskynlik 'n redakteur wil hê wat ontwerp is vir programmeer soos Notepad ++ (Windows), Atom (Mac) of Notepad (Linux). Enige basiese teksredakteur werk egter.

Stap 2. Skep die lêers wat u benodig

U benodig twee lêers: een in HTML wat deur die blaaier gelees word en een in JavaScript wat die spel is.

Stap 3. Stel u lêers en gidse op

Omdat u slegs twee lêers benodig, hoef u nie 'n ingewikkelde liasseringstelsel te hê nie. Solank die twee lêers op dieselfde vlak van dieselfde gids is, sal dit werk. Stoor dus albei u lêers op dieselfde plek.

• Voeg 'n.html -uitbreiding by om as html te stoor. Gebruik 'n.js -uitbreiding vir die JavaScript -lêer. Stel kode in u lêers op. Die JavaScript -lêer vereis geen opstelling nie, maar die HTML wel. Voeg die volgende kode in u HTML -dokument:

• Dit is die basiese opstelling vir byna enige bladsy in HTML.
  • definieer die kode as HTML vir die blaaier.
  • vertel die blaaier dat alles in die afdeling in HTML geskryf is, tensy anders gespesifiseer.
  • is 'n gedeelte wat inligting bevat oor die bladsy, soos die titel.
  • is die naam wat in die soekresultate verskyn en die naam op die blad.
  • koppel die JavaScript -lêer aan die HTML -lêer.
  • bevat alles wat op die bladsy sigbaar is.

Deel 2 van 5: Die skep van die veranderlikes en funksies

Stap 1. Begin met die beginfunksie

Eerstens skep u 'n funksie genaamd start. Die res van u spelkode gaan in hierdie funksie. Dit is sodat u u spel kan begin met 'n knoppie op u HTML -bladsy. Die volgende kode skep hierdie funksie:

var start = function () {}

• Hierdie kode skep 'n veranderlike (var) met die naam 'begin':
  begin
  . Hierdie veranderlike is 'n funksie.
• 'N Veranderlike is 'n sleutelwoord wat 'n bietjie data daaraan toegewys is, in hierdie geval 'n funksie.
• 'N Funksie is 'n gedeelte van die kode wat' genoem 'kan word. As dit genoem word, loop dit die kode binne die {}. Dit is sodat u nie meer as een keer dieselfde moet uitskryf nie.

Stap 2. Skep die veranderlikes

Hierdie veranderlikes sal data bevat soos: die telling, die vraag en die gebruikersinvoer. Hulle gaan binne die beginfunksie se {}.

var korrek = 0; var verkeerd = 0; var question = "none"; var input = "geen"; var antwoord = "geen";

• korrek
  : Dit is hoeveel vrae die gebruiker korrek beantwoord het.
• verkeerd
  : Dit is hoeveel vrae die gebruiker verkeerd beantwoord het.
• vraag
  : Dit is die vraag wat die gebruiker sal kry; dit sal verander vir elke nuwe vraag.
• insette
  : Dit hou die gebruiker se antwoord of hul 'insette' in.
• antwoord
  : Dit sal die korrekte antwoord op die vraag bevat.
• Let wel: as u 'n veranderlike gebruik, hoef u nie var te skryf nie; u doen dit slegs as u die veranderlike maak.

Stap 3. Kodeer die vra -funksie

Die vra -funksie stel die gebruiker die var -vraag deur 'n opdrag. 'N Aanwysing is 'n opspringvenster wat vereis dat die gebruiker sy antwoord in die kassie tik.

var ask = function () {input = prompt (vraag); };

• Vra is 'n veranderlike wat 'n funksie is.
• Die funksie stel die veranderlike invoer in op die antwoord van die opdrag wat die veranderlike vraag bevat.
• Kortom: die funksie stel die gebruiker 'n vraag in 'n opdrag. Die gebruikers se reaksie word dan ingestel op die veranderlike invoer. Invoer is dus die antwoord wat die gebruiker gestel het.

Stap 4. Kodeer die tellingfunksie

Die tellingfunksie reageer op of die gebruikersinvoer korrek is of nie. Dit reageer dan gepas.

var score = function () {if (input == answer) {correct = correct+1; waarskuwing ("korrek"); } anders {verkeerd = verkeerd+1; waarskuwing ("verkeerd"); }};

• Die veranderlike telling is 'n funksie.
• as
  die veranderlike invoer is gelyk aan die veranderlike antwoord (dit is korrek) die veranderlike stel dit gelyk aan homself plus een.
• En dit gee die gebruiker 'n
  waarskuwing
  wat lui: 'korrek'.
• anders
  die veranderlike verkeerd is gelyk aan homself plus een.
• En dit gee die gebruiker 'n
  waarskuwing
  wat lui: 'verkeerd'.
• Samevattend: hierdie funksie kyk of die gebruikersinvoer dieselfde is as die antwoord, wat beteken dat dit korrek is. As daar 'n ooreenkoms is, styg die korrekte bedrag een, en dit waarsku die gebruiker dat die antwoord korrek was. As daar nie 'n ooreenkoms was nie, styg die hoeveelheid verkeerde een, en die gebruiker word gewaarsku dat hul antwoord verkeerd was.

Stap 5. Voeg 'n funksie by om lui te bel twee ander funksies

Dit sal die volgende opskrif makliker maak.

var lui = function () {ask (); telling (); };

• Die veranderlike lui is 'n funksie.
• As dit uitgevoer word, noem dit twee funksies:
  vra ();
  en
  telling ();
  .
• Opsommend: hierdie funksie noem net twee ander funksies. Dit beteken dat as u beide 'vra' en 'telling' wil noem, u dit nie apart hoef te bel nie; jy kan maar 'lui' noem.

Deel 3 van 5: Vrae

Stap 1. Skryf 'n inleiding tot jou vasvra

Dit kan enigiets sê. Hierdie kode is 'n basiese welkom. U hoef nie welkom te wees nie, maar dit kan goed wees vir die gebruiker.

alert ("welkom by my vasvra, u sal 10 vrae beantwoord.");

Stap 2. Stel u veranderlikes 'vraag' en 'antwoord' op 'n vraag en antwoord

Die volgende kode demonstreer hoe.

question = "Wat is die matriks?"; answer = "Daar is geen lepel nie";

• Die enkel = ken die ding aan die regterkant toe aan die veranderlike aan die linkerkant. Dit beteken dat die veranderlike vraag nou die teks (string) "Wat is die matriks?" Bevat. En die veranderlike antwoord bevat die teks (string) "Daar is geen lepel nie".

Stap 3. Noem die funksie 'lui'

Hierdie funksie noem die funksies 'vra' en 'telling'.

lui();

• Die funksie 'vra' stel die gebruiker die vraag en stoor die gebruikers se insette in die veranderlike invoer. Die funksie 'telling' kontroleer of die gebruikersinvoer ooreenstem met die veranderlike antwoord en verander die veranderlikes 'korrek' en 'verkeerd' gepas.

Stap 4. Gaan voort met hierdie proses om meer vrae by te voeg

Verander eers die veranderlike 'vraag' na u nuwe vraag. Verander dan die veranderlike 'antwoord' na die korrekte antwoord op u nuwe vraag. Begin dan die funksie ask.

Stap 5. Beëindig die spel as u genoeg vrae het

Dit kan behels dat hulle hul telling vertel of die persentasie vrae wat hulle reg gekry het.

Hoeveel het hulle reggekry:

alert ("Well done, you have" + correct + "out of 10");

Deel 4 van 5: Bewerking van die webblad (HTML)

Stap 1. Maak 'n begin -knoppie om die spel te begin

Heel aan die begin het u 'n funksie met die naam 'begin' geskep. U wil die vasvra begin met die klik van 'n speelknoppie. Voeg die volgende kode by die HTML -liggaamsmerk.

• Dit voeg 'n knoppie by u bladsy met die woord 'begin' daarop. As die gebruiker daarop klik, word die funksie 'begin' uitgevoer. Hierdie funksie bevat die spelkode.

Stap 2. Voeg teks by die bladsy oor u spel

Gebruik die

tag, kan u vliegtuigteks by u webblad voeg. U kan die gebruiker waarsku dat die antwoorde hooflettergevoelig is, of u moet 'n aangename dag hê. Voel vry om by te voeg wat u wil.

Deel 5 van 5: toets en pas u spel aan

Stap 1. Toets jou spel

Werk dit soos u verwag?

Stap 2. Pas dit aan

U kan meer vrae of boodskappe byvoeg, die HTML wysig om die blad mooier te laat lyk.

Wenke

• Toets elke stukkie/gedeelte van die kode as iets nie werk nie
• Pas elke deel van die kode aan om dit te laat doen wat u wil. Die kode in hierdie artikel is slegs 'n riglyn.
• Al die HTML -etikette wat hierdie kode gebruik, maak oop en toe. 'N Sluitingsmerk word geïdentifiseer deur 'n'/'voor die teks in die etiket te hê
• Hoe meer u met die kode speel, hoe beter sal u dit verstaan
• Gebruik 'n aanlyn JavaScript -foutondersoeker