(Foto: Computerworld)

Skriv et spil med CSS - del 1

Lav dine egne animerede spil blot med HTML, CSS og JavaScript.

3. december 2009 kl. 11.17

Af Redaktionen, Alt om Data

Denne artikel er oprindeligt bragt på Alt om Data. Computerworld overtog i november 2022 Alt om Data. Du kan læse mere om overtagelsen her.

Når man taler om at lave animerede websites eller udvikle onlinespil, tænker de fleste umiddelbart på Flash, Java eller det nyere Microsoft Silverlight – men der er andre muligheder, man kan overveje. JavaScript er faktisk et temmelig stærkt programmeringssprog. Kombineret med HTML og CSS kan det klare særdeles hurtig grafikmanipulation.

I gamle dage inden for spildesign var noget af det første, man skulle lave, en sprite handler, og spillets succes afhang ofte af ens beherskelse af håndkodede assembly-sprog. Men moderne browsere klarer det hele for en.

Med CSS kan man helt skræddersy placering og udseende for stort set alle HTML-elementer, som om de var sprites. Når man tilføjer noget JavaScript, kan man flytte, fordreje, ændre størrelse og manipulere dem i realtid. Desuden er JavaScript event-styret: Det at fange musehandlinger, samtidig med at man flytter rundt med grafiske elementer, er lige så enkelt som at hooke ind i en eksisterende eventhandler.

Man behøver heller ikke at vide en masse om JavaScript for at bruge det på denne måde. En lille mængde funktioner er alt, hvad man behøver, for at lave klassikere som Pong eller, som i denne guide, Breakout.

Indstil parametrene

Vi vælger vilkårligt dimensionen 651x497 til spillet, for disse tal passer godt til de skridtstørrelser, der gælder for boldtræ og bold, og de ligger rimeligt tæt på VGA-opløsningen på 640x480 pixel. Dette er den indledende kode:

<html><head><title>Breakout</title></head> <body style=”margin:0px;”> <table border=10 cellpadding=0 cellspacing=0 width=651 height=497> <tr><td valign=top>

Først bliver der dannet en HTML-overskrift: ”Breakout”. Dernæst bliver browserens indre grænser nulstillet ved hjælp af CSS’ ”margin”-statement, så vi kan arbejde med absolutte X- og Y-koordinater fra browserens øverste venstre hjørne. Så bliver der oprettet en tabel, der får den ønskede bredde og højde (her er det 651x497 pixel) med en grænse på ti pixel.

Så skal vi lave murstenene. Det gør vi ved at bruge et par <br>-tags til at flytte et par linjer ned, hvorefter vi indstiller alt fremtidigt output til at blive centreret og vist i Verdana:

<br><br><center><font face=Verdana> <SCRIPT> for (y=0 ; y<5 ; ++y) { for (x=0 ; x<8 ; ++x) document.write(‘<SPAN id=b’+y+x+’></span> ’); document.write(‘<br>’); } </SCRIPT>

Så burger vi en stump JavaScript til at lave fire rækker med otte mursten mellem to løkker. Hver af de 40 outputstrenge antager formen <SPAN id=b00></SPAN> ”, hvor ”b00” bliver erstattet af ”b01”, ”b02”, ”b03” og så videre op til ”b47”. Det er nødvendigt for, at SPAN kan blive tilgået og tænde og slukke for de enkelte murstens visning.

Denne kode skaber alle de 40 SPANs, men den definere ikke deres indhold, farver og så videre. Den del af SPAN’ens oprettelse bliver færdiggjort af en funktion lidt senere. Enhederne ” ” bruges til at sikre, at der er et mellemrum mellem hver mursten.

Nu skal vi spille bold

Nu er tiden inde til at opbygge spillets boldtræ og hoppende bold. Man bruger simpelthen den følgende kode til at oprette DIV’er, der indeholder bolden og boldtræet:

