JavaScript/jQuery! Wie einen Loop einbinden?

Auch hier bin ich absoluter Newby!

Ich habe eine nette kleine Funktion:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code2').html() }).animate({ countNum: 5360 }, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code2').html(Math.floor(this.countNum));

complete: function () {

$('.code2').html(this.countNum + "+");

//alert('finished');

}

});

--------------------------------------------------------------------------------------------------------------

Das funktioniert - alles supi - nun möchte ich, dass die Animation nach einem kleinen Zeitintervall erneut startet. Habe dazu über Google 'setInterval' gefunden und einen Code. Leider fehlt mir noch das Verständnis was ich wo einfügen muss.

Hier der Code von Google:

Edit: Ist der Code vielleicht falsch, javascript vs jquery???

function meineFunktion() { 
    // ... 
} 

setInterval(function() { 
    // alle 3 Sekunden ausführen 
    meineFunktion(); 
}, 3000);

Habe das so in meine Scriptdatei eingebunden:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code').html() }).animate({ countNum: 1295365}, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code').html(Math.floor(this.countNum));

setInterval(function() {

// alle 3 Sekunden ausführen

meineFunktion();

}, 3000);

complete: function () {

$('.code').html(this.countNum + "+");

//alert('finished');

}

--------------------------------------------------------------------------------------------------------------

Ich nehme an mindestestens "meineFunktion()" ist nur ein Platzhalter, aber ich bin nicht sicher, was da vom Code rein soll.

Stört das complete eigentlich die Wiederholung oder zeigt das nur an, was passiert, wenn es fertig hochgezählt hat?

Freue mich wie immer über Antworten! :)

Aber auch über Links z.B. mit einer leicht verständlichen Übersicht der Anatomie eines Jquery Codes, damit ich zukünftig besser allgemeine Beispiele an meine anpassen kann.

Bonusfrage:

Ich würde ganz gerne zu der Zahl noch eine einfache sich drehende Grafik (Kreis, Pfeil oä) hinzufügen. Hat da jemand zufällig nen leicht verständlichen Link oä dazu?

15.12.2022, 12:31

Ich habe zwischenzeitlich auch gemerkt, dass javascript und jquery wohl nicht synonym zu verwenden sind. #hoppla. An meiner Ausgangsfrage ändert das aber zunächst nichts ;)

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

15.12.2022, 17:49

Die setTimeout-Funktion würde ausreichen, um die Animation nach Beendigung zu wiederholen. Der Aufruf von animate sollte zuvor in eine Funktion verschoben werden.

function startCountAnimation() {
  $({ countNum: $('.code2').html() }).animate({
    countNum: 5360
  }, {
    duration: 10000,
    easing: 'linear',
    step: function() {
      $('.code2').html(Math.floor(this.countNum));
    },
    complete: function() {
      $('.code2').html(this.countNum + "+");
      setTimeout(startCountAnimation, 5000);
    }
  });
}

startCountAnimation();

Die Verzögerungszeit bis zur Ausführung wird in ms angegeben. Im obigen Fall wären es 5000ms, also fünf Sekunden.

Stört das complete eigentlich die Wiederholung oder zeigt das nur an, was passiert, wenn es fertig hochgezählt hat?

Der complete-Callback wird ausgeführt, sobald die Animation beendet wurde. Für eine Wiederholung stört er nicht. Stattdessen ist er der Implementation einer Wiederholung eher dienlich, da bei seiner Ausführung klar ist, dass das Programm bereit für einen Neustart ist.

Aber auch über Links z.B. mit einer leicht verständlichen Übersicht der Anatomie eines Jquery Codes, (...)

JavaScript kannst du auf diesen Seiten lernen:

Die jQuery-Bibliothek ist hier dokumentiert.

Ich würde ganz gerne zu der Zahl noch eine einfache sich drehende Grafik (Kreis, Pfeil oä) hinzufügen. Hat da jemand zufällig nen leicht verständlichen Link oä dazu?

Dafür würde ich wohl eine CSS-Animation einsetzen.

HTML:

<span class="rotating-arrow"></span>

CSS:

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating-arrow {
  animation: rotating 2s linear infinite;
  display: block;
  height: 15px;
  line-height: 15px;
  text-align: center;
  width: 15px;
}

.rotating-arrow::before {
  content: '\25b2'; /* some arrow */
}

Genaueres zu CSS-Animation findest du unter anderem auf diesen Seiten:

ClaudiHundemom

Fragesteller

15.12.2022, 22:48

