Pinball-Game / JavaScript: Wie kann ich die Kollisionserkennung implementieren?

Hallo zusammen,

ich muss für die Uni ein kleines Single Page 2D-Spiel entwickeln. Die Backend REST-API mit Python, das Frontend mit HTML/CSS, die Logik mit JavaScript. Die Animationen sollen wir selbst entwickeln und nicht z.B. von canvas-Objekten übernehmen.

Ich versuche zurzeit ein Pinball-Spiel (Flipper-Automaten) und habe das Grundgerüst mit CSS gebaut. Nur habe ich mir die Kollisionserkennung deutlich leichter vorgestellt, als sie wahrscheinlich ist.

So sieht das Spielfeld momentan aus:

Die JavaScript-Logik sodass der Ball im Spielfeld bleibt, ist ja recht simpel:

  var ball = document.getElementById('ball');
  var playArea = document.getElementById('play-area');
  var ballRadius = 10;
  var playAreaWidth = playArea.offsetWidth; // 600
  var playAreaHeight = playArea.offsetHeight; // 820
  var ballX = playAreaWidth / 2; // Startposition des Balls in der Mitte des Spielfelds
  var ballY = playAreaHeight / 2; // X = 300, Y = 410
  var ballSpeedX = 3; // Geschwindigkeit des Balls in horizontaler Richtung
  var ballSpeedY = 3; // Geschwindigkeit des Balls in vertikaler Richtung
  
  function updateBallPosition() {
    // Aktualisiere die Position des Balls basierend auf der aktuellen Geschwindigkeit
    ballX += ballSpeedX;
    ballY += ballSpeedY;
  
    if (ballX + ballRadius > playAreaWidth || ballX - ballRadius < 0) {
      ballSpeedX *= -1; // Richtungswechsel in der horizontalen Richtung
    }
  
    if (ballY + ballRadius > playAreaHeight || ballY - ballRadius < 0) {
      ballSpeedY *= -1; // Richtungswechsel in der vertikalen Richtung
    }
  
    // Setze die neue Position des Balls
    ball.style.left = ballX + 'px';
    ball.style.top = ballY + 'px';
  }
  
  // Aktualisiere die Position des Balls alle 16 Millisekunden (ca. 60 Frames pro Sekunde)
  setInterval(updateBallPosition, 16);
}

Aber wie man es implementiert, sodass der Ball von den Hindernissen und Banden richtig abprallt, sodass ein Richtungswechsel entsteht, habe ich noch nicht wirklich verstanden. Hätte da jemand eine Idee oder Erfahrung, wie man hier an die Kollisionserkennung herangehen könnte?

LG und danke im Voraus. :)

Bild zum Beitrag
HTML, CSS, Java, JavaScript, HTML5, Informatik, Programmiersprache, Webentwicklung
Kennt jemand von euch gute Websitebaukästen?

Hallo. Ich benötige eine eigene Webseite und daher auch einen geeigneten Websitebaukasten, da ich kein Technikwissen im Bereich Programmieren habe, aber sehr gut Design kann.

Kennt jemand von euch einen guten und hat jemand auch mit dem Baukasten Erfahrungen gemacht?

Was muss er überhaupt erfüllen?

  • Einfache Erstellung
  • Günstig (ca. 5 Euro pro Monat)
  • Sollte alles gut funktionieren
  • Keine Werbung

Ich will nochmal über den zweiten und dritten Punkt sprechen.

Ich habe nämlich schon einmal den Website-Baukasten Wix ausprobiert, welcher sehr sehr überteuert war und daher habe ich zum Ausprobieren eine kostenlose Webseite mit Werbung genommen. Als ich sie hochgeladen hatte und mal die Domain im Browser angegeben habe, stand da, dass die Seite aufgrund von technischen Problemen nicht gefunde wurde. Sowas sollte natürlich nicht passieren.

Kommen wir nochmal zum Preis.

Ich weiß natürlich, dass es wenige Websitebaukästen gibt, die 5 Euro kosten. Aber ich finde Preise darüber einfach zu teuer, da es sich ja nicht um einen Onlineshop handelt, wo der Baukasten natürlich sehr viel regeln muss, sondern um eine einfache Webseite, die man sich mit Hilfe vielleicht selber programmieren könnte.

Danke, dass sie sich die Zeit genommen haben, meine Frage durchzulesen.

Ich würde mich wirklich sehr über eine Antwort freuen.

VG

Homepage, Webseite, baukasten, Strato, Webentwicklung, wix.com, webseite erstellung

Meistgelesene Beiträge zum Thema Webentwicklung