I sidste nummer planlagde vi spillet, opbyggede boldtræ og hoppende bold. Og ud fra den spacer, som vi netop nåede at definere, er vi nu parate til at fylde murstenene op:

Function draw(row,colour) { for (j=0 ; j<8 ; ++j) {
document.getElementByld(”b”+row+j).style.color=colour document.getElementById(‘b’+row+j).style.bachgroundColour=colour;document.getElementById(‘b’+row+j).innerHTML=spacer;}} draw(0,”green”); draw(1,”blue); draw(2,”orange); draw(3,”purple); draw(4,”lightblue);

Funktionen “draw()” bruges til at fylde alle de SPAN’er, som vi lavede i begyndelsen. Funktionen tager de to parametre ”row” og ”colour” og indstiller forgrunds- og baggrundsfarverne for alle murstenene i en række til den farve. Den knytter også indholdet af spaceren til hver enkelt. De fem kald til funktionen opretter hver række i grøn, blå, orange, purpur og lyseblå.

Nu er spillet næsten parat. Vi skal blot bruge noget kode til at acceptere tastaturinput og lave animationen:

document.onkeydown=function(e){ { if (msie) key=event.keyCode; else key=e.keyCode; if (key == 37 && batx > 11) batx-=10; else if (key == 39 && batx < 591) batx+=10; }

Det ovennævnte kodesegment hægter sig på “key down”-eventen og leder efter de tal, 37 og 39, der står for venstre og højre markørtaster (Explorer kræver en lidt anden syntaks, det var derfor, vi lavede msie-variablen tidligere).

Hvis man trykker på tast 37 (venstre markør), tjekker koden, om boldtræet kan flytte længere til venstre. Hvis det er tilfældet, skifter variablen batx. Boldtræet bliver flyttet til den position i hovedkoden lidt senere. Den højre markør bliver også tjekket, og boldtræet flyttet om nødvendigt. Vi bruger spring på 10 pixel her. Det tal kan man ændre, afhængig af hvor manøvredygtigt, man vi have boldtræet til at være.

Husk, at ikke alle browsere er ens. Opera returnerer kun en enkelt event for et tastetryk ved at bruge ”onkeydown” i stedet for at fortsætte ned at returnere dem, hvis tasten forbliver nedtrykket. Det ordner man ved at indsætte et tjek for Opera og erstatte onkeydown med ”onkeypress”.

Den centrale spilengine

Nu kommer vi til den kode, der laver hovedparten af arbejdet med at bevæge bolden, lade den bumpe fra boldtræet og murene og flytte de mursten, den møder. Denne sektion er delt op i to segmenter:

function play() { if (ballx > 10 && ballx < 630) { brickx=parseInt((ballx-10)/78); if (bally > 42 && bally < 142) { bricky=parseInt((bally-42)/20); if (!bricks[bricky][brickx]) { bricks[bricky][brickx]=1; ballyd=-ballyd; document.getElementById(‘b’+bric ky+brickx).style.color=’white’;document.getElementById(‘b’+bric ky+brickx).style.backgroundColor=’white’; }}}

Funktionen “play” er der, det sker. Lad os gennemgå en linje ad gangen. Det første, der sker, er en kontrol af, om bolden er inden for murstensrækkens venstre og højre grænser. Hvis den ikke er det, går eksekveringen videre til det næste kodesegment.

Ellers bliver det tjekket, om bolden ligger inden for murstensrækkens øvre og nedre grænser. Hvis den ikke gør det, går eksekveringen videre. Men hvis den gør det, er der måske en mursten, som den er på vej til at ramme. Både ”brickx” og ”bricky” skal nu sættes til tal, der henviser til denne mursten i den todimensionale opstilling, ”bricks()”, som vi lavede tidligere.

Det første, vi skal gøre, er at se, om opstillingens værdi stadig er på nul. Er den ikke det, går eksekveringen videre til næste sektion. Ellers er murstenene stadig på plads, og vi har ramt. Det betyder, at vi skal sætte den position i opstillingen til værdien 1 for at angive, at murstenen nu er fjernet. Så skifter vi boldens bevægelses lodrette retning ved at gør ballyd lig med –ballyd.

Til sidst skal vi fjerne murstenen fra skærmen ved at sætte både dens farve og bagrundsfarve til hvid.

Så kommer vi til den kode, der ser efter slag med boldtræet og lader bolden hoppe tilbage på spilområdet:

if (bally > 422 && bally < 430 && ballx > batx-5 && ballx <= batx+50) ballyd=-3; else if (bally > 475) { ballx=rand(100,500); bally=rand(200,300); batx=291; } ballx+=ballxd; if (ballx >= 628 || ballx < 9) ballxd=-ballxd; bally+=ballyd; if (bally < 9) ballyd=-ballyd; document.getElementById(‘ball’). style.left=ballx+’px’; document.getElementById(‘ball’). style.top=bally+’px’; document.getElementById(‘bat’). style.left=batx+’px’; } setInterval(‘play()’,20); </SCRIPT>

Den første linje i dette segment ser efter, om boldens lodrette position er mellem 422 og 430. Det vil betyde, at den kunne være inden for boldtræets rækkevidde. Den ser også efter. Om bolden er inden for boldtræets venstre og højre grænser. Hvis det alt sammen holder, skal boldens lodrette bevægelsesretning sættes til –3 for st sikre, at den begynder at flyve tilbage op langs skærmen, når den rammer boldtræet.

Hvis det ikke er tilfældet, bliver boldens lodrette position tjekket for at se, om den i stedet er røget om bag boldtræet. Hvis det er tilfældet, bliver boldens placering sat til nye vilkårlige værdier, og boldtræet bliver igen centreret. Det er her, man kan indsætte en tæller for ”antal liv” og afslutte spillet, hvis alle livene er gået tabt.

Så bliver boldens X- og Y-bevægelsesretninger føjet til dens X- og Y-placeringer, og spillets øvre, venstre og højre grænser bliver tjekket for at se, om en af bevægelsesretningerne skal vendes, så bolden kan hoppe. Det holder bolden i spil inden for grænserne.

I denne funktion bliver boldens og boldtræets placeringer sat til det, som de aktuelle værdier for de variabler, der definerer dem, indeholder. Nu tryller den næstsidste linje i dette segment med JavaScript. Den beder browseren afbryde det, den gør, og overlade eksekveringen til koden i funktionen play() hvert 20. millisekund. Hvis man vil gøre spillet langsommere, skal man øge det til 100 millisekunder. Hvis det skal være hurtigere, reducerer man tallet.

Den sidste linje lukker simpelthen SCRIPT-taggen, og programmet er færdigt. Når man spiller denne version, får man et ubegrænset antal liv. Tryk ”Refresh” for at begynde forfra, når alle murstenene er blevet ramt.

Sådan skal du gøre...

Gør spillet færdigt eller lav dit eget

På grund af pladsmangel mangler der nogle få ting i dette projekt, herunder registrering og visning af scoren, registrering og nedtælling af antallet af liv, skift til sværere og hurtigere niveauer og så videre.

Man kunne for eksempel tænke sig at bruge varierende X- og Y-trin i stedet for +3 og –3, som bliver understøttet af denne version. Det vil give i alt 36 forskellige bevægelsesretninger. Hvordan man skifter mellem dem afhænger af bed tjek??? af kollisioner, så man ved at ramme boldtræet kan kan sende bolden tilbage i forskellige retninger mod midten.

Tetris er endnu et spil, der burde være relativt nemt at lave med JavaScript.

Man kan også bestemme, hvor en mursten er blevet ramt og lade bolden hoppe i overensstemmelse med de data. Når man begiver sig op på niveauerne, kan man have hurtigere og/eller langsommere hastighed for boldtræ og bold, og man kan øge eller reducere boldtræets størrelse.

Endelig kan man indføre specielle mursten, der udløser godbidder, som man skal fange med boldtræet for at få specielle point.