Det store ”O” bliver brugt som bold, mens boldtræets størrelse er defineret af en række på syv bindestreger. Ved hjælp af CSS bliver begge disse elementer sat til absolutte positioner, så de nemt kan flyttes rundt på skærmen, idet man begynder fra øverste venstre hjørne. Bolden skal ikke have nogen farve, for den er allerede sort, men boldtræets forgrunds- og baggrundsfarver bliver begge sat til rød med CSS. Det betyder, at man ikke kan se bindestregerne, og det er netop meningen.

Nu har vi defineret mursten, boldtræ og bold, og tiden er inde til at gå til det centrale JavaScript, hvor vores variabler er sat op:

<SCRIPT> ballx=rand(100,500); bally=rand(200,300); ballxd=3; ballyd=3; batx=291; document.getElementById(‘bat’). style.top=’440px’; spacer=’nnnnnnn’; bricks=new Array(5); for (j=0 ; j<5 ; ++j) bricks[j]=new Array(8); msie=navigator.appVersion. indexOf(“MSIE”) > 0; function rand(min,max) { return Math.floor(Math. random()*(max-min+1))+min; }

Et <SCRIPT>-tag bruges til at tvinge de følgende linjer til at bliver oversat, hvorefter variablerne ”ballx” og ”bally” bliver sat til vilkårlige værdier mellem 100 og 500, og henholdsvis 200 og 300 pixel fra øverste venstre hjørne. Så bliver anvisningerne for boldens bevægelser defineret i ”ballxd” og ”ballyd”. Når vi vil have bolden til at bevæge sig, føjer vi simpelthen ballxd til ballx og så videre.

Når vi skal vende boldens vandrette retning, skal vi blot gøre ballxd lig med ”-ballxd”, og tilføjelsen af disse to variabler fortsætter med at virke uden modifikation. Boldtræets X-position bliver så centreret via variablen ”batx”.

Så skal vi finde selve boldtræet 440 pixel nede ad skærmen og derefter oprette en spacer til murstenene. Ud fra en skriftstørrelse på 3 og skrifttypen Verdana giver strengen ”nnnnnnn” akkurat den rigtige bredde til murstenene. Frygt ikke; Strengen kan ikke ses, for forgrundsfarven bliver sat til baggrunden senere.

Nu bliver en todimensional opstilling på fem rækker og otte kolonner defineret ved, at man først opretter en opstilling med fem elementer og derefter knytter hvert af disse elementer til en anden opstilling med otte elementer. Denne opstilling bliver brugt til at tjekke, om en mursten allerede er blevet slået i spil, eller om den er blevet fjernet fra spillet.

Derefter ser vi, om den browser, som spillet kører i, er Microsoft Explorer. Hvis det er tilfældet, skal variablen ”msie” sættes til true, Der er forskel på de måder, Microsoft og de fleste andres browsere håndterer JavaScript, og vi skal bruge denne variabel senere.

Til sidst, i kodesegmentet, ser man funktionen ”rand()”. Denne funktion er blevet defineret for at gøre det nemt at oprette vilkårlige tal mellem to værdier, som det bliver brugt af den anden linje i segmentet.

I næste nummer skal vi fylde murstenene op med indholdet af den spacer, vi lige har defineret. Og så skal vi have lavet den kode, der får spillet i bevægelse.

Spiludviklerne har fundet på mange måder, når det gælder om at bruge enkel scripting til at lave komplette onlinespil. Et af de berømteste er DHTKL Lemmings (www.elizium.nu/scripts/lemmings), der sender de grønhårede fyre ud på deres selvmordstogt uden behov for download. I nyere tid er trylleordet ”Canvas”, og især en applikation bruger dets begrænsede tegneværktøjer til at lave enkle skydespil (www.abrahamjoffe.com.au/ben/canvascape).

Andre spil kan spilles på mere hardcore sites som CSSPlay (www.cssplay.co.uk). Disse spil fremhæver problemet med disse teknologier til noget, der er så langt fra deres oprindelige formål. Et labyrintspil bliver for eksempel meget nemmere, når man holder museknappen nede for at forhindre, at koden ser dig løbe ind i væggene.

[themepacific_accordion]
[themepacific_accordion_section title="Fakta"]