Lav dit eget spil i JavaScript (1. del)
Jeg vil i denne artikel prøve at vise hvordan man laver sit eget spil i JavaScript.
Spillet jeg vil prøve at vise hvordan man laver, er et spil der minder om snake, men det er dog uden en hale. Spillet kan findes på
http://anders.java-script.dk/snake.htm
Som i kan se på siden
http://anders.java-script.dk/ -> refference -> Snake. Kan i se en mere advanceret udgave af spillet.
Spillet kan dog kun køre i IE.
Først laver vi et sted hvor vi putter alle vores variabler ind. Det gør vi ved at lave et <script></script> i head, hvor vi putter følgende i:
/*** Variabler ***/
SlangeBillede = "billede.gif" // Hvad billede skal der bruges til slangen?
SlangeBrede = 20 // Hvor bred skal slangen være? (pixel)
SlangeHoejde = 20 // Hvor høj skal slangen være? (pixel)
SlangeBredeAntal = 20 // Hvor mange gange skal slangen kunne være på breden?
SlangeHoejdeAntal = 20 // Hvor mange gange skal slangen kunne være på breden?
Derefter skal vi have lavet en box, som slangen kan bevæge sig rundt i.
Det gør vi ved at lave et nyt <script></script>, men i <body> i stedet for <head>. Hvor vi putter følgende ind:
/*** Laver box til slangen ***/
document.writeln('<div id="box" style="position:relative; width:' + (SlangeBrede*SlangeBredeAntal) + ';')
document.writeln('height:' + (SlangeHoejde*SlangeHoejdeAntal) + '; border:1px solid black;"></div>')
Nu er det så tid til at få slangen ind, det gør vi med at lave en funktion der hedder: LavSlange()
Vi tilføjer derfor følgende i <script></script> i <head>:
/*** Funktion til at lave slangen ***/
function LavSlange() {
boxHTML = ""
boxHTML = '<div id="slange" style="position:absolute; top: 0; left: 0;'
boxHTML = boxHTML+'width: '+SlangeBrede+'; height:'+SlangeHoejde+';">'
boxHTML = boxHTML+'<img src="'+SlangeBillede+'" width="100%" height="100%"></div>'
box.innerHTML = boxHTML
}
For at få lavet slangen når man loader siden, putter vi følgende ind i body tagget:
onLoad="LavSlange();"
Nu skal vi så have slangen til at bevæge sig, det gør vi ved at sætte en timer, der hele tiden flyter slangen.
Først skal vi have lavet en variable med hvad vej slangen skal flyte sig, derfor putter vi følgende ind under variabler:
SlangeRetning = 0
Her er så fuktionen der for den til at flyte sig, som skal puttes ind i <script></script> i <head>:
/*** Funtion til at flyte slangen ***/
function FlytSlange() {
if (SlangeRetning == 0) {
slange.style.left = parseInt(slange.style.left) + SlangeBrede
}
if (SlangeRetning == 1) {
slange.style.left = parseInt(slange.style.left) - SlangeBrede
}
if (SlangeRetning == 2) {
slange.style.top = parseInt(slange.style.top) + SlangeHoejde
}
if (SlangeRetning == 3) {
slange.style.top = parseInt(slange.style.top) - SlangeHoejde
}
slangeX = parseInt(slange.style.left)
slangeY = parseInt(slange.style.top)
if (slangeY < 0 || slangeY > (SlangeHoejdeAntal*SlangeHoejde-1)) {
box.innerHTML = ''
alert("Du døde!")
} else {
if (slangeX < 0 || slangeX > (SlangeBredeAntal*SlangeBrede-1)) {
box.innerHTML = ''
alert("Du døde!")
} else {
setTimeout('FlytSlange();',150)
}
}
}
For at få den til at begynde med at flyte slangen, putter vi følgende ind i 's onClick
FlytSlange();
Tilsidst skal vi så have gjordt så man kan styre slangen med tastaturet, som også puttes ind under <script></script> i <head>:
/*** Funtion til at styre slangen ***/
function SkiftRetning() {
if (event.keyCode == "39") {
SlangeRetning = 0
}
if (event.keyCode == "37") {
SlangeRetning = 1
}
if (event.keyCode == "40") {
SlangeRetning = 2
}
if (event.keyCode == "38") {
SlangeRetning = 3
}
}
document.onkeydown = SkiftRetning
Det var så første del af min artikel om hvordan man laver et spil. Jeg håber du kan bruge dette til at få lavet dit eget spil.
Jeg håber på at få skrevet en del 2, hvor vi gør spillet lidt mere advanceret.
Dette er min første artikel, så hvis den ikke er så god, er det nok derfor:)
Kommentarer (37)
Er der nogen der har testet den?
Hvis der ikke er for mange fejl, vil jeg modificere koden lidt.
Måske kan det blive til bangbang eller Invaders?
Den virker! Artiklen måtte godt være lidt mere beskrivende
Glæder mig til anden halvdel kommer
Citat:
"For at få den til at begynde med at flyte slangen, putter vi følgende ind i 's onClick:
FlytSlange();"
citat slut
Hvad for noget med onclick?
Jeg vil meget gerne lære at lave bare et spil som snake men kan du ikke lige forklare det lidt bedre så sådan en som mig også kan forstå det tak..
jeg er selv igang med at afprøve det men jeg kan ikke finde ud af at indsætte slangen???
altså jeg har boxen men hvorfor virker scriptet til at få den ind ikke...... hvad gør jeg galt
skriv svaret til min mail (hvis du nu lige kigger på din gamle artikel)
glemt lige at skrive min mail hehe...
footballfreak@ofir.dk
hmm
/*** Funtion til at styre slangen ***/
function SkiftRetning() {
if (event.keyCode == "39") {
SlangeRetning = 0
}
if (event.keyCode == "37") {
SlangeRetning = 1
}
if (event.keyCode == "40") {
SlangeRetning = 2
}
if (event.keyCode == "38") {
SlangeRetning = 3
}
}
document.onkeydown = SkiftRetning............................................................................if (event.keyCode == "37") { betyder 37 en kode for en bestem knap hvis den gør hvad er koden så for alle andre knappet f.esk hvis jeg vil bruge space til noget...?
Har fået det til at virke, men hvordan styrer man slangen?? Den reagerer jo ikke på nogle af tasterne ..
Har fået det til at virke, men hvordan styrer man slangen?? Den reagerer jo ikke på nogle af tasterne ..
Ups, kom lige til at opdatere
Forklaringen er ikke
tydelig, men du har fået mig til at kappere, hvad det handler om. 3/5
Heeej... Jeg er ny herinde og vil gerne igang hvordan kommer jeg til at prøve og lave mit eget spil..
Heeej... Jeg er ny herinde og vil gerne igang hvordan kommer jeg til at prøve og lave mit eget spil..
jeg ved ikke hvordan man kommer til at lave et spil
.... mangler hjælp
hej... jeg vil meget gerne prøve at lave mit eget spil.. Der er bare det problem at jeg ved ikke hvordan. kan i hjælpe mig med det ?
hej.
sorry kom til at skrive her og ikk på msn..
skal man bruge en hjemmeside
hvordan gør man det????
hvordan gør man det????
hvad skal man bruge for at gøre det
hvad skal man bruge for at gøre det
hvad skal man gøre? jeg er ny
hej
hvis i så gerne vil lave et spil og det skal være lidt nemmere så downlod game maker det finder i på www.yoyoames.com og så klik make og derefter på game maker 7
og til sidst download
hej med jer
hvad sker der lige for spam i kommentar i denne artikel s:
ojojo min tissemand er blå
Linket til siden virker ikke... Dette er endnu en grund til ikke at inkludere links som 'dokumentation', men inkludere kildekode i en zip fil!
Du skal være
logget ind for at skrive en kommentar.