taralino

Hindernisse

Nicht schwieriger, aber etwas unübersichtlicher wird es, wenn Hindernisse eingebaut werden.

Hindernisse sind vertikale Barrieren mit einer Lücke in der Mitte.

Im Quellcode werden Hindernisse generiert und es wird eine Bewegung in x-Richtung simuliert. Zu beachten ist:

Wenn ein Hindernis den linken Rand der Zeichenfläche (weit genug) verlassen hat, dann wird das Hindernis wieder nach ganz recht verschoben (und die Postion der Lücke zufällig neu generiert).

In der nachfolgenden Anwendung werden zunächst die Lücke der Hindernisse gezeichnet. Die grafische Darstellung passen wir anschließend an.

Quellcode

Beispiel mit Hindernissen.

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

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

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

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

Vorschau Download Kopie speichern

Codingaufgabe

Mache dich mit dem Quellcode zuvor vertraut. Verändere die Darstellung der Zeichenfläche in x-Richtung auf das Intervall [-100, 400], um die Bewegung bzw. die Erzeugung neuer Hindernisse anschaulich verstehen zu können.

Quellcode

Anpassung der grafischen Darstellung.

<!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][2], {stroke:"blue"});
  }
};

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

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

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

Vorschau Download Kopie speichern