Game Lab (code.org) – cheat sheet

Sprites, draw-løkken, kollisioner, input og grupper · JavaScript-mode

Game Lab er JavaScript med spil-funktioner ovenpå. Alt fra JavaScript cheat sheet'et (variable, lister, funktioner) virker også her. Hvert eksempel står alene.

1. Draw-løkken: spillets puls

// Køres automatisk ca. 30 gange i sekundet
function draw() {
  background("skyblue"); // ryd skærmen
  // ... alt spil-logik her ...
  drawSprites();         // tegn alle sprites
}
Vigtigste forskel fra App Lab: Ingen events! draw() kører i en uendelig løkke. Alt (bevægelse, kollision, input-tjek) skal ligge i draw, og du skal altid rydde med background() først og kalde drawSprites() sidst.

Banen er 400×400 pixels: World.width = 400, World.height = 400. World.frameRate = billeder/sekund (ca. 30), World.seconds = sekunder siden start.

2. Opret sprites

var spiller = createSprite(200, 200); // x, y
spiller.setAnimation("rumskib");      // fra Animation-fanen
spiller.scale = 0.5;                  // halv størrelse
spiller.visible = false;              // skjul

// Tegn en firkant selv uden animation:
var mur = createSprite(50, 300);
mur.width = 100;
mur.height = 20;
mur.shapeColor = "gray";

Animationer laves i Animation-fanen (upload eller tegn). Skal et sprite bare være en kasse, sæt width/height og shapeColor i stedet.

3. Bevægelse: hastighed og retning

// Sæt fart – Game Lab flytter selv spritet
spiller.velocityX = 4;    // højre (negativ = venstre)
spiller.velocityY = -3;   // op (negativ = op!)

bold.setVelocity(5, 2);           // begge på én gang
bold.rotationSpeed = 5;           // drej løbende

// Stop: farten ligger i y
bold.setVelocity(0, 0);

Husk: y-aksen peger nedad – velocityY = -3 flytter opad, og +3 nedad. Sæt farten én gang, ikke hver frame; Game Lab flytter spritet selv i hver draw-cyklus.

4. Input: tastatur og mus

function draw() {
  background("white");

  if (keyDown("right")) spiller.x += 4;
  if (keyDown("left"))  spiller.x -= 4;
  if (keyWentDown("space")) {       // én gang pr. tryk
    playSound("sound://skyd.mp3");
  }

  // Mus
  spiller.x = World.mouseX;
  spiller.y = World.mouseY;

  drawSprites();
}

keyDown er sand hele tiden tasten holdes nede (bevægelse). keyWentDown er kun sand i én frame pr. tryk (skyd, hop). Taster: "up" "down" "left" "right" "space" og bogstaver "a".."z".

5. Kollision: fire måder

// 1. Tjek om de rører (sand/falsk)
if (spiller.isTouching(mønt)) {
  point++;
  mønt.destroy();
}

// 2. Fysik: bloker gennemtrængning
spiller.collide(mur);

// 3. Prel afbage
bold.bounce(vægge);

// 4. Overlap uden fysik (kan gå igennem)
fjende.overlap(spiller, ramt);

isTouching = spørg om røring. collide = kan ikke gå igennem. bounce = prel af. overlap = detekter uden fysik, med valgfri callback. Vælg efter hvad spillet skal føles som.

6. Grupper: mange ens sprites

var mønter = createGroup();
for (var i = 0; i < 10; i++) {
  var m = createSprite(randomNumber(0, 400),
                       randomNumber(0, 400));
  m.setAnimation("mønt");
  mønter.add(m);
}

// Kollision for HELE gruppen på én gang:
spiller.overlap(mønter, function(spil, mønt) {
  mønt.destroy();  // fjern kun den ramte
  point++;
});

Grupper gør, at du kan kollidere mod 10 (eller 100) mønter uden én if-sætning pr. mønt. Callbacken får den enkelte sprite som parameter – kald destroy() på den, ikke hele gruppen. Brug også gruppe.setVelocityEach(2) osv.

7. Score, tid og game over

var point = 0;

function draw() {
  background("black");

  // Score øverst
  fill("white");
  textSize(20);
  text("Point: " + point, 20, 30);
  text("Tid: " + World.seconds, 300, 30);

  // Game over efter 30 sekunder
  if (World.seconds >= 30) {
    textAlign(CENTER);
    textSize(40);
    text("GAME OVER", 200, 200);
    noLoop = true; // se faldgruber!
  }

  drawSprites();
}

8. Kanter, kamera og baggrund

createEdgeSprites();      // usynlige vægge i kanterne
bold.bounceOff(edges);    // prel af kanterne

// Rul verden, ikke spilleren:
camera.x = spiller.x;     // kamera følger spiller

// Baggrund der bevæger sig (parallax):
sky.velocityX = -1;       // langsommere end spiller

camera.x/y flytter hele verdenen – bruges til scrollende levels. camera.off() slår det fra igen.

9. Tegn selv på canvas

function draw() {
  background(240);

  fill("red");              // fyldfarve
  stroke("black");          // stregfarve
  strokeWeight(3);
  rect(50, 50, 100, 80);    // x, y, bredde, højde
  ellipse(200, 100, 60);    // cirkel/ellipse

  noFill();
  line(0, 0, 400, 400);     // diagonal streg

  drawSprites();
}

10. Lyd og tale

playSound("sound://category_explosion/boom.mp3");
playSound("musik.mp3", true);   // true = loop
stopSound();                    // stop alle lyde

playSpeech("Game over", "male", "da-DK");

11. Hurtig oversigt

createSprite(x, y)ny sprite på positionen setAnimation(navn)sæt udseende fra Animation-fanen drawSprites()tegn alle sprites (sidst i draw) background(farve)ryd skærmen (først i draw) velocityX / velocityYfart; negativ y = opad keyDown(tast)holdes tasten nede? keyWentDown(tast)ét tryk (én frame) isTouching(s)rører de hinanden? collide / bouncefysik-blokering / prel overlap(s, f)detekter + kald f ved ram createGroup()samling af ens sprites destroy()fjern spritet for altid World.secondssekunder siden spilstart text(tekst, x, y)skriv på canvas

12. Typiske faldgruber