Hvordan lage nettbasert HTML Games
Mange nettleserbaserte dataspill funnet på nettet er opprettet ved hjelp av Adobe Flash, en dyr proprietære utviklingsmiljøet tilgjengelig nesten utelukkende til fagfolk. Heldigvis finnes det et alternativ til Flash som gjør at tilfeldige brukere til å lage nettleserbaserte spill uten kostnad. Du kan lage dynamiske og unike nettleserbaserte spill ved å bygge Javascript-kode i vanlige HTML-nettsider.
Bruksanvisning
Bruker Input
1 Bruk HTML-skjemaelementer for å lage enkle brukergrensesnitt for spillet ditt. Du kan lage knapper, tekstfelt, avmerkingsbokser, menyer og radioknapper i et HTML-skjema (se referanser 1, avsnitt 17.4.1). For eksempel følgende 10 linjer med HTML gjengi et enkelt grensesnitt for å samle en spillers navn:
<Html>
<Body>
Gratulerer, du har satt en ny rekord!
<Form name = "hsform">
Vennligst skriv inn navnet ditt:
<Input type = "text" name = "hsname">
<Input type = "button" value = "Send">
</ Form>
</ Body>
</ Html>
2 Se i HTML-skjemaelementer i innebygd Javascript-kode ved hjelp av Document Object Model (se referanser 2, kapittel 8). For eksempel, følgende Javascript-funksjonen henter spillerens navn fra tekstfeltet opprettet i trinn 1. Sett denne koden i mellom første og andre linje i koden fra trinn 1.
<Head>
<Script language = "Javascript">
funksjon svar ()
{
alert ( "Takk," + document.hsform.hsname.value);
}
</ Script>
</ Head>
3 Ring Javascript-funksjoner som svar på brukerhandling i en form ved hjelp av spesielle egenskapene til <input> koder. For eksempel, for å gjøre "Send" -knappen opprettet i trinn 1 kaller Javascript-funksjonen lagt i trinn 2, endre knappen HTML-kode til følgende:
<Input type = "button" value = "Send" onclick = "svar ()">
4 Bruk denne koden, en modifisert eksempel fra The Javascript Source, for å bestemme koordinatene til brukerens musepekeren i nettleservinduet (se referanser 3):
<Script language = "Javascript">
Var coords = new Array (2);
Var IE = document.all sant? false;
if (! IE) document.captureEvents (Event.MOUSEMOVE)
document.onmousemove = updateCoords;
Var tempX = 0;
Var tempY = 0;
funksjons updateCoords (e) {
if (IE) {// ta tak i xy pos.s hvis nettleseren er IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else {// ta tak i xy pos.s hvis nettleseren er NS
tempX = e.pageX;
tempY = e.pageY;
}
}
funksjons getCoords ()
{
Coords [0] = tempX;
Coords [1] = tempY;
tilbake coords;
}
</ Script>
Tilbakemelding
5 Bruk skjemaelementer for å gi tilbakemelding til brukeren så vel som å motta innspill. For eksempel bruker følgende linje med Javascript-kode skriving element opprettes i "User Input" for tekstlig utgang:
document.hsform.hsname.value = "Takk for å spille!"
6 Skjule og vise bilder eller andre elementer i HTML-dokumenter ved å referere til sin stil i DOM, som i dette eksempelet siden tilpasset fra Goodmans "Javascript og DHTML Cookbook" (se referanser 2, side 361):
<Html>
<Head>
<Script language = "Javascript">
funksjon ONOFF ()
{
. Var tilstand = document.getElementById ( "image") style.visibility;
if (state == "skjult")
{
state = "synlig";
}ellers{
state = "skjult";
}
. Document.getElementById ( "image") style.visibility = tilstand;
}
</ Script>
</ Head>
<Body>
<Img id = "image">
<Form> <input type = "button" value = "On / Off" onclick = "ONOFF ()"> </ form>
</ Body>
</ Html>
7 Manipulere mange andre elementer i nettleservinduet med DOM referanser i Javascript-kode. For eksempel kan du endre størrelsen på rammer, føre til at siden for å bla, endre bakgrunnsfargen, og vise varsel dialoger som sett i "User Input" seksjonen. Se Resources for en liste over kodeeksempler som viser bred bred innflytelse du kan hevde over en brukers nettleser med Javascript.
8 Bruk DOM referanser, spesielle Javascript timing mekanismer, og CSS stilegenskapene til jevnt animere bilder eller andre HTML-dokument over nettleservinduet. Bytt <script> </ script> blokk i eksempelkode fra trinn 2 med følgende for å lage en enkel animasjon, som er tilpasset fra Javascript og DHTML Cookbook (se referanser 2, side 417):
<Style>
img {position: absolute; top: 100px; venstre: 0px;}
</ Style>
<Script language = "Javascript">
Var imgX = 0, flytte;
funksjon ONOFF ()
{
move = setInterval (animere, 100);
}
funksjon animere ()
{
. Document.getElementById ( "image") style.left = imgX + 'px';
imgX = imgX + 10;
if (imgX> 500) {clearInterval (flytte);}
}
</ Script>
Motor
9 Forene input og output funksjoner i Javascript-koden med en hovedfunksjon som styrer gjennomføringen av spillet.
10 Automatisk kjøre din viktigste funksjon så snart siden lastes ved hjelp av følgende Javascript linjen plassert rett etter din viktigste funksjon i <script> </ script> block:
window.onload = mainFunctionName;
11 Bruk alert () -funksjonen i Javascript for å hjelpe deg med å feilsøke spillet som du oppretter den. Bare plassere forskjellige alarmer på ulike punkter i koden din, og deretter åpne siden og spore utførelsen av rekkefølgen av varslene. Man kan også vise nyttig avlusings data i hver varselvindu, slik som verdien av en sløyfeteller eller en annen variabel.
12 Publisere HTML-dokumentet og eventuelle bilder til en nettside, og invitere folk til å spille spillet, ingen Flash plug-in påkrevd.
Hint
- Vær oppmerksom på de ulike typer av DOM referanser som brukes i disse eksemplene, og ofte teste din kode med flere nettlesere for å sikre kompatibilitet, som DOM standarder ikke er implementert på samme måte i alle nettlesere (se referanser 2, side 107).