taralino

Kollisionserkennung

Schließlich fehlt noch eine Kollisionserkennung. Dies ist eine Prüfung, ob der Spieler ein Hindernis berührt oder nicht. Um dies umzusetzen, überlegen wir uns, wie der kürzeste Abstand zwischen einem Punkt und einer vertikalen Linie (Strecke) bestimmt werden kann:

Die möglichen Fälle, die hier auftreten können, zeigt die Abbildung zuvor: Je nach Lage des Punktes (x, y) ist der kürzeste Abstand entweder die Entfernung zwischen dem Punkt und einem Ende der vertikalen Linie (Fälle A und D) oder aber es ist die horizontale Abweichung (Fälle B und C).

Im nachfolgenden Quellcode bestimmt die Funktion abstand_punkt_linie(x, y, z, y1, y2) genau den Abstand wie zuvor beschrieben. Diese Funktion wird verwendet, um die Kollisionserkennung umzusetzen.

Quellcode

Beispiel zur Kollisionserkennung.

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

for (var k = 0; k < an; k++) {
  var h = random(15,45);
  H.push([80+k*ax, h-ay/2, h+ay/2]);
}


function 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"});
    Canvas.line(H[k][0], H[k][1], H[k][0], H[k][1]-100, {stroke:"blue"});
    Canvas.line(H[k][0], H[k][2], H[k][0], H[k][2]+100, {stroke:"blue"});
  }
};

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)) {
      Canvas.circle(x, y, r, {fill:"red"});
    }
  }
};

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

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

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

Vorschau Download Kopie speichern

Codingaufgabe

Mache dich mit dem Quellcode zuvor vertraut. Variiere die Spielparameter (insbesondere die Radien) und teste die Kollisionserkennung.