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
IT Kaufmann Ausbildung verkürzen?

Hallo zusammen,

kurz zu mir: hab nach meinem Fachabi angefangen Wirtschaftsinformatik zu studieren, da das erste Semester aber komplett online war, fiel es mir von Anfang an schwer mit zu kommen und genügend Ernsthaftigkeit/Disziplin rein zu bringen. Abgesehen davon war es an der HS sehr Informatik lastig was mir nicht zugesagt hat.

Nun habe ich mich nach drei Semester exmatrikuliert und mache ein halbjähriges Praktikum. Das Unternehmen hat mir eine Ausbildung als Kaufmann für Digitalisierungsmanagement oder Kaufmann für IT-System-Management (welche genau ist noch in Erklärung, der Lehrplan unterscheidet sich nur im 3. Jahr etwas) angeboten, und auch die Möglichkeit um ein Jahr zu verkürzen. Also das erste oder dritte Jahr zu streichen.

Die Ausbildung möchte ich machen, nur bin ich mir unsicher ob ich verkürzen soll. Einerseits bin ich schon 21 und hab schon quasi zwei Jahre „verschwendet“ und würde es schon gerne machen weil es dann auch ein Jahr weniger von den unnötigen Sachen wie Berichtsheft schreiben geben wird. Andererseits habe ich natürlich auch Angst wie ich das mit Prüfungen hinbekommen soll da ich mir ja den Stoff dann eigenständig aneignen muss (wofür ich nicht so der Typ bin aus mangelnder Disziplin, wobei ich dann so oder so sehr kurzfristig lernen werde) die Prüfungen sollen nicht so schwer sein aber es soll viel Stoff sein der eben dran kommen kann. Die anderen Azubis aus dem Betreib haben mir davon abgeraten. Aber was hätte ich zu verlieren? Dann muss ich die Prüfung/en eventuell wiederholen oder ein Jahr wiederholen? Würdet ihr lieber das erste oder dritte Jahr auslassen?

würde mich über Erfahrungen und Tipps zu dem Thema sehr freuen. Vielleicht hat auch jemand eine Zusammenfassung der Themen für die AP1 „Einrichten eines IT-gestützten Arbeitsplatzes“, ich kann zwar den Lehrplan sehen aber anhand dessen nicht wirklich was genau zu lernen ist.
vielen Dank im Voraus

Mach’s 57%
Mach’s nicht 43%
Beruf, Schule, Job, Prüfung, IT, Ausbildung, Karriere, Berufsschule, Digitalisierung, Disziplin, Entscheidung, Fachinformatiker, Informatik, IT-SYSTEMKAUFMANN, Kaufmann, Prüfungsvorbereitung, verkuerzen, Fachinformatiker Systemintegration, Fachinformatiker Anwendungsentwicklung, Schule und Ausbildung
Könnte mir einer bitte ein Struktogramm zum Thema Lotto 6 aus 49 erstellen?

Wir müssen ein Struktogramm zu dem Programm 6 aus 49 erstellen. Das Programm haben wir schon selber erstellt aber wir verstehen nicht wie wir dazu das richtige Struktogramm zeichen können. Es wäre super nett wenn jemand antworten könnte der uns helfen kann. :)

Das ist unser Programm:

import java.util.Arrays;

import java.util.Random;

import java.util.Scanner;

public class Lotto6aus49 {

  public static void main(String[] args) {

    // Zufällige Generierung von 6 Zahlen (1 bis 49)

    Random random = new Random();

    int[] generatedNumbers = new int[6];

    for (int i = 0; i < 6; i++) {

      generatedNumbers[i] = random.nextInt(49) + 1;

    }

    // Eingabe der 6 Zahlen vom Benutzer

    int[] userNumbers = getUserNumbers();

    // Vergleich der eingegebenen Zahlen mit den generierten Zahlen

    int correctCount = countCorrectNumbers(generatedNumbers, userNumbers);

    // Ausgabe des Ergebnisses

    printResult(generatedNumbers, userNumbers, correctCount);

  }

  private static int[] getUserNumbers() {

    Scanner input = new Scanner(System.in);

    int[] userNumbers = new int[6];

    System.out.println("Geben Sie 6 verschiedene Zahlen zwischen 1 und 49 ein:");

    for (int i = 0; i < 6; i++) {

      System.out.print("Zahl " + (i + 1) + ": ");

      int number = input.nextInt();

      if (number < 1 || number > 49 || containsNumber(userNumbers, number)) {

        System.out.println("Ungültige Eingabe. Bitte geben Sie eine gültige Zahl ein.");

        i--;

        continue;

      }

      userNumbers[i] = number;

    }

    input.close();

    return userNumbers;

  }

  private static boolean containsNumber(int[] numbers, int number) {

    for (int n : numbers) {

      if (n == number) {

        return true;

      }

    }

    return false;

  }

  private static int countCorrectNumbers(int[] generatedNumbers, int[] userNumbers) {

    int correctCount = 0;

    for (int number : userNumbers) {

      if (containsNumber(generatedNumbers, number)) {

        correctCount++;

      }

    }

    return correctCount;

  }

  private static void printResult(int[] generatedNumbers, int[] userNumbers, int correctCount) {

    Arrays.sort(generatedNumbers);

    Arrays.sort(userNumbers);

    System.out.println("Zahlen der Ziehung: " + Arrays.toString(generatedNumbers));

    System.out.println("Ihre Zahlen: " + Arrays.toString(userNumbers));

    System.out.println("Anzahl richtiger Zahlen: " + correctCount);

  }

}

Informatik, Programmiersprache, Struktogramm

Meistgelesene Beiträge zum Thema Informatik