Lav dit eget spil i javascript! (Ping Pong)
|
Spillet som vi skal lave i denne artikkel virker kun i IE eller IE baserede browsere. For at få spillet til at virke i andre browseren, læs "Update" nederst i artiklen. Velkommen til I denne artikkel vil jeg lære dig at lave dit eget lille spil i javascript! Det spil vi skal lave er en simpel udgave af den gamle klassikker Ping Pong! Denne artikkel kræver at du ved noget om javascript, ikke så meget alle de forskellige kommandoer for de vil alligevel blive forklaret i denne artikkel, men det kræver at du har forståelse for sproget, ellers vil du ikke fatte hvad det er der sker. Det første vi skal finde ud af er hvordan vi skal lave vores spil. Vi skal allerførst lave vores bane, og det gør vi med ganske almindeligt css.
Jeg går ud fra at du kan det mest basale CSS, så vil ikke sige mere om det der. Nu skal vi så finde ud af hvilke elementer vi skal have i vores spil, vi skal have en bold og vi skal have et bat. Dem laver vi i CSS ligesom banen :)
Nu er vi kommet over den kedelige opsætning, nu skal vi igang med at lave javascript ;) Som sagt skal vi bruge 2 elementer; en bold og et bat. Så vi skal have oprettet en variabel til hver, som vi kan hente frem og manipulere med senere i scriptet. Følgende skal sættes ind i body lige efter <body.
Nu skal vi til at putte noget i vores variabler som vi kan manipulere med senere, til det skal vi bruge en funktion som sætter variablerne lig med noget.
Allerførst har du måske lagt mærke til at jeg har sat self.focus() ind i scriptet, og det gør jeg udelukkende for at sætte vinduet i fokus. Hvis man f.eks kører spillet i et iframe, kan man godt resikere at focus ikke er i iframet og så virker spillet ikke, men det sørger vi for ikke sker. Så har du lagt mærke til noget nyt: document.getElementById("element") Det betyder at vi henter informationerne fra et element ved hjælp af elementets id. Og de informationer giver vi så til variabler bat og bold. For at resumere op hvad vi har lavet indtil videre, viser jeg lige scriptet som det ser ud indtil videre.
Jeg har tilføjet noget i koden, <body onLoad="start();"> som betyder at når siden er loadet færdig vil den starte funktionen start(). Som gør at scriptet virker :) Nu skal vi igang med at lave funktionen til at flytte vores bat med piletasterne. Det skal vi gøre med kommandoen event.keyCode. Alle tasterne på dit keyboard har en bestemt kode i JavaScript, og dem vi skal bruge er 37 & 39 som er henholdsvis; venstre og højre piletast. Nu skriver jeg funktionen flytbat() og lidt forklaring kommer bagefter.
Det der sker i denne funktion er at der bliver tjekket om knappen "37"(venstre) er trykket ned. Hvis det er sandt så skal vi have scriptet til at udføre noget. Det vi gør er at vi siger "bat.style.left" som betyder: bat = Det element vi skal bruge (som vi har defineret i funktionen start). style = Vi vil gøre noget med elementets style. left = Den del af elementets style vi vil bruge er tagget; left. Så er der kommet en ny funktion ind i scriptet; parseInt(), som gør det at den omdanner et tal til en anden type tal (int) som JavaScript kan arbejde med. Så vi laver battets style.left om til et tal som javascript kan arbejde med og trækker 10 fra det. Det betyder at vores bat har flyttet sig 10 pixels til venstre. ( Det modsatte sker hvis man trykker højre piletast ned ). Nu har vi lavet funktionen til at flytte vores bat, men hvordan får vi fat i funktionen? Det gør vi ved at tilføje dette lille stykke kode til vores start() funktion lige efter self.focus().
Nu burde du kunne flytte dit bat med piletasterne, hvis det ikke virker er det fordi du har skrevet forkert af, så jeg viser lige hele koden, som den ser ud indtil videre. (Det er testet!)
Så fik du leget lidt med det går jeg ud fra ;) Men nu er det jo sådan at ping pong ikke er særligt skægt hvis bolden ikke flytter sig, så det skal vi igang med nu. Allerførst skal vi tilføje nogle flere variabler i toppen af scriptet
horisontal skal vi bruge til at bevæge bolden vandret og vertikal skal vi bruge til at bevæge den lodret. Nu skal vi give vores nye variabler boldleft og boldright nogle værdier. boldleft skal have væredien af boldens venstre kants placering, og boldright den højre side.
Nu skal vi igang med at flytte bolden vandret. Det gør vi ved at tjekke boldens placering, hvis den er ude ved venstre kant, skal vi sende den mod højre. Og er den ude ved højre kant skal vi sende den mod venstre.
Som sagt tjekker vi først om bold.style.left er nul eller derunder, hvis det er sandt skal vi sætte horisontal til right(højre), og omvendt. Så tjekker vi så om horisontal er lig med venstre, hvis det er sandt skal vi sende bolde 10 pixels længere væk fra venstre kant, og omvendt. Hvis du nu sidder og siger "Det virker ikke, den flytter sig kun et felt!" så har du fuldstændigt ret, for vi har nemlig ikke sat den til at loppe endnu, men det kan vi hurtigt gøre ved at sætte dette ned i bunden af vores start() funktion.
( 1000 = 1 sek ). Hvis du er lige i tvivl om nogen af de forskellige elementer her i vores spil indtil videre, kan du lige få dem alle sammen her:
Se det er meget sjovt :) Men nu skal vi have bolden til at køre lodret også. Det gør vi meget nemt ved at "vende" vores allerede programmerede "if"er" om. Jeg vil ikke forklare så meget hvad der sker nu, for det er samme koncept som før.
Se det er da meget sjovt at sidde og kigge på den bold der flagrer rundt der, men det sjovere hvis man kan bruge sit bat til andet end bare at flytte det. Så det skal vi til nu, igen skal vi tilføje mere til vores start() funktion:) Det vi skal til at gøre nu er; - Tjekke om bolden kommer ned i bunden. - Hvis den er nede i bunden, skal vi tjekke om battet er inde under det. - Hvis battet er inde under skal vi sende bolden opad. - Hvis battet ikke er inde under, skal vi generere en "ny" bold. Det lyder måske meget svært men det er faktisk ikke spor indviklet. Men allerførst skal vi lige tilføje nogle nye variabler. Dette indsættes ved de andre variabler:
Den første trækker vi 10 fra, og hvorfor gør vi det? Det er fordi at bold.style.left regner fra den venstre kant af bolden, men hvad så hvis man rammer med bolden på dens højre kant ;) Den næste lægger vi 100 til, det er fordi at battet er 100px bred, og igen er bat.style.left battets venstre kant. Nu skal vi igang med at tjekke om bolden "rammer" battet når den kommer ned i bunden. Det gør vi med endnu en "if" inde i den "if" som tjekker om bolden er nede i bunden. Så vores if(boldtop>=480){.. skal ændres til følgende.
Første tjekker vi om bolden er inden for battets venstre og højre kant, hvis den er sender vi bolde opad. Hvis den ikke er inden for så gør vi...... Ja nu gik du lige i stå? ;) Bare rolig jeg forklarer hvad der sker nu :) Math.random() er en javascript funktion som genererer et filfældigt tal mellem 1 og 0. Det kan vi forhøje ved at gange det med et tal. F.eks giver Math.random()*100 et tilfældigt tal mellem 0 og 100. Så ved at siger bold.style.left = Math.random()*680 giver vi bolden en tilfældig placering horisontal, og ved at sige Og bagefter sætter vi bold.style.stop til nul, så den kommer op i toppen igen. Så er vi næsten færdige med vores nye spil, men med hvad vi har lært indtil videre kan vi faktisk gøre vores spil endnu bedre, vi kan nemlig sørge for at vores bat ikke kan forlade banen. Det gør vi ved at tjekke battets højre og venstre kan som vi har i variablerne batleft og batright er inden for kanterne. Hvis de er skal vi flytte battet eller skal vi ikke. Så vores funktion flytbat() kommer til at se sådan her ud:
Hvis du i løbet af denne artikkel har tabt tråden selvom jeg har prøvet at forklare det så godt som muligt kommer her den færdige kode som er testet. Og hele koden er samlet af brudstykkerne her fra artiklen.
Det var alt for denne gang, jeg håber du kunne bruge min artikkel til noget og samtidig lærte noget om javascript. Du må meget gerne kommentere artiklen, så jeg ved om jeg skal skrive flere eller om jeg skal blive langt væk. Du skal føle dig velkommen til at spørge i forumet hvis du skal have hjælpt til scriptet, eller hjælp til udvidelse i form af pointtæller osv. Du skal helst ikke skrive en privat besked eller i min gæstebog, da de andre brugere ikke vil kunne få udbytte af det vi skriver om der. Hilsen Andreas (Webstuff) Update: For at få spillet til at virke i andre browsere end IE, udskift flytbat() funktionen med denne: (12/02 - 06)
Sidst redigeret 13:18 - 21/09/2006 |
|
Kommentarer
Giv din mening tilkende om denne artikel, eller læs andres.Har du spørgsmål eller brug for hjælp til denne artikel henvises du til forummet.
| Hehe.. Jeg har ikke lige fået gjort det da jeg er ude at rejse, men hvorfor copy/paste"er i ikke bare det sidste kode eksempel, der har jeg samlet hele koden til spillet.. |
Oprettet af:
|
| Sejt vidste ikke man kunne lave online spil uden flash eller java? |
Oprettet af:
|
| Mega god artikel |
Oprettet af:
|
| Super artikel! :D |
Oprettet af:
|
| __ak. En artikel er ikke god hvis den er lang, man kan godt forkorte teksten ned. |
Oprettet af:
|
| Øhm. det virker ik rigtigt? der er 1 bat, og battet kan ikke rykke sig? =) |
Oprettet af:
|
Side af 2