Text och kollisionsdetektering

Hur man visar text

En textsträng är innesluten mellan citationstecken, som "Hello World!".

Du kan visa text på skärmen med kommandot:

text(<textsträng>, <x>, <y>);

Om du vill centrerar texten, så att (x, y ) är mitt i den text som visas, skriver du:

textAlign(CENTER);

Du kan själv välja hur stor texten ska vara.

textSize(<storlek>);

Du kan kombinera flera textsträngar genom att skriva + mellan dem, detta kallas för att konkatenera text. Det hade alltså gått att skriva:

text("Hello "+"World!", 100, 50);

men det hade varit poänglöst. Man kan dock kombinera textsträngar och variabler, då skrivs variabelns värde ut. Exempelvis som i följande kod:

function setup() {
  createCanvas(windowWidth, windowHeight);
  textSize(36);
}

function draw() {
  background(100);
  ellipse(mouseX, mouseY, 20, 20);
  text("x = "+mouseX, 100, 50);
  text("y = "+mouseY, 100, 100);
}

Hur man detekterar kollisioner

I det allmänna fallet är det svårt att avgöra när två objekt kolliderar. Några av de enklaste fallen är när objekten är punkter och/eller cirklar. Då kan man använda avstånd och olikheter.

Det finns ett kommando för avstånd mellan två punkter i Processing:

dist(<x1>, <y1>, <x2>, <y2>)

För att upptäcka när två cirklar kolliderar eller när en punkt kolliderar med en cirkel, använder du olikheter.

---

Programmeringsuppgift - Pricka bollen

Vi ska göra ett spel där spelaren ska pricka en slumpmässigt placerad boll. När bollen prickas ska den få en ny slumpmässig position och spelaren ska få ett poäng. Efter en viss tid är spelet slut och något slutmeddelande ska visas. Spelet går ut på att få så många poäng som möjligt.

Börja med att göra en ny sketch! Se till att bakgrunden ritas om varje gång draw-funktionen genomförs (varje gång det "tickar").

Ta tiden

Det finns en fördefinierad variabel som heter frameCount som räknas upp varje gång programmet ritar upp fönstret. På en snabb dator kan man räkna med att fönstret ritas om 60 gånger per sekund.

Lägg till koden

text(""+frameCount, 100, 150);

i draw-metoden. Lägg märke till att frameCode slås ihop med en tom textsträng. På detta vis används text istället för tal.

Bestäm själv hur tiden ska visas för spelaren.

Placera bollen

Deklarera variabler för bollens koordinater överst i programmet.

 var x, y;

Byt koden som ritar upp ellipsen så att dessa koordinater används istället för muspekarens.

Testa att slumptalsgenerera koordinaterna i draw-funktionen.

x = random(200);
y = random(200);

Hur ska koden för slumptalsgenereringen ändras så att bollen slumpas fram över hela fönstret? Ändra i koden!

Nu ska koordinaterna inte slumptalsgenereras varje gång det tickar utan bara när programmet startar. Ändra i koden!

Räkna poäng

Deklarera ännu en variabel överst i programmet, en variabel poäng. Se till att poängen är noll när programmet startar.

Visa hur många poäng spelaren har med hjälp av kommandot text i draw-funktionen.

Nu ska spelaren få en poäng varje gång bollen prickas. Börja med att lägga in koden:

function mouseClicked() {
  poäng = poäng + 1;
}

Testkör programmet!

Kolla om spelaren prickar bollen

Som koden är nu, får spelaren poäng varje gång skärmen prickas. Du ska ändra på detta så att poängen bara ökar om spelaren prickar bollen.

Börja med att deklarera en variabel avstånd som mäter avståndet mellan muspekaren och bollens mittpunkt. Eftersom variabeln bara behövs i mouseClicked-funktionen, kan man deklarera den inuti denna funktion, den blir då en så kallad lokal variabel.

function mouseClicked() {
  var avstånd;
  avstånd = dist(mouseX, mouseY, x, y);
  poäng = poäng + 1;
}

Gör en if-sats som ökar poängen om avståndet är tillräckligt kort. Använd en olikhet som villkor. Hur ska olikheten se ut?

Lägg dessutom in kod som ger bollen en ny slumpmässig position när spelaren prickar bollen.

Avsluta programmet när det gått några sekunder

Lägg in följande kod i draw-metoden:

if (frameCount == 600) {
    noLoop();
    //kod som ska utföras när spelet är slut
  }

Den inbyggda funktionen noLoop() ser till att draw-funktionen slutar ticka.

Välj själv hur länge spelet ska pågå.

Välj själv vad som ska visas när spelet är slut!