taralino

Luftballons platzen

Mache dich zunächst mit dem nachfolgenden Quellcode vertraut. Es sind bereits einige Befehle und Funktionen vorhanden, die als Grundlage für ein kleines Spiel dienen.
Erweitere den Quellcode, sodass sich nicht nur ein, sondern mehrere Kreise auf der Zeichenfläche bewegen.
Berücksichtige, dass auf alle Kreise geklickt werden kann. Falls auf ein Kreis geklickt wird, sollen für diesen zufällig neue Werte vergeben werden.
Überarbeite die grafische Darstellung: Zeichne einen Hintergrund und stelle die Kreise zum Beispiel als Luftballons dar.
Führe einen Zähler ein, um die Anzahl der zerplatzen Luftballons zu zählen.
Lasse deiner Kreativität freien Lauf und erweitere das Spiel nach Belieben.

Quellcode

Der Code kann neu ausgeführt werden, indem auf Vorschau geklickt wird.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

/*
Deklaration globaler Luftballon-Variablen
*/

var Lx = 0; // x-Position
var Ly = 0; // y-Position
var Lr = 0; // Radius
var Lvx = 0; // Geschwindigkeit in x-Richtung
var Lvy = 0; // Geschwindigkeit in y-Richtung


/*
Die Funktion abstand bestimmt den Abstand zwischen zwei
Punkten (x1,y1) und (x2,y2) und gibt diesen zurueck
*/

function abstand(x1, y1, x2, y2) {
  return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
};


/*
Der Befehl neuer_luftballon erzeugt einen neuen Luftballon,
generiert also zufaellige Werte fuer die Luftballon-Variablen
*/

function neuer_luftballon() {
  Lx = random(20, 80);
  Ly = random(-20, -10);
  Lr = random(4, 6);
  Lvx = random(-0.1 ,0.1);
  Lvy = random(0.3, 0.6);
};


/*
Der Befehl setup wird beim Start des Programms genau
einmal automatisch aufgerufen und ausgefuehrt.
*/

function setup() {
  Canvas.init([0,100], [0,60], {width:640, background:"lightgrey"});
  neuer_luftballon();
  Animation.init({fps:60});
};


/*
Der Befehl loop wird automatisch immer und immer wieder
aufgerufen und ausgefuehrt (etwa 60 mal pro Sekunde).
*/

function loop() {
  // Bewegungen des Luftballons
  Lx = Lx + Lvx;
  Ly = Ly + Lvy;
  if (Ly > 100) {
    neuer_luftballon();
  }
  // Darstellung
  Canvas.clear();
  Canvas.text(50, 30, "Klicke auf den Luftballon.");
  Canvas.circle(Lx, Ly, Lr, {fill:"red"});
};


/*
Der Befehl on_mouse_down wird genau dann ausgefuehrt, wenn
auf die Canvas-Zeichenflaeche geklickt wird. Die Argumente
x und y beschreiben dabei die Position des Mauszeigers.
*/

function on_mouse_down(x, y) {
  if (abstand(x, y, Lx, Ly) < Lr) {
    neuer_luftballon();
  }
};


</script>
</body>
</html>

Vorschau Download Kopie speichern

Beispiel

Veranschaulichung einer möglichen Lösung der Aufgabe.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

/*
Deklaration globaler Luftballon-Variablen
*/

var n = 10;
var L = [];
for (var i = 0; i < n; i = i+1) L.push([0,0,0,0,0,0]);
var c = 0;

/*
Die Funktion abstand bestimmt den Abstand zwischen zwei
Punkten (x1,y1) und (x2,y2) und gibt diesen zurueck
*/

function abstand(x1, y1, x2, y2) {
  return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
};


/*
Der Befehl neuer_luftballon erzeugt einen neuen Luftballon,
generiert also zufaellige Werte fuer die Luftballon-Variablen
*/

function neuer_luftballon(i) {
  L[i][0] = random(10, 90); // x-Position
  L[i][1] = random(-20, -10); // y-Position
  L[i][2] = random(3, 5); // Radius
  L[i][3] = random(-0.1 ,0.1); // Geschwindigkeit in x-Richtung
  L[i][4] = random(0.3, 0.6); // Geschwindigkeit in y-Richtung
  L[i][5] = random(0.5, 0.9); // Farbe
};


/*
Der Befehl setup wird beim Start des Programms genau
einmal automatisch aufgerufen und ausgefuehrt.
*/

function setup() {
  Canvas.init([0,100], [0,60], {width:640, background:"lightgrey"});
  for (var i = 0; i < n; i = i+1) neuer_luftballon(i);
  Animation.init({fps:60});
};


/*
Der Befehl loop wird automatisch immer und immer wieder
aufgerufen und ausgefuehrt (etwa 60 mal pro Sekunde).
*/

function hintergrund() {
  Canvas.rect(50, 30, 100, 60, {fill:[207, 217, 226]});
  Canvas.circle(65, 50, 4, {fill:[32, 57, 74]});
  Canvas.box(80, 0, 60, {fill:[130, 164, 180], angle:0.7854});
  Canvas.box(60, 0, 55, {fill:[130, 164, 180], angle:0.7854});
  Canvas.box(25, 0, 75, {fill:[63, 83, 104], angle:0.7854});
  Canvas.box(65, 0, 32, {fill:[63, 83, 104], angle:0.7854});
  Canvas.box(90, 0, 35, {fill:[63, 83, 104], angle:0.7854});
  Canvas.box(0, 0, 30, {fill:[17, 33, 46], angle:0.7854});
  Canvas.box(30, 0, 36, {fill:[17, 33, 46], angle:0.7854});
  Canvas.box(78, 0, 40, {fill:[17, 33, 46], angle:0.7854});
};

function luftballon(x, y, r, c) {
  Canvas.line(x, y, x, y-4*r, {stroke:"white"});
  Canvas.circle(x, y, r, {fill:c});
  Canvas.circle(x-0.4*r, y+0.4*r, r/6, {fill:[255,255,255,100]});
  Canvas.circle(x, y-(1.1)*r, r/5, {fill:c});
};

function loop() {
  // Bewegungen der Luftballons
  for (var i = 0; i < n; i = i+1) {
    L[i][0] = L[i][0] + L[i][3];
    L[i][1] = L[i][1] + L[i][4];
    if (L[i][1] > 120) neuer_luftballon(i);
  }
  // Darstellung
  Canvas.clear();
  hintergrund();
  for (var i = 0; i < n; i = i+1) {
    luftballon(L[i][0], L[i][1], L[i][2], L[i][5]);
  }
  Canvas.text(4, 56, c);
};


/*
Der Befehl on_mouse_down wird genau dann ausgefuehrt, wenn
auf die Canvas-Zeichenflaeche geklickt wird. Die Argumente
x und y beschreiben dabei die Position des Mauszeigers.
*/

function on_mouse_down(x, y) {
  for (var i = 0; i < n; i = i+1) {
    if (abstand(x, y, L[i][0], L[i][1]) < L[i][2]) {
      c = c+1;
      neuer_luftballon(i);
    }
  }
};


</script>
</body>
</html>

Vorschau Download Kopie speichern