chrillemeter
voigtan
Roosweb
LP_MAXINerdroid - JavaScript baserat rymdspel DEL 2
För att kunna jobba med denna artikel så måste du läsa DEL 1 först.
Information
I förra artikeln gick vi igenom grunderna för spelet, i denna artikel kommer vi att gå mer in på funktionerna som kommer att skapa och styra spelet. Häng med.
Jag vill bara påminna dig om att mycket av hur mycket du uppfattar av denna artikel är upp till dig. Du måste ju ha goda kunskaper inom JS för att förstå händelserna. Jag kommer att förklara vad som händer, men inte superdetaljerat, för denna artikel är inte menad för nybörjare.
Funktion 0 - getStyleObject()
Denna funktion hämtar helt enkelt den valda diven och dess stil (style):
Varför kallar jag denna funktion för Funktion 0? Jo, för jag är helt enkelt en nördig människa =). Den första positionen i en array är ju 0 eller hur? Då så... =)
//Function that gets the given object
function getStyleObject(objectId)
{
// cross-browser funktion för att hämta objektet stilmall
if(document.getElementById && document.getElementById(objectId))
{
// W3C DOM
return document.getElementById(objectId).style;
}
else if (document.all && document.all(objectId))
{
// MSIE 4 DOM
return document.all(objectId).style;
}
else if (document.layers && document.layers[objectId])
{
// NN 4 DOM..
return document.layers[objectId];
}
else
{
return false;
}
}
Funktion 1 - moveDiv()
Denna funktion kommer att röra på skeppet när man klickar på pil upp eller ned.
//Move the mothership
function moveDiv(direction)
{
// hämta style-sheet på skeppet
var the_style = getStyleObject('motherShip');
if(the_style)
{
// gå till nästa position i arrayen
if(direction == "down")
{
array_position = array_position + 1;
}
else if(direction == "up")
{
array_position = array_position - 1;
}
// om vi paserat slutet på arrayen, börja
// då på position 0
if (array_position >= the_coords.length) {
array_position = 1;
}
else if(array_position <= 0)
{
array_position = the_coords.length-1;
}
// omvänd "100" till den övre positionen (top position)
// element: left och top värdena (positions)
var top = the_coords[array_position];
var left = 5;
// nu, definera värdet på top och left ordentligt
if (!document.layers)
{
left = left + "px";
top = top + "px";
}
the_style.left = left;
the_style.top = top;
// och ropa på moveDiv() igen, med det nya värdet/positionen i arrayen
the_timeout = setTimeout('moveDiv("'+direction+'")',10);
}
}
Det koden gör helt enkelt är att den kontrollerar ifall knapptrycket (direction) är down eller up och minskar eller ökar värdet på skeppets position. Alltså om man trycker nedåt och skeppet har positionen 100 så kommer den att minskas var 0,010 sekund med 1. Och tvärtom om det är uppåt.
Hur vi vet ifall man trycker upp eller ned? Det får man genom parametern som skickas in i funktionen, direction. Mer om det läser du nedan. Den parametern skickas från funktionen controlEvent().
Funktion 2 - moveGoal()
Denna funktion kommer att röra på monstret som vi byggt. Skillnaden mellan denna funktion och funktion 1 är att vi har mer bestämda värden för var monstret ska visas i förhållande till spelplanens övre kant.
function moveGoal(topPosition)
{
// hämta monstrets style-sheet
var the_style = getStyleObject('goal');
//Byt bakgrundsbilden till standard bilden på monstret
the_style.backgroundImage = 'url(monster.gif)';
//Gör DIVEN synlig
the_style.visibility = 'visible';
if(the_style)
{
// ändra "120:100" till en array av två
// element: left och top positionerna
var top = topPosition;
var left = 475;
// nu, ange left och top
// egenskaperna/positionerna ordentligt
if (!document.layers)
{
left = left + "px";
top = top + "px";
}
the_style.left = left;
the_style.top = top;
// och kalla på moveGoal() igen, med den nya positionen för arrayen
//men först, slumpa ett nummer för en ny position
the_timeout = setTimeout('moveGoal(' + generateNumber() + ')',10000);
}
}
Som du ser så har vi en ny funktion att skapa, generateNumber(), den ska generera ett nytt nummer till en ny position för monstret.
Funktion 3 - generateNumber()
Denna funktion genererar ett slumpat nummer för en ny position för monstret.
function generateNumber()
{
var generator = Math.random()*(390-50);
generator = Math.round(50+generator);
return generator;
}
Svårare än så är det faktiskt inte :)
Funktion 4 - moreBulletsInAir()
Denna funktion ska helt enkelt öka antalet skott i luften när man skjuter, men bara om antalet skott i luften inte har redan nått maxgränsen (intBulletsInAirAllowed) :
function moreBulletsInAir()
{
if(intBulletsInAir < intBulletsInAirAllowed)
{
intBulletsInAir = intBulletsInAir + 1;
intPoints = intPoints - 1;
document.getElementById('points').innerHTML = 'Poäng: '+intPoints+' | Skott i luften: ' + intBulletsInAir + ' / ' + intBulletsInAirAllowed;
}
}
Funktion - 5 - restoreBullet()
Denna funktion kommer att återställa ett skott som vi redan skjutit iväd och som redan nått sitt mål. Målet kan antingen vara monstret eller väggen bakom. Alltså när skottet har gjort sitt, så ska den återställas så man kan använda det igen.
function restoreBullet(intName)
{
var styleName = getStyleObject(name[intName]);
var new_left = 5;
var new_top = 18;
if (!document.layers)
{
styleName.left = new_left + "px";
styleName.top = new_top + "px";
}
styleName.left = new_left;
styleName.top = new_top;
//Minska antalet skott i luften med 1
if(intBulletsInAir >= 0)
{
intBulletsInAir = intBulletsInAir - 1;
document.getElementById('points').innerHTML = 'Poäng: '+intPoints+' | Skott i luften: '+intBulletsInAir+'/'+intBulletsInAirAllowed;
//document.getElementById('linkShoot').style.visibility='visible';
}
}
Funktion 6 - shoot()
Precis som det låter, så ska vi bygga nu funktionen som ska skjuta iväg skottet när vi trycker på pil höger.
function shoot(topBullet,intName)
{
// hämta style-sheet (stilmallen)
var styleName = "style_"+name[intName];
var styleName = getStyleObject(name[intName]);
if(styleName)
{
var newName = "variable_"+name[intName];
// hämta nuvarande koordinater och lägg till 3
var current_left = parseInt(styleName.left);
var new_left = current_left + 3;
document.getElementById(name[intName]).style.visibility = 'visible';
// ange den vänstra egenskapen av DIVen (left), lägg till px på slutet
if (!document.layers)
{
styleName.left = new_left + "px";
styleName.top = topBullet + "px";
}
styleName.left = new_left;
styleName.top = topBullet;
//Kontrollera ifall skottet har träffat sitt mål
var new_goal = getStyleObject('goal');
var goal_top = parseInt(new_goal.top);
var goal_top_min = goal_top - 10;
var goal_top_max = goal_top + 10;
if((new_left >= 490) && ((topBullet > goal_top_min) && (topBullet < goal_top_max)))
{
intPoints = intPoints + intReward;
document.getElementById('points').innerHTML = 'Poäng: '+intPoints;
//Om monstret har träffats, ändra bild till monster2.gif
var the_style = getStyleObject('goal');
the_style.backgroundImage = 'url(monster2.gif)';
setTimeout('moveGoal(' + generateNumber() + ')',1000);
}
// Om målet inte är nått än, fortsätt att röra på skottet åt höger
if (new_left < 490)
{
newName = setTimeout('shoot('+topBullet+',"'+intName+'");',10);
}
else
{
document.getElementById(name[intName]).style.visibility = 'hidden';
restoreBullet(intName);
}
}
}
Denna kod är lite komplicerad, så jag ska försöka förklara så tydligt som möjligt vad den gör.
När vi skjuter så kommer funktionen att hämta koordinaterna för skottet (name[intName]) och göra skottet synligt. Sedan kommer funktionen att öka på värdet på den vänstra koordinaterna hela tiden så att DIVen/skottet rör på sig åt höger hela tiden.
Samtidigt som den rör sig så sker en kontroll som ska kolla ifall skottet har nått slutet av banan eller ifall den har träffat monstret.
Den kontrollerar ifall monstret är träffat genom att jämföra koordinaterna på skottets nuvarandr position med monstrets nuvarandr position. Självklart har jag lagt en marginal på 10 pixlar åt vardera håll, detta gör att kulan har en träffmarginal på 20 pixlar, vilket ska motsvara monstrets storlek (höjd).
Funktion 7 - controlEvent(e)
Denna funktion kommer att kontrollera vilka knappar man trycker på för att sedan skicka vidare kommandon till andra funktioner som vi kommer att skapa sen. Jag kommer inte att kommentera koden så mycket eftersom jag utgår från att du förstår det grundläggande inom JavaScript. Okey? Koden är ganska enkel.
function controlEvent(e)
{
//Om man klickar på Enter så ska spelet startas och skeppet röras nedåt
if(e.keyCode == 13)
{
the_timeout=setTimeout('moveDiv("down");',100);
moveGoal(120);
return false;
}
//Om man klickar på pil-uppåt
else if(e.keyCode == 38)
{
clearTimeout(the_timeout);
if(direction != "up")
{
moveDiv("up")
}
}
//Om man klickar på pil nedåt
else if(e.keyCode == 40)
{
clearTimeout(the_timeout);
if(!direction != "down")
{
moveDiv("down")
}
}
//Om man klickar på pil-höger så ska den skjuta ett skott
else if((e.keyCode == 39) && (intBulletsInAir < intBulletsInAirAllowed))
{
the_timeout2=setTimeout('shoot('+document.getElementById('motherShip').style.top.replace('px','') +',Math.round((Math.random()*name.length)));',100);
moreBulletsInAir();
return false;
}
//Om man klickar på pil-vänster så så siktet visas
else if(e.keyCode == 37)
{
if(document.getElementById('aimbot').style.visibility=='hidden')
{
document.getElementById('aimbot').style.visibility='visible';
aimBotOn = 1;
}
else
{
document.getElementById('aimbot').style.visibility='hidden';
aimBotOn = 0;
}
}
}
Nu ska jag försöka förklara ovanstående kod lite snabbt.
De föregående funktionerna vi byggt upp kommer att anropas vid respektive knapptryck. Det som jag behöver förklara är att när man trycker ned höger-pilknappen så sker multipla kontroller. Först kontrolleras knapptrycket och sedan kontrolleras att antalet skott i luften inte överstiger det maximalt tillåtna.
När skottet skjuts så hämtas positionen/koordinaten för moderskeppet och sedan tas px (pixlar) bort från det värdet för att sedan skickas iväg till shoot() där skottet kommer att behandlas. Efter det ökar antalet skott i luften (moreBulletsInAir()).
När man klickar på pil-vänster så ska helt enkelt siktet visas på spelplanen. Siktet består av en röd linje som rör sig parallellt och vertikalt med skeppet.
Sista koden
Det sista du behöver göra är att lägga till detta på onkeydown i body:
<body onkeydown="controlEvent(event);">Kom ihåg att JS-koden ska ligga i head och inte i body.
Resultat
Vill du se hur det hela blev? Klicka här för att se resultetet.
Du kan högerklicka på sidan och visa källa för att se hur det hela ser ut kodmässigt.
Slutord
Jag vet att detta är mycket att ta in på en och samma gång, men ge det tid.
Syftet med dessa artiklar är att ge dig en bild på vad vad som är möjligt att göra med så enkla funktioner. Det ser mycket och svårt ut men om man tänker efter så har vi jobbat med följande bara:
- Vi har hämtat en DIVS positioner
- Vi har hämtat en anna divs positioner
- Vi jämförde båda positionernaoch fick resultat
- Vi har även lärt oss att röra på en div genom + och -
Det svåra är just tänkandet. Så länge du kan dessa grundläggande kunskaperna så kan du göra väldigt mycket.
Lycka till!
Skapades: 2007-11-28 15:17:23
Skribent: Shadi
Lästs 957 gånger
Betyg: 10 (artikeln har endast 2 röster, det krävs minst 5 för ett betyg)