taralino

Flatternder Vogel

Mache dich zunächst mit dem nachfolgenden Quellcode vertraut. Es ist bereits ein kleiner Kreis als Spieler vorhanden, der sich per Mausklick vertikal bewegt.
Erweitere den Quellcode, sodass sich nicht nur ein, sondern mehrere Kreise auf der Zeichenfläche horizontal bewegen.
Berücksichtige, dass der Spieler mit allen anderen Kreisen kollidieren kann. Überlege dir eine sinnvolle Anordnung der sich horizontal bewegenden Kreise.
Überarbeite die grafische Darstellung: Zeichne einen Hintergrund und stelle den Spieler sowie die Kreise geeignet dar.
Führe einen Zähler ein, um die Entfernung bis zur ersten Kollision zu ermitteln.
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 und Definition globaler Variablen
*/

// Spieler
var x = 20; // x-Position
var y = 20; // y-Position
var r = 3; // Radius
var v = 0; // Geschwindigkeit in y-Richtung

// Hindernis
var xa = 80; // x-Position
var ya = 40; // y-Position
var ra = 5; // Radius
var va = -0.5; // Geschwindigkeit in x-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 setup wird beim Start des Programms genau
einmal automatisch aufgerufen und ausgefuehrt.
*/

function setup() {
  Canvas.init([0,100], [0,60], {width:640, background:"lightgrey"});
  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 Spielers
  v = v - 0.08;
  y = y + v;
  if (y < 0) v = 1.5;
  if (y > 60) y = 60;
  // Bewegungen des Hindernisses
  xa = xa + va;
  if (xa < 0) xa = 100;
  // Kollision
  if (abstand(x, y, xa, ya) < r+ra) {
    xa = 100;
  }
  // Darstellung
  Canvas.clear();
  Canvas.text(50, 30, "Klicke auf die Zeichenflaeche.");
  Canvas.circle(x, y, r, {fill:"red"});
  Canvas.circle(xa, ya, ra, {fill:"blue"});
};


/*
Der Befehl on_mouse_down wird genau dann ausgefuehrt, wenn
auf die Canvas-Zeichenflaeche geklickt wird.
*/

function on_mouse_down(x, y) {
  v = 1.5;
};


</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 und Definition globaler Variablen
*/

// Spieler
var x = 20; // x-Position
var y = 20; // y-Position
var r = 3; // Radius Spieler
var v = 0; // Geschwindigkeit in y-Richtung

// Hindernisse
var n = 12; // Anzahl Hindernisse
var H = []; // Datenfeld der Hindernisse
var ra = 5; // Radius Hindernisse
var va = -0.5; // Geschwindigkeit Hinternisse
var da = 50; // Abstand Hindernisse

// Zaehler
var c = 0;
var cmax = 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 setup wird beim Start des Programms genau
einmal automatisch aufgerufen und ausgefuehrt.
*/

function hindernisse_erzeugen() {
  for (var i = 0; i < n; i = i+1) {
    var w = random(20,50);
    for (var j = -8; j <= 8; j++) {
      if ((j < -1) || (j > 1)) H.push([i*da, w+j*8]);
    }
  }
};

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


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

function hintergrund_zeichnen() {
  Canvas.rect(50, 30, 100, 60, {fill:[235, 237, 241]});
  Canvas.circle(50, 34, 18, {fill:[216, 177, 120]});
  Canvas.rect(50, 0, 100, 60, {fill:[124, 179, 211]});
  Canvas.box(70, 0, 50, {fill:[103, 133, 175], angle:0.7854});
  Canvas.rect(50, -5, 100, 60, {fill:[124, 179, 211]});
  Canvas.box(25, 0, 48, {fill:[65, 80, 102], angle:0.7854});
  Canvas.box(35, 0, 40, {fill:[65, 80, 102], angle:0.7854});
  Canvas.rect(50, -15, 100, 60, {fill:[124, 179, 211]});
  Canvas.box(95, 0, 28, {fill:[17, 20, 35], angle:0.7854});
  Canvas.box(75, 0, 20, {fill:[17, 20, 35], angle:0.7854});
};

function spieler_zeichnen() {
  Canvas.circle(x, y, r, {fill:"yellow"});
  Canvas.circle(x, y-0.6, 1.2, {fill:"black"});
  Canvas.rect(x, y+0.6, 4.0, 2.4, {fill:"yellow"});
  Canvas.circle(x+1.0, y+0.8, 0.6, {fill:"black"});
  Canvas.circle(x-1.0, y+0.8, 0.6, {fill:"black"});
};

function hindernisse_zeichnen() {
  for (var i = 0; i < H.length; i++) Canvas.circle(H[i][0], H[i][1], 1.1*ra, {fill:[84,58,70]});
  for (var i = 0; i < H.length; i++) {
    Canvas.circle(H[i][0], H[i][1], ra, {fill:[115,191,46]});
    Canvas.circle(H[i][0]-0.1*ra, H[i][1], 0.65*ra, {fill:[228,253,139]});
    Canvas.circle(H[i][0]+0.1*ra, H[i][1], 0.64*ra, {fill:[85,128,34]});
    Canvas.circle(H[i][0], H[i][1]-0.1*ra, 0.58*ra, {fill:[115,191,46]});
    Canvas.circle(H[i][0], H[i][1]+0.1*ra, 0.58*ra, {fill:[115,191,46]});
  }
};

function zaehler_zeichnen() {
  Canvas.text(10, 57, "aktuelle Strecke");
  Canvas.text(10, 54, c);
  Canvas.text(30, 57, "maximale Strecke");
  Canvas.text(30, 54, cmax);
};

function kollision() {
  for (var i = 0; i < H.length; i++) {
    if (abstand(H[i][0], H[i][1], x, y) < r+ra) {
     c = 0;
    }
  }
};

function loop() {
  // Bewegungen des Spielers
  v = v - 0.08;
  y = y + v;
  if (y < 0) v = 1.5;
  if (y > 60) y = 60;
  // Bewegungen des Hindernisses
  for (var i = 0; i < H.length; i++) {
    H[i][0] = H[i][0] + va;
    if (H[i][0] < -10) H[i][0] = H[i][0] + n*da;
  }
  // Zaehler
  c = Math.round(c - va);
  if (c > cmax) cmax = c;
  // Kollision
  kollision();
  // Darstellung
  Canvas.clear();
  hintergrund_zeichnen();
  hindernisse_zeichnen();
  spieler_zeichnen();
  zaehler_zeichnen();
};

/*
Der Befehl on_mouse_down wird genau dann ausgefuehrt, wenn
auf die Canvas-Zeichenflaeche geklickt wird.
*/

function on_mouse_down(x, y) {
  v = 1.5;
};


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

Vorschau Download Kopie speichern