taralino

Projektaufgabe 1

Die erlernten Inhalte kannst du nun nutzen, um deine eigenen Spiele zu entwickeln. Das nachfolgende Beispiel dient als Grundlage zur Projektaufgabe:

Verwende die Pfeiltasten, um das Flugzeug zu steuern. Die Aufgabe besteht darin, sämtlichen Fledermäusen auszuweichen.

Damit kannst du eigene Erfahrungen sammeln:

Mache dich mit dem nachfolgenden Quellcode vertraut. Nutze diesen als Grundlage und erweitere das Spiel ganz nach deinem Geschmack.

Ein paar Ideen, welche Ergänzungen du vornehmen kannst:

Experimentiere mit den Parametern im Quellcode, zum Beispiel mit den Geschwindigkeiten der Fledermäuse.
Neben Fledermäusen kannst du weitere Objekte als Gegner ergänzen.
Auch Münzen könnten eingebaut werden, die einzusammeln sind.
Sinnvoll kann auch ein Zähler sein, um gesammelte Münzen zu zählen oder die geflogene Strecke zu speichern.
Es kann die Farbgebung angepasst oder ein Hintergrund ergänzt werden.

Deiner Kreativität sind keine Grenzen gesetzt.

Beispiel

Ein kleines Spiel zum Erweitern.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
  <script src="Sprites.js"></script>
  <script src="Sounds.js"></script>
</head>
<body>
<script>

// Position des Spielers (Flugzeug)
var y = 5;
var x = 2;

// Liste mit Position und Geschwindigkeit der Gegner
var bats = [];
for (var i = 0; i < 10; i++) bats.push([0,0,0]);

// Objekt zum Speichern gedrueckter Tasten
var key = {};


function distance(x1, y1, x2, y2) {
  // Abstand zwischen zwei Punkten (x1,y1) und (x2,y2)
  return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
};


function restart() {
  // Neustart: Positionen der Gegner definieren
  for (var i = 0; i < bats.length; i++) {
    bats[i] = [random(20,40), random(0,10), random(0.08,0.12)];
  }
};


function setup() {
  // Initialisierung
  restart();
  Animation.init({fps:48});
  Canvas.init([0,20], [0,10], {width:680, background:"#121212"});
};


function collision() {
  // Kollisionserkennung
  for (var i = 0; i < bats.length; i++) {
    var h = distance(x, y, bats[i][0], bats[i][1]);
    if (h < 1.5) {
      Sounds.play("pingfx", {volume:0.6});
      restart();
    }
  }
};


function move() {
  // Interaktionen bei gedrueckter Tasten
  if ((key["UP"] == 1) && (y < 10)) y = y + 0.1;
  if ((key["DOWN"] == 1) && (y > 0)) y = y - 0.1;
  if ((key["RIGHT"] == 1) && (x < 20)) x = x + 0.1;
  if ((key["LEFT"] == 1) && (x > 0)) x = x - 0.1;

  // Bewegung der Gegner
  for (var i = 0; i < bats.length; i++) {
    bats[i][0] = bats[i][0] - bats[i][2];
    if (bats[i][0] < -1) bats[i] = [random(20,40), random(0,10), random(0.08,0.12)];
  }
};


function plane_index(speed) {
  // Index eines Sprites in Abhaengigkeit von Geschwindigkeit und Zeit
  var h = speed*time() % 3;
  if (h > 2) return "2";
  if (h > 1) return "1";
  return "0";
};


function enemie_index(speed, shift) {
  // Index eines Sprites in Abhaengigkeit von Geschwindigkeit und Zeit
  var h = (speed*time() + shift) % 2;
  if (h > 1) return "1";
  return "0";
};


function draw() {
  // Szene zeichnen
  Canvas.clear();

  // Spieler
  var s = plane_index(12);
  Canvas.circle(x, y, 1, {sprite:"plane-red-"+s});

  // Gegner
  for (var i = 0; i < bats.length; i++) {
    var t = enemie_index(8, i*3.5719);
    Canvas.circle(bats[i][0], bats[i][1], 1, {sprite:"enemies-bat-"+t});
  }
};


function loop() {
  move();
  collision();
  draw();
};


function on_key_down(k) {
  key[k] = 1;
};


function on_key_up(k) {
  key[k] = 0;
};


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

Vorschau Download Kopie speichern