taralino

Springende Bälle

Die taralino-Bibliothek bietet dank des Physics-Add-ons eine Möglichkeit, um zweidimensionale Bewegungen unter Berücksichtigung physikalischer Gesetze zu simulieren (eine sogenannte 2D-Physik-Engine).

In Verbindung mit dem Sprites-Add-on lassen sich die Objekte als Bilder (sogenannte Sprites) darstellen. Die beiden Add-ons bieten damit auch eine Grundlage, um kleine Spiele zu entwickeln.

Beispiel

Klicke auf die Zeichenfläche, um Bälle hinzuzufügen. Beobachte das unterschiedliche Springverhalten (Abprallstärke) der unterschiedlichen Bälle.

<!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="Physics.js"></script>
  <script src="Sprites.js"></script>
</head>
<body>
<script>


var counter = 0;


function setup() {
  Canvas.init([0,10], [0,6], {width:640, background:"lightgrey"});
  Physics.rect( 4, 0, 20, 0.4, {label:"floor", fixed:true});
  Physics.rect( 0, 0, 0.4, 20, {label:"floor", fixed:true});
  Physics.rect(10, 0, 0.4, 20, {label:"floor", fixed:true});
};


function add_bounciness(id, c) {
  var S = Physics.bodies();
  for (var k = 0; k < S.length; k++) {
    if (S[k].id != id) Physics.bounciness(S[k].id, id, c);
  };
};


function on_mouse_down(x, y) {
  var id = "ball" + counter;
  counter++;
  var t = random(0,4);
  // Tennisball
  if ((t >= 0) && (t < 2)) {
    Physics.circle(x, y, 0.25, {
      id: id,
      label: "ball-tennis",
      lifetime: 8,
      density: 1.0,
      angle: random(0,6.28),
      velocity: [random(-4,4),6]
    });
    add_bounciness(id, 0.95);
  };
  // Basketball
  if ((t >= 2) && (t < 3)) {
    Physics.circle(x, y, 0.5, {
      id: id,
      label: "ball-basket",
      lifetime: 8,
      density: 1.0,
      angle: random(0,6.28),
      velocity: [random(-2,2),4]
    });
    add_bounciness(id, 0.95);
  };
  // Bowlingkugel
  if ((t >= 3) && (t < 4)) {
    Physics.circle(x, y, 0.5, {
      id: id,
      label: "ball-bowling",
      lifetime: 8,
      density: 6.0,
      angle: random(0,6.28),
      velocity: [random(-1,1),2]
    });
    add_bounciness(id, 0.02);
  };
};


function loop() {
  Canvas.clear();

  var S = Physics.bodies();

  for (var k = 0; k < S.length; k++) {
    if (S[k].type == "rect") {
      Canvas.rect(S[k].x, S[k].y, S[k].width, S[k].height, {fill:"grey", angle:S[k].angle});
    };

    if (S[k].type == "circle") {
      Canvas.circle(S[k].x, S[k].y, S[k].radius, {angle:S[k].angle, sprite:S[k].label});
    };
  };

  if (counter == 0) Canvas.text(5, 3, "Klicke hier!");
};


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

Vorschau Download Kopie speichern