Vielen Dank! Ich habe 5 verschiedene Zahlen, die hochgezählt werden sollen. im html code, code 2, code 3, code 4 & code 5. Kopiere ich dann diese Abschnitte (von Dir) in der js Datei und füge sie untereinander ein? Bei meinem 1Versuch hat er dann gar nicht mehr gezählt. Es gibt aber im js noch code vor dem code 2:

$({ countNum: $('.code').html() }).animate({ countNum: 1295365}, {

duration: 4000,

easing: 'linear',

step: function () {

$('.code').html(Math.floor(this.countNum));

complete: function () {

$('.code').html(this.countNum);

//alert('finished');

kommt das dann weg, wenn ich Deinen nehme?

ClaudiHundemom

Fragesteller

15.12.2022, 23:03

@ClaudiHundemom

Edit: Also wenn ich den Code von Dir kopiere und 'code..' anpasse, dann zählt immer nur die erste Funktion hoch, die ich eingefügt habe. Die anderen bleiben auf Null.

Ähnliche Fragen

Wie update ich den HTML Text?

Ich bin in der Programmier AG meiner Schule und soll es jetzt so machen, dass der Fehler Text sobald ich einen Fehler mache geupdated wird und die Anzahl der Fehler aktuell ist. Gerade aktualisiert es nur wenn ich etwas richtiges eingebe.

Der Code lautet wie folgt:

<html>
<head>
<meta charset="utf-8">
<title>Kopfrechnen-Quiz</title>
<script>
var richtigeAntwort;
var aktuelleNummer = 1;
var Anzahlfalsch = 0;
function wennGeladen() {
stelleAufgabe();
aktuelleNummer = 1;
//alert(Math.floor( Math.random() * 100 ));
Anzahlfalsch = 0;
}
function pruefeAntwort() {
event.preventDefault();
if (document.getElementById("antwort").value == richtigeAntwort) { 
alert("Richtig!");
aktuelleNummer++;
stelleAufgabe();
}
else {
alert ("Leider falsch. Bitte nochmal versuchen");
refresh ("falsch")
Anzahlfalsch++;
}
}
function stelleAufgabe() {
var zahl1 = Math.floor(Math.random()*100);
var zahl2 = Math.floor(Math.random()*100);
richtigeAntwort = zahl1 + zahl2;
document.getElementById("falsch").innerHTML = "Anzahl der Fehler: " + Anzahlfalsch;
document.getElementById("nummer").innerHTML = "Aufgabe Nummer: " + aktuelleNummer;
document.getElementById("aufgabe").innerHTML = zahl1 + "+" + zahl2 + ":";
}
</script>
</head>
<body onload="wennGeladen()">
<h1>Kopfrechnen-Quiz</h1>
<h2 id="nummer"></h2>
<h3 id="falsch"></h3>
Bitte berechne: <span id="aufgabe"></span>
<form onSubmit="pruefeAntwort()">
<input id="antwort">
</form>
</body>
</html>

es wäre nett, wenn mir jemand helfen könnte.

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

Bild in Bild auf iOS?

Ich versuche mich momentan etwas mit html und JavaScript und habe folgenden Code der auf dem pc perfekt funktioniert aber nicht auf meinem Handy, ich sah bei Apple einen Lösungsansatz aber dabei verstand ich nichts!

function togglePictureInPicture() {
  if (!document.pictureInPictureElement) {
    x.requestPictureInPicture();
  } else {
    document.exitPictureInPicture();
  }
}

...zur Frage

Jquery: If hover mache "das", wen nicht mehr hover dan "das"

Guten Morgen Gutefrage.net, erstmal mein Code:

$(".leistungen").hover(function(){ $( ".technik" ).animate({ marginTop: "+=62", height: "toggle" }, 5000, function() { // Animation complete. });

});

Wie kann ich sagen das er nur einmal bei einem hover den div "technik" auf margin-top 62px einstellen soll? Und das er wen nicht mehr gehovert wird wieder zurückgehen soll?

Und dan natürlich wieder bei einem erneuten hover das ganze nochmal usw.

MfG

Matrix

...zur Frage

Wix 2 verschiedene Befehle auf 1 Seite?

Liebe alle

Ich habe folgendes Problem:

Ich bin gerade an meiner Webseite am Arbeiten. Dort möchte ich gerne 5 verschiedene Zahlen mit einem Counter einrichten um verschiedene Fakten zu beschreiben. Nun habe ich einen Code gefunden, welcher via Code auf Wix.com einen solchen Counter ermöglicht.

Dieser:

let startNum = 3200000;

let endNum = 3384000;

const duration = 3; // 1000 milliseconds

$w.onReady(function () {

setInterval(() => {

countUp();

}, duration);

});

function countUp() {

if (startNum <= endNum) {

$w('#numberText').text = startNum.toLocaleString();

startNum += 100;

}

Nun mein Problem:

Die Programmierung der ersten Zahl funktioniert problemlos. Der Counter zählt hoch bis zum gewünschten Ergebnis und steht dort still wie er soll.

Doch sobald ich zur zweiten Zahl komme funktioniert nichts mehr.

Ich muss ja alle Befehle einer Seite in ein Befehl packen, also eine Seite glaube ich oder?

Ich habe einfach den Befehl kopiert, auf die zweite Zahl angepasst jedoch funktioniert dann auch der erste Befehl nicht mehr. Kann mir jemand weiterhelfen?

...zur Frage

Javascript Ajax Php kein Wert?

Console:

HTML javascript Code ajax:

function send(text){
   console.log("Text kurz vor versenden:\n" +text);
//hier hat er noch einen wert
   $.ajax({
     method: "POST",
     url: "DataSender.php",
     data: { text: text}
   }).done(function( response ) {
       console.log(response);
     console.log("weiterleitung

Php Code Ajax Übertragung wo es nicht geht:

      $text = $_POST['text'];
      $sql = "INSERT INTO `Xss-Data` (`ID`,`DATA`, `created_at`) VALUES (null, '{$text}' , CURRENT_TIMESTAMP)";

      if (empty($text)) {
              //das ist empty!
              echo("Error:\nEs ist leer\nText wäre\n$text");
          } else

Sind die wichtigen Code snippets

Der String hat keinen Wert. Warum? Wie löst man das?

...zur Frage

stimmt dieser code?

ich hab was ausprobiert aber da scheint was falsch zu sein, sieht man einen Fehler auf den ersten blick?

schreibe den javascript code für ein spiel und erkläre hinterher wie es funktioniert

// variablen
let score = 0;
let time = 10;

// Elemente im HTML-Dokument auswählen
const scoreDisplay = document.getElementById('score');
const timeDisplay = document.getElementById('time');
const startButton = document.getElementById('start-button');
const gameArea = document.getElementById('game-area');

// Start
startButton.addEventListener('click', startGame);

function startGame() {
  startButton.disabled = true;
  score = 0;
  time = 10;
  scoreDisplay.textContent = score;
  timeDisplay.textContent = time;
  gameArea.addEventListener('click', increaseScore);
  countdown();
}

// Punktzahl erhöhen
function increaseScore() {
  score++;
  scoreDisplay.textContent = score;
}

// Countdown-Funktion
function countdown() {
  const timer = setInterval(() => {
    time--;
    timeDisplay.textContent = time;
    
    if (time === 0) {
      clearInterval(timer);
      endGame();
    }
  }, 1000);
}

// ende
function endGame() {
  gameArea.removeEventListener('click', increaseScore);
  startButton.disabled = false;
  alert('Deine Punktzahl: ' + score);
}

Der Code beginnt mit der Initialisierung einiger Spielvariablen:

(Punktzahl) und

(Zeit). Diese Variablen werden später im Spiel verwendet, um den Fortschritt des Spielers zu verfolgen.

Als Nächstes werden einige Elemente im HTML-Dokument ausgewählt, die zur Anzeige und Interaktion mit dem Spiel verwendet werden. Dazu gehören das Element, das die Punktzahl anzeigt (

), das Element, das die verbleibende Zeit anzeigt (

timeDisplay

), der Startbutton (

startButton

) und das Spielfeld (

gameArea

startButton

erhält einen Eventlistener, der auf das Klicken des Buttons reagiert. Sobald der Startbutton geklickt wird, wird die Funktion

startGame

aufgerufen.

Die Funktion

startGame

wird aufgerufen, wenn das Spiel gestartet wird. Sie deaktiviert den Startbutton, setzt die Punktzahl und die verbleibende Zeit auf ihre Ausgangswerte zurück und aktualisiert die Anzeige entsprechend. Ein Eventlistener wird dem Spielfeld hinzugefügt, um auf Klicks des Spielers zu reagieren und die Punktzahl zu erhöhen. Die Funktion

countdown

wird aufgerufen, um den Countdown zu starten.

Die Funktion

increaseScore

wird aufgerufen, wenn der Spieler auf das Spielfeld klickt. Sie erhöht die Punktzahl um eins und aktualisiert die Anzeige entsprechend.

Die Funktion

countdown

startet den Countdown von 10 Sekunden. Dazu wird ein Timer mit

setInterval

verwendet, der alle 1000 Millisekunden (1 Sekunde) die verbleibende Zeit um eins verringert und die Anzeige aktualisiert. Wenn die Zeit auf 0 reduziert wird, wird der Timer mit

clearInterval

gestoppt, und die Funktion

endGame

wird aufgerufen.

Die Funktion

endGame

beendet das Spiel. Sie entfernt den Eventlistener vom Spielfeld, aktiviert den Startbutton wieder und zeigt eine Benachrichtigung an, die die erreichte Punktzahl des Spielers anzeigt..

...zur Frage

Javascript Seitenübergreifend?

Hallo,

ich möchte in einen Html Code einen Javascript Code für Lesezeichen einfügen. Also ich habe eine Seite mit vielen Texten (Seite x), zu jedem Text gibt es einen Button, der das jeweilige Lesezeichen hinzufügen soll. Wenn dieser Knopf gedrückt wird, dann soll ein derzeit unsichtbarer Container (display: none;) auf display:flex; bzw. Sichtbar gestellt werden (in Seite y).

Der Code der diese Funktion ausführen soll wäre derzeit:

function textfield1() {

var x = document.getElementById("th1");

if (x.style.display === "none") {

x.style.display = "block";

} else {

x.style.display = "none";

}

Dieser Code wird natürlich nur auf Seite x ausgeführt
kann mir jemand helfen, dass dieser Container dann auf Seite y gezeigt wird?

...zur Frage

Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>

...zur Frage

Cross Origin Anfrage blockiert?

Ich möchte gerade eine REST-API für mein Heimnetzwerk einrichten um über z.B. einen button einen CMD befehl auf dem Server PC auszuführen.

Mein Pythonscript für die API:

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/execute-command', methods=['POST'])
def execute_command():
  # Hier wird der Code zum Ausführen des Befehls eingefügt
  result = "Befehl wurde ausgeführt."
  return jsonify({"response": result})

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=5000)

Mein HTML Script<!DOCTYPE html>
<html>
<head>
  <title>API Test</title>
</head>
<body>
  <button id="executeBtn">Befehl ausführen</button>
<script>
  document.getElementById('executeBtn').addEventListener('click', function() {
    fetch('http://localhost:5000/execute-command', { // Verwende absolute URL
      method: 'POST',
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Fehler:', error);
    });
  });
</script>
</body>
</html>

Ich bekomme als Fehler von Firefox in der Konsole:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:5000/execute-command. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

Fehler: TypeError: NetworkError when attempting to fetch resource

Entschuldigung wenn es offensichtlich ist, bin da noch sehr frisch und habe keine Lösung gefunden.

...zur Frage

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zur Frage

JavaScript: Wie kann ich den Browser nach zwei Sekunden automatisch in den Vollbildschirmmodus wechseln lassen?

Hallo,

ich habe eine .html-Datei und möchte, dass, wenn diese Datei ausgeführt wird, dass dann im Browser nach zwei Sekunden der Vollbildmodus aktiviert wird.

Also, dass das Gleiche passiert, wie wenn man die Taste F11 drückt, nur mit dem Unterschied, dass das automatisch nach zwei Sekunden passiert.

Folgenden Code habe ich probiert:

<script>
  setTimeout(function() {
    enterFullscreen(document.documentElement);
  }, 2000);
</script>

Jedoch funktioniert dieser nicht.

Welchen Code muss ich dafür verwenden?

...zur Frage

Element-Inhalt abrufen?

Ich programmiere seit einiger Zeit mit HTML CSS und JS und habe mit Getboostrap eine Website erstmals geschrieben, wo mein Ziel es war dass man dort einen Key eingeben kann womit man dann auf eine weitere HTML Datei umgeleitet wird die den Namen hat. Damit meine ich das wenn man als Key hallo123 eingibt das man auf die Seite Hallo.html umgeleitet wird. Ist zwar nicht gerade so sicher aber es reicht für den Start aus. Ich habe jetzt aber das Problem das ich bei "document.getElementById()" nicht dem Inhalt aus dem Eingabe Feld erhalte wodurch man egal was man eingibt zu null.html umgeleitet wird. Weiß jemand wie ich das Behebe?

<!doctype html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mit Projekt-Key herunterladen | LSprojects</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
body {
    background-color: rgb(26, 24, 24);
    color: white;
}
.btn  {
    background-color: rgb(161, 156, 156);
    color: white;
}
</style>
<script>
    function submit() {
        let code = document.getElementById(codeinput);
        window.location = "/codes/" + code + ".html"
    }
</script>


<body>
    <div class="vertical-center horizontal-center">
        <h1>Geben sie den Key hier ein:</h1>
        <div class="input-group mb-3 dark-backround">
            <button href="submit()" onclick="submit()" class="btn btn-outline-secondary" type="button"
                id="load">Laden</button>
            <input type="text" class="form-control" placeholder="Projekt-Key" id="codeinput" aria-label=""
                aria-describedby="load">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>


</html>

...zur Frage

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. :)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen