Jeg vil da lige dele de sidste 45 minutters "arbejde" med jer. Både kode og artikel er noget jeg har skrevet lige nu, så det ser sikkert ikke særlig prof ud.
Anyhow, hvis der er spørgsmål eller rettelser, kan de jo lige så godt komme med det samme, så der ikke kommer flere med samme spørgsmål...
Wassup! Her kommer super artiklen om, hvordan du laver dit eget lille spil i
Javascript!
Du har programmeret Javascript før!(Eller kan i det mindste finde ud af at læse det) Og du kender også CSS!
Hvis ikke, så kan du lige så godt skippe artiklen..
Spillet! Det kommer til at være
super simpelt! Ja, du gættede rigtigt: Vi skal lave
ping pong.
Åben din favorit editor, og gør dig klar på at lære en hel masse, hvis aldrig har lavet dit eget ping pong spil før..
Lad os starte - og NEJ ikke med kode. Først opsummeres der kort, hvad der skal laves:
- En bane/ramme.
- To ping-pong'ere. (Hvad hedder de egentlig?? - Det er dem som er ude i siden)
- En bold.
- Et scoreboard til mål.
- En "tråd" som holder spillet i gang.
Fair nok! Vi er jo allerede i gang. En ping-ponger laves som et <div> med en hvid baggrund, og en rød/blå kant. Bolden er firkantet og helt hvid. Selve rammen er også en div - bare med sort baggrund.
Så kommer koden endelig:
<html>
<head>
<title>The wild ping pong game!</title>
<script>
var field, pingponger1, pingponger2, ball;
function init() {
//init function.
createField();
createPingPongers();
createBall();
}
function createField() {
}
function createPingPongers() {
}
function createBall() {
}
</script>
</head>
<body onload="init();">
</body>
</html>
Hvis du ikke kan læse og forstå koden ovenover, så er artiklen ikke for dig. (Eller også har jeg bare lavet en mega bummert..)
Som du nok kan se bliver alt skrevet på engelsk og med "den grimme kodestil".. (Det er utroligt så mange vaner der kan ændres på arbejdet.)
Vi skal selvfølgelig også lidt videre. Vi skal have udfyldt funktionerne createField, createPingPongers og createBall. Derfor gør vi brug af funktionen: document.createElement(tagName); og indsætter den med document.body.appendChild(objekt);
Banen kommer til at være helt sort og være 500x300, i en position (50,50). Derfor laver vi følgende kode:
function createField() {
field = document.createElement("div");
field.style.zIndex = '1';
field.style.position = 'absolute';
field.style.left = '50px';
field.style.top = '50px';
field.style.width = '500px';
field.style.height = '300px';
field.style.backgroundColor = 'black';
document.body.appendChild(field);
}
Lad os da lige se, hvad der sker
field.style.position = 'absolute'; Sætter css's position til absolute.
field.style.left, field.style.top, osv. gør cirka det samme, og så er det bare at læse lidt engelsk for at forstå hele koden. (Note zIndex=z-index er hvilken placering elementet har. Hvis den har en lav z-index ligger den bag alle elementer med en højere z-index)
field = document.createElement("div");
Er lidt mere spændende. Den opretter et <div>-element, men placerer det ikke nogen steder! Det betyder at vi bare har det i vores Javascript-kode og kan placere det med appendChild.
document.body.appendChild(field);
Her lægges field-objektet, som vi oprettede før, ind i body-tagget. (Alt der kan ses ligger indefor <body>-tagget) Det betyder simpelt hen bare at vi nu faktisk kan se vores bane. Wow, hvor sejt!!
Læg funktionen ind i html-filen, og nyd synet inden du går videre..
Nu gør vi det samme med pingpong'erne, og bolden. Vi bestemmer at bolden er 10x10 og pingpong'erne 10x70. Desuden skal pingpong'erne være 10px fra kanten, og ellers i midten af banen. Bolden skal være lige i midten.
Farverne er således: Alle tre er hvide, men pingpong'erne har en kant. (Til venstre rød og til højre blå)
Bemærk at vi sætter z-index til 10.
Note: Vi skal huske at sætte ball.style.fontSize = '1px'; Ellers vi boldens font automatisk udvide bolden og gøre den aflang, hvis den er højere end 10px.
Hvis du bare vil have det hurtige svar, så er det her: (Ellers skal jeg nok vente på dig
)
function createPingPongers() {
pingponger1 = document.createElement("div");
pingponger1.style.zIndex = '10';
pingponger1.style.position = 'absolute';
pingponger1.style.left = '60px';
pingponger1.style.top = '165px';
pingponger1.style.width = '10px';
pingponger1.style.height = '70px';
pingponger1.style.backgroundColor = 'white';
pingponger1.style.border = 'red 1px solid';
document.body.appendChild(pingponger1);
pingponger2 = document.createElement("div");
pingponger2.style.zIndex = '10';
pingponger2.style.position = 'absolute';
pingponger2.style.left = '530px';
pingponger2.style.top = '165px';
pingponger2.style.width = '10px';
pingponger2.style.height = '70px';
pingponger2.style.backgroundColor = 'white';
pingponger2.style.border = 'blue 1px solid';
document.body.appendChild(pingponger2);
}
function createBall() {
ball = document.createElement("div");
ball.style.zIndex = '10';
ball.style.position = 'absolute';
ball.style.left = '300px';
ball.style.top = '200px';
ball.style.width = '10px';
ball.style.height = '10px';
ball.style.backgroundColor = 'white';
ball.style.fontSize = '1px';
document.body.appendChild(ball);
}
Juhuu! Første del er overstået, og nu kommer vi til det sjove.
Anden del er at registrere tastetryk!
Det betyder at vi gerne vil registrere hvornår vi trykker ned og op. Det gør vi ved at tilføje to nye funktioner keyup(e) og keydown(e), samt at tilføje dette til init() funktionen:
if(window.addEventListener) { //Gecko
window.addEventListener("keydown", keydown, false);
window.addEventListener("keyup", keyup, false);
} else if(window.attachEvent) { //IE
window.attachEvent("onkeydown", keydown);
window.attachEvent("onkeyup", keyup);
} else { //??
window.onkeydown = keydown;
window.onkeydown = keyup;
}
SLUT indtil videre.
Kode:
<html>
<head>
<title>The wild ping pong game!</title>
<script>
var field, pingponger1, pingponger2, ball;
function init() {
//init function.
createField();
createPingPongers();
createBall();
if(window.addEventListener) { //Gecko
window.addEventListener("keydown", keydown, false);
window.addEventListener("keyup", keyup, false);
} else if(window.attachEvent) { //IE
window.attachEvent("onkeydown", keydown);
window.attachEvent("onkeyup", keyup);
} else { //??
window.onkeydown = keydown;
window.onkeydown = keyup;
}
}
function createField() {
field = document.createElement("div");
field.style.zIndex = '1';
field.style.position = 'absolute';
field.style.left = '50px';
field.style.top = '50px';
field.style.width = '500px';
field.style.height = '300px';
field.style.backgroundColor = 'black';
document.body.appendChild(field);
}
function createPingPongers() {
pingponger1 = document.createElement("div");
pingponger1.style.zIndex = '10';
pingponger1.style.position = 'absolute';
pingponger1.style.left = '60px';
pingponger1.style.top = '165px';
pingponger1.style.width = '10px';
pingponger1.style.height = '70px';
pingponger1.style.backgroundColor = 'white';
pingponger1.style.border = 'red 1px solid';
document.body.appendChild(pingponger1);
pingponger2 = document.createElement("div");
pingponger2.style.zIndex = '10';
pingponger2.style.position = 'absolute';
pingponger2.style.left = '530px';
pingponger2.style.top = '165px';
pingponger2.style.width = '10px';
pingponger2.style.height = '70px';
pingponger2.style.backgroundColor = 'white';
pingponger2.style.border = 'blue 1px solid';
document.body.appendChild(pingponger2);
}
function createBall() {
ball = document.createElement("div");
ball.style.zIndex = '10';
ball.style.position = 'absolute';
ball.style.left = '300px';
ball.style.top = '200px';
ball.style.width = '10px';
ball.style.height = '10px';
ball.style.backgroundColor = 'white';
ball.style.fontSize = '1px';
document.body.appendChild(ball);
}
function keyup(e) {
}
function keydown(e) {
}
</script>
</head>
<body onload="init();">
</body>
</html>