taralino

Zusammenfassung

Wir haben damit bereits alle wesentlichen Komponenten des Spiels kennengelernt. Es verbleiben einige Ergänzungen, um das Ganze spielbar zu machen:

Falls eine Kollision erkannt wird, startet das Spiel von vorne.
Es wird ein Zähler eingeführt, der die aktuell erreichte Strecke speichert.
Es wird ein Zähler eingeführt, der die bislang maximale Strecke eines Spieldurchlaufs speichert.

Quellcode

Beispiel eines vollständigen Spiels.

<!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>

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

// Hindernisse
var ar = 4; // Radius (halbe Breite) der Hindernisse
var ax = 40; // Abstand zwischen Hindernissen in x-Richtung
var ay = 25; // Vertikale Luecke in Hindernissen
var an = 6; // Anzahl der Hindernisse
var H = []; // Datenfeld der Hindernisse

// Zaehler
var c = 0;
var cmax = 0;


function spiel_setup() {
  y = 20;
  v = 0;
  c = 0;
  H = [];
  for (var k = 0; k < an; k++) {
    var h = random(15,45);
    H.push([120+k*ax, h-ay/2, h+ay/2]);
  }
};

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

function spiel_physik() {
  // Spieler
  v = v - 0.08;
  y = y + v;
  if (y < 0) v = 1.4;
  if (y > 60) y = 60;
  // Hindernisse
  for (var k = 0; k < an; k++) {
    H[k][0] = H[k][0] - 0.5;
    if (H[k][0] < -10) {
      var h = random(15,45);
      H[k] = [H[k][0] + an*ax, h-ay/2, h+ay/2];
    }
  }
};

function spiel_zeichnen() {
  Canvas.clear();
  // Spieler
  Canvas.circle(x, y, r, {fill:"yellow"});
  // Hindernisse
  for (var k = 0; k < an; k++) {
    Canvas.circle(H[k][0], H[k][1], ar, {fill:"green"});
    Canvas.rect(H[k][0], H[k][1]-50, 2*ar, 100, {fill:"green"});
    Canvas.circle(H[k][0], H[k][2], ar, {fill:"green"});
    Canvas.rect(H[k][0], H[k][2]+50, 2*ar, 100, {fill:"green"});
  }
  // Zaehler
  c = c + 1;
  if (c > cmax) cmax = c;
  Canvas.text( 2, 57, "aktuelle Strecke:", {align:"left"});
  Canvas.text(28, 57, c, {align:"right"});
  Canvas.text( 2, 54, "maximale Strecke:", {align:"left"});
  Canvas.text(28, 54, cmax, {align:"right"});
};

function abstand_punkt_linie(x, y, z, y1, y2) {
  // Annahme: y1 <= y2
  if (y <= y1) return Math.sqrt((x-z)*(x-z) + (y-y1)*(y-y1));
  if (y >= y2) return Math.sqrt((x-z)*(x-z) + (y-y2)*(y-y2));
  return Math.abs(x-z);
};

function spiel_kollision() {
  for (var k = 0; k < an; k++) {
    var b1 = abstand_punkt_linie(x, y, H[k][0], H[k][1]-100, H[k][1]);
    var b2 = abstand_punkt_linie(x, y, H[k][0], H[k][2], H[k][2]+100);
    if ((b1 < r+ar) || (b2 < r+ar)) spiel_setup();
  }
};

function loop() {
  spiel_physik();
  spiel_zeichnen();
  spiel_kollision();
};

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

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

Vorschau Download Kopie speichern

Aufgabe

Schaue, ob der Schwierigkeitsgrad des Spiels für dich passt. Falls nicht, verändere die Spielparameter, sodass es für dich stimmig ist.