taralino

Einleitung

Wenn du bereits mit Grundlagen der textbasierten Programmierung in JavaScript sowie der taralino-Umgebung vertraut bist, kannst du in diesem Kurs lernen, wie ein eigenes kleines Spiel implementiert werden kann:

Die Aufgabe besteht darin, einen flatternden Vogel durch Hindernisse bzw. Barrieren zu steuern. Es handelt sich dabei um ein Spiel, das mit einer Taste bzw. per Mausklick gespielt werden kann.

In der nachfolgenden Anwendung findest du ein Beispiel, wie das Ergebnis aussehen kann. Schritt für Schritt lernst du in den folgenden Abschnitten, wie dies programmiert werden kann.

Anwendung

Beispiel zum Spiel.

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

// Hintergrund
var B = [];
for (var k = 0; k < 20; k++) B.push([10*k+random(-2,2),random(8,32)]);
var C = [];
for (var k = 0; k < 12; k++) C.push(k*10);


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:"#b5e5f7"});
  Animation.init({fps:60});
};

function spiel_physik() {
  // Spieler
  v = v - 0.08;
  y = y + v;
  if (y < r+2) 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();
  // Hintergrund
  for (var k = 0; k < B.length; k++) {
    Canvas.box(B[k][0], 10, B[k][1], {fill:"#69caef", angle:Math.PI/4});
    B[k][0] -= 0.1;
    if (B[k][0] < -50) B[k][0] += 200;
  }
  Canvas.rect(50, 0, 100, 20, {fill:"#69caef"});
  // Hindernisse
  for (var k = 0; k < an; k++) {
    Canvas.circle(H[k][0]+0.8, H[k][1]+0.4, ar, {fill:"lime"});
    Canvas.rect(H[k][0]+0.8, H[k][1]+0.4-50, 2*ar, 100, {fill:"lime"});
    Canvas.circle(H[k][0]+0.8, H[k][2]+0.4, ar, {fill:"lime"});
    Canvas.rect(H[k][0]+0.8, H[k][2]+0.4+50, 2*ar, 100, {fill:"lime"});
    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"});
  }
  // Hintergrund
  Canvas.rect(50, 0, 100, 4, {fill:"green"});
  for (var k = 0; k < C.length; k++) {
    Canvas.rect(C[k], 0, 5, 3, {fill:"lime"});
    C[k] -= 0.5;
    if (C[k] < -10) C[k] += 120;
  }
  // Spieler
  Canvas.circle(x, y, r, {fill:"red"});
  Canvas.circle(x+0.9*r, y+(v>0?1:-1)*0.5*r, r/2.6, {fill:"red"});
  Canvas.circle(x+0.4*r, y+0.4*r, 0.25*r, {fill:"white"});
  Canvas.circle(x+0.4*r, y+0.2*r, 0.25*r, {fill:"white"});
  Canvas.circle(x+0.4*r, y+(v>0?0.4:0.2)*r, r/10, {fill:"black"});
  // 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;
};

function on_key_down(t) {
  if (t == "SPACE") v = 1.4;
};

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

Vorschau Download Kopie speichern