Game Lab
studio.code.org
Embedded Files
Link til værktøj: Game Lab.
Kaldes Spil Laboratoriet på dansk.Resources (online kurser)
Sample projects (simple eksempler)
Video library
detaljerede beskrivelser af kommandoer
Worked examples (forløb Reklamespil):
Små eksempler:
Start, play, end game (skabelon)
Video med inspiration:
Inspiration fra projekter diverse projekter (code.org):
PacMan (ca. 500 linjer kode)
Koordinatsystem
Koordinatsystem
Introduktionsvideoer
Introduktionsvideoer
Intro 1: https://youtu.be/PXn9gKiKKFo
Intro 2: https://youtu.be/QLabeWhw_O0
Varible: https://youtu.be/G41G_PEWFjE
Sprites: https://youtu.be/aUHzpGt9nso
Animation med sprites: https://youtu.be/G666sFzAg5g
Animation Tab: https://youtu.be/DQPruYTJ0Fk - at tegne en sprite
Draw Loop: https://youtu.be/G6QJeuHhqCM
Betingelser 1: https://youtu.be/_j9nvYKaOVE
Betingelser 2: https://youtu.be/6m6FFUJsOzo
Sprite hastighed: https://youtu.be/zcP94yMYqrI
Introduktionsopgaver
Introduktionsopgaver
Opgave 1
Forberedelse: se evt. videoer Intro 1, Intro 2 og Variable ovenfor.
Se video youtu.be/UfJezar1Csk (Sol går ned)
Lav programmet i Game Lab, evt. samtidig med du ser videoen.
Tilføj en if-else-blok, som skifter himlens farve til sort når solen er gået ned.
Se evt. video Betingelser 2 oven for.
Opgave 2
Forberedelse: se evt. videoer Sprites, Animation med spites og Animation Tab ovenfor.
Se video youtu.be/FcXKII75Aws (Robot kan flyttes)
Lav programmet i Game Lab, evt. samtidig med du ser videoen.
Tilføj op og ned knapper.
Tilføj flere ting:
Se evt. videoer Draw Loop og Sprite Hastighed ovenfor.
Udvid robot med ekstra frame (under Animation, f.eks. et billede, som peger den anden vej).
Brug kommandoerne pause og setFrame til at "vende" robotten når der trykkes på knapperne.Tilføj en ny sprite - en fugl - som flyver tilfældigt rundt
Brug fugl.x, fugl.y eller fugl.velocityX og fugl.velocityY, sammen med randomNumber (se video Draw Loop ovenfor).Ekstra: Lav to baggrunde. En bag solen og en foran solen, og måske en forgrund foran robotten.
Ekstra: Lav landskab som passerer forbi, ved hjælp af camera-funktionen.
Find selv på ekstra opgaver.
Opgave 3
Se video youtu.be/14bGW8ggDjQ (Pong spil)
Lav programmet i Game Lab, evt. samtidig med du ser videoen.
Forslag til tilføjelser:
Indsæt (efter bold.scale) blokken bold.setCollider("circle"), og se hvad der sker.
Stop bolden hvis den kommer under battet.
Tilføj en ekstra bold. De to bolde skal også "bounce" mod hinanden.
Flyt bat op og ned.
Ideer
Ideer
// Tryk 'space' og sæt hastighed 'op':
if (keyDown("space")) {
ant.velocityY = -10;
}
// Når sprite er midt på skærm sæt
// hastighed 'ned':
if (ant.y<200) {
ant.velocityY = 6;
}
// Når sprite er nederst, sæt hastighed
// til nul, og sæt højden:
if (ant.y>300) {
ant.VelocityY = 0;
ant.y = 300;
}
Struktur på spil
Velkomst, selve spillet og afslutning.
Variablen gamestate bestemmer hvor vi er i spillet.
Hvis der er en figur, som forsvinde efter lidt tid, så tilføjen en ekstra værdi til gamestate, og vent mens det sker. Se evt. video med Timer øverst på siden.
var gamestate = "start";
function draw() {
if (gamestate=="start"){
// hvad sker der i starten?
if ( ... ) {
gamestate = "play";
}
} else if (gamestate=="play") {
// hvad sker der i spillet?
if ( ... ) {
gamestate = "end";
}
} else if (gamestate=="end"){
// hvordan afsluttes?
// ...
}
}
Vigtige elementer
Små bidder kode, som kan anvendes i spillet.
// sprite og billede
var player = createSprite(200, 200);
player.setAnimation("dog");
// bevægelse, styre med knapper
if(keyDown("left")){
player.x = player.x - 3;
}
// Kollision
if(player.isTouching(goal)){
score = score + 1;
}
// Vise score på skærm
text("Score: " + score, 20, 20);
Klik med mus på sprite
Det første eksempel vil aktivere i hvert draw-loop, så spriten skal flyttes for at det stopper.
Det andet eksempel vil præcis aktivere én gang.
// klik på sprite
if (mousePressedOver(mySprite)) {
...
}
// klik én gang på sprite
if (mouseWentDown("leftButton") && mouseIsOver(mySprite)) {
...
}
Page updated
Report abuse