taralino

Projektaufgabe 2

Als zweite Idee dient das nachfolgende Beispiel:

Verwende die Pfeiltasten, um den Spieler zu steuern. Die Aufgabe besteht darin, der Spinne auszuweichen. Beachte, dass du auf diese springen kannst.

Auch 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 der Geschwindigkeit der Spinne oder bei der Bewegung des Spielers.
Ergänze mehr als eine Spinne oder auch ganz andere Gegner.
Baue Objekte ein (z.B. Münzen), die einzusammeln sind.
Sinnvoll kann auch ein Zähler sein, um gesammelte Münzen zu zählen.
Verändere die grafische Darstellung nach Belieben.

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 und Geschwindigkeit des Spielers
var x = 2;
var y = 1.75;
var v = -12;

// Position und Geschwindigkeit der Spinne
var sx = 18;
var sy = 1.5;
var sv = 0;

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


function restart() {
  // Spinne neu starten lassen
  sx = 18;
  sv = random(0.06, 0.10);
};

function setup() {
  // Initialisierung
  restart();
  Animation.init({fps:48});
  Canvas.init([0,16], [0,8], {width:768, background:"#5e81a2"});
};


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 collision() {
  // Kollisionserkennung
  var h = distance(x, y, sx, sy);

  if (h < 1.25) {
    // Abstand zwischen Spieler und Spinne kleiner als ein Schwellwert
    restart();
    if ((v > -12) && (v < 0)) {
      // Spieler springt auf Spinne
      Sounds.play("bell", {volume:0.8});
      v = -1*v - 1;
    } else {
      // Spieler springt nicht auf Spinne
      Sounds.play("pingfx", {volume:0.8});
    }
  }
};


function move() {
  // Interaktionen bei gedrueckter Tasten
  if ((key["RIGHT"] == 1) && (x < 16)) x = x + 0.2;
  if ((key["LEFT"] == 1) && (x > 0)) x = x - 0.2;
  if ((key["UP"] == 1) && (v == -12)) {
    v = 12-1;
    Sounds.play("jump", {volume:0.8});
  }

  // Bewegung des Spielers
  if (v > -12) {
    y = y + 0.04 * v;
    v = v - 1;
  }

  // Bewegung der Spinne
  sx = sx - sv;
  if (sx < -1) restart();
};


function time_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 draw() {
  // Szene zeichnen
  Canvas.clear();

  // Hintergrund
  Canvas.circle(12, -40, 47, {fill:"#597998"});
  Canvas.circle(12, -40, 46, {fill:"#577491"});
  Canvas.circle(12, -40, 45, {fill:"#556d85"});
  Canvas.circle(12, -40, 44, {fill:"#4c6074"});
  Canvas.circle(12, -40, 43, {fill:"#46596b"});

  // Spieler
  Canvas.circle(x, y, 0.75, {sprite:"character-circle-red"});
  Canvas.circle(x, y, 0.75, {sprite:"character-face-6"});

  // Boden
  for (var i = 0; i < 16; i++) {
    Canvas.box(0.5+i, 0.5, 1, {sprite:"physics-ground-grass"});
  }

  // Spinne
  var s = time_index(12);
  Canvas.circle(sx, sy, 1, {sprite:"enemies-spider-"+s});
};


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