taralino

Projektaufgabe

Nun liegt es an dir, deine eigene Spielvariante zu entwickelt. Deiner Kreativität sind keine Grenzen gesetzt. Orientiere dich am Quellcode aus dem Abschnitt zuvor und nimm beliebige Anpassungen vor. Zum Beispiel:

Verändere die grafische Darstellung des Spiels und füge einen (beweglichen) Hintergrund hinzu
Experimentiere (wie in den Abschnitten zuvor) mit sämtlichen Parametern des Spiels
Ergänze, dass nicht nur per Maustaste, sondern auch mittels Leertaste geflogen 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