JavaScript interval mehrmals aufrufen?

Hallo, ich habe das Problem, dass ich ein Interval mehrmals aufrufen möchte.

Jedoch kann ich immer nur eines abbrechen.

Ich hätte das Abbrechen so versucht:

clearInterval(interval + thema);

Funktioniert leider nicht.

                var zahl = 0;
                var intervalphp = setInterval(erhoeheZahl, 100, 90, 'php');
                var intervalcss = setInterval(erhoeheZahl, 100, 100, 'css');


                function erhoeheZahl(max, kreis, thema) {
                    zahl++;
                    console.log(zahl);
                    document.getElementById(kreis).innerHTML = zahl;
                    document.getElementById(kreis + 'kreis').style.background = `conic-gradient(#712e1e ${zahl * 3.6}deg, #ffd5af 0deg)`;


                    if (zahl >= max) {
                        clearInterval(interval + thema);
                    }
                }

Danke im voraus!

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

programmieren, Programmiersprache, Programmieren & Softwareentwicklung

20.02.2023, 13:44

Du musst natürlich das passende Interval übergeben.

Was du hier versuchst ist etwas, was man eher mit einem Array oder dergleichen lösen würde.

crRaphi

Fragesteller

20.02.2023, 14:50

Wie kann ich das lösen?

Destranix

20.02.2023, 14:59

@crRaphi

var interval = array();
interval['php'] = setInterval(erhoeheZahl, 100, 90, 'php');
                interval['css']= setInterval(erhoeheZahl, 100, 100, 'css');


                function erhoeheZahl(max, kreis, thema) {
                    zahl++;
                    console.log(zahl);
                    document.getElementById(kreis).innerHTML = zahl;
                    document.getElementById(kreis + 'kreis').style.background = `conic-gradient(#712e1e ${zahl * 3.6}deg, #ffd5af 0deg)`;


                    if (zahl >= max) {
                        clearInterval(interval[thema]);
                    }
                }

Oder so ähnlich.

crRaphi

Fragesteller

20.02.2023, 15:03

@Destranix

Danke, das Funktioniert aber leider nicht

Destranix

20.02.2023, 15:14

@crRaphi

So ähnlich. Musst du halt anpassen, ist nur auf die schnelle getippt.

crRaphi

Fragesteller

20.02.2023, 16:37

@Destranix

Ich habe die erste Zeile jetzt so abgeändert:

var interval = [];

Der Effekt funktioniert, aber er hört nicht auf an der richtigen Stelle.

Destranix

20.02.2023, 16:45

@crRaphi

Kann sein, dass sich das Aufheben des Intervals leicht verzögert. Oder was genau meinst du?

crRaphi

Fragesteller

20.02.2023, 16:46

@Destranix

Ich habe jedoch jetzt das Problem, dass es nicht mehr stoppt

crRaphi

Fragesteller

20.02.2023, 16:48

@Destranix

Es stoppt überhaupt nicht mehr

Destranix

20.02.2023, 16:48

@crRaphi

Wie rufst du denn "erhöheZahl" auf?

Mach dir da mal eine Ausgabe und schau, ob die If-Bedingung erreicht und ob sie erfüllt wird.

crRaphi

Fragesteller

20.02.2023, 16:50

@Destranix

Es stoppt nur, wenn ich die Bedingung auf ein Gleichzeichen ändere, jedoch habe ich den Effekt nicht mehr

Destranix

20.02.2023, 16:53

@crRaphi

Du meinst ein '=' oder ein '=='? Bei einem '==' solltest du eigentlich nicht das Problem haben, dass es nicht stoppt, denn wenne s bei einem '==' stoppt, dann stoppt es auch bei einem '>='.

Ansonsten wie gesagt, bau dir eine Ausgabe ein und schau in der Konsole was passiert. Ich kenne dein Programm nicht, daher kann ich dir nur bedingt helfen.

crRaphi

Fragesteller

20.02.2023, 16:55

@Destranix

JS:

       var zahl = 0;
                var interval = [];
                interval['php'] = setInterval(erhoeheZahl, 100, 90, 'php');
                interval['css'] = setInterval(erhoeheZahl, 100, 100, 'css');


                function erhoeheZahl(max, kreis, thema) {
                    zahl++;
                    console.log(zahl);
                    document.getElementById(kreis).innerHTML = zahl;
                    document.getElementById(kreis + 'kreis').style.background = `conic-gradient(#712e1e ${zahl * 3.6}deg, #ffd5af 0deg)`;


                    if (zahl == max) {
                        clearInterval(interval[thema]);
                    }
                }

HTML:

        <div class="skills">
            <div class="kreis" id="phpkreis">
                <div class="text">
                    <h2 id="php">0</h2>
                    <p>PHP</p>
                </div>


            </div>


        </div>
        <div class="skills">
            <div class="kreis" id="csskreis">
                <div class="text">
                    <h2 id="css">0</h2>
                    <p>CSS</p>
                </div>


            </div>

Destranix

20.02.2023, 17:00

@crRaphi

Achso, das "erhoeheZahl" ist ja die Intervalfunktion.

Also mit '==' sollte es nicht gehen (da dürfte nur ein Interval stoppen), mit '>=' müsste es aber gehen.

Dein fehler hier ist allerdings, dass du vergessen hast, ein Argument anzugeben (entweder fehlt die Intervalzeit oder einer der Zahlenwerte):

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

crRaphi

Fragesteller

20.02.2023, 17:08

@Destranix

Ich habe es abgeändert und es läuft trotzdem weiter:

 if (zahl >= max) {
                        clearInterval(interval[thema]);
                    }

Ich weiß leider nicht, was du mit " Intervalzeit oder einer der Zahlenwerte" meinst?

Destranix

20.02.2023, 17:09

@crRaphi

Die Funtion "setInterval" nimmt als Parameter das Callback, die Intervallzeit und dann erst die Funktionsparameter.

Deine Funktion nimmt drei Parameter, folglich solltest du 2+3 = 5 Parameter bei "setInterval" übergeben, du übergibst aber nur 4.

crRaphi

Fragesteller

20.02.2023, 17:15

@Destranix

Danke, für deine Zeit es funktioniert jetzt wunderbar!

crRaphi

Fragesteller

20.02.2023, 17:50

@Destranix

Hallo, ich muss leider noch einmal nachfragen, weil sie das Stoppen verzögert. Wenn ich ZB den Wert 90 übergebe bleibt er bei 95 stehen.

Destranix

20.02.2023, 17:54

@crRaphi

Das ist die Race-Condition, die ich vorher nicht erwähnte, aber erwähnen wollte.

Du hast zwei Interval-Timer und deren Aufrufe können sich überlappen (werden aber iirc je nach Methode sequelzialisiert).

Allerdings solltest du dadurch dennoch nicht auf 95 kommen, sondern nur maximal auf 91 oder so.

Müsstest du genauer untersuchen, weiß ich jetzt auch nicht sicher, woran es liegt. Versuch es mal nur mit einem Interval.

Lenzer66u

20.02.2023, 13:43

versuchs nicht mit intervall sondern mit timeout

So das der Countdown einfach immer weiter zählt und nicht dann aufhört, wenn die eingegebene Zahl erreicht ist.

  <script>
    var i = 100;
  
    var inv = setInterval(function() {
      if (i < 1000000000000)
        document.getElementById("counter").innerHTML = ++i;
    else
      clearInterval(inv);
    }, 3000 / 100);
  </script>
  Hier gehts los: <span id="counter"></span>
</body>
</html>

...zur Frage

Wie lass ich von -100 bis 100 nur gerade Zahlen und nur ungerade Zahlen zählen?

Hallo,

ich habe Aufgaben bekommen:

-100 bis 100 zählen lassen
nur gerade Zahlen zählen lassen
nur ungerade Zahlen zählen lassen
Mit Modulo (benötigt if, Modulo oder Runden); Zahlenzensur: immer wenn eine Zahl durch 7 teilbar ist ,soll PIEP statt der Zahl auf dem Bildschirm erscheinen. (Hinweis: setze % ein oder lasse eine zweite Variable immer bis 7 zählen)

Ich habe die 1. Aufgabe schon erledigt und dachte, dass ich nur etwas dazu hängen muss, aber ich komme irgendwie nicht auf die Lösung.

<html>

<body>

var i = -100;

var inv = setInterval(function() {

if(i < 100)

document.getElementById("counter").innerHTML = ++i;

else

clearInterval(inv);

}, 80000 / 100);

</script>

Here it goes: <span id="counter"></span>

</body>

</html>

...zur Frage

Div-Element mit javascript auslesen; wird eine Zahl als Zahl angesehen?

var x = document.getELementById("div-ID");

var y = document.getELementById("div-ID2");

var z = y.valueAsNumber * z.valueAsNumber;

Hallo zusammen,

ich habe das Problem, dass das Ergebnis aus zwei Div-Elementen, die einen Zahlwert enthalten, immer wieder bei dem Start der Funktion NaN ausspucken. Ich mache das nur aus Spaß und weiß gerde nicht weiter.

Können die Werte aus Div - Elementen nicht mit document.getElementByID ausgelesen werden, um dann mit den Variabeln weiterzurechnen?

Das ist oben nur skizziert, aber gebe ich bei var z als Variabel einen Zahlwert ein, dann klappt alles. Mein probelm scheint also da zu liegen.

...zur Frage

Wie oft kann man abbrechen?

Hey Leute gibt es so nh bestimmten Zahl wie oft man Ausbildung abbrechen kann oder kann man quasi 100 mal anfangen und 100 mal abbrechen (verschiedene Ausbildungen)

...zur Frage

JS - Warum funktioniert der Button nicht Richtig?

Ich wollte ein simples Spiel mit JS programmieren und wollte einen Refresh des Bildschirms einfügen. An sich funktioniert das auch, jedoch reagiert der Button nicht immer. Je schneller der Refresh erfolgt, desto schlechter Funktioniert der Button. Kann mir da vielleicht jemand helfen?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="miner.css" rel="stylesheet">
    <script src="miner.js"></script>
</head>
<body>
    <div class="monitor" id="monitor">
        <h1>Mine Tycoon</h1>
        <div>Mines: <font id="minesCounter">0</font></div><br>
        <div id="buyMineButton">
            <p class="button" onclick="buyMine()">Buy mine Cost: <font id="minesPrice">1</font></p>
        </div>
    </div>
</body>
</html>

body{
    background-color: #393939;
    color: #ffffff;
}


h1{
    text-align: center;
}


.button{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid red;
    outline-offset: 4px;
    text-align: center;
}
.buttonGreen{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid green;
    outline-offset: 4px;
    text-align: center;
}

var money = 100;


var mines = 0;
var minesPrice = 1;
var miners = 0;


var coal = 0;
var copper = 0;
var iron = 0;
var cobalt = 0;
var gold = 0;
var platinum = 0;
var diamond = 0;


var reload = 10;


function buyMine(){
    mines++;
    money -= minesPrice;
    minesPrice = minesPrice*2;
}


function loop(){
    
        setInterval(function(){
            refreshScreen();
        },1000/reload)
    
}


function refreshScreen(){
    minesCounter.innerHTML = mines;
    if(money < minesPrice){
        document.getElementById("buyMineButton").innerHTML = "<p class='button'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }else{
        document.getElementById("buyMineButton").innerHTML = "<p class='buttonGreen' onclick='buyMine()'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }
    document.getElementById("minesPrice").innerHTML = minesPrice;
}


loop();

...zur Frage

Panorama Bild wie bei Google Maps?

Hi,

Ich habe folgenden Code:

HTML:

<div id="panorama-container">
  <img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />


  <a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


#panorama-container {
  width: 100%;
  height: 100%;
}


#panorama-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: auto;
  overflow-y: hidden;
}


#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

JS:

var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;


fullscreenButton.addEventListener("click", function() {
  if (panoramaContainer.requestFullscreen) {
    panoramaContainer.requestFullscreen();
  } else if (panoramaContainer.webkitRequestFullscreen) {
    panoramaContainer.webkitRequestFullscreen();
  } else if (panoramaContainer.mozRequestFullScreen) {
    panoramaContainer.mozRequestFullScreen();
  } else if (panoramaContainer.msRequestFullscreen) {
    panoramaContainer.msRequestFullscreen();
  }
});


document.addEventListener("touchstart", function(event) {
  initialX = event.touches[0].clientX;
});


document.addEventListener("touchmove", function(event) {
  if (initialX === null) {
    return;
  }


  var currentX = event.touches[0].clientX;
  var diffX = currentX - initialX;
  initialX = currentX;


  movePanorama(diffX); /* Change this value to adjust the speed of the movement */


  event.preventDefault();
});


document.addEventListener("touchend", function() {
  initialX = null;
});


function movePanorama(amount) {
  position += amount;
  panoramaImage.style.left =        position + "px";


 
  
}

Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.

Vielleicht versteht ihr was ich meine

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

JS - Wie kann ich die Höhe eines Rechtecks mit einem Schieberegler / Slider (range) im Canvas vergrößern und verkleinern?

Hallo,

meine Code sieht gerade so aus. Es funktioniert aber nicht. Was müsste ich hier ändern?

<hmtl>
  <head>
    <title>hi guys</title>
  </head>
  <body>
    Schieberegler:
    <br>
    <canvas id="canvas" height='400' width='600'></canvas>
  </body>
  <br>
  <input id='slider' type='range' max="100" min="0">
  <p id='outpRadius'> 50 </p>
  <input type='color'>
  <hr>
  <script>
    'use strict';

    window.onload = function() {
      var slider = document.getElementById('slider')
      var output = document.getElementById('outpRadius');
      slider.addEventListener('input', aendereRadius, false)

      function aendereRadius() {
        output.innerHTML = slider.value;
        console.log(output.innerHTML);
      }

      var canvas = document.getElementById('canvas');
      canvas.style.backgroundColor = 'yellow';
      var ctx = canvas.getContext('2d');
      ctx.fillRect(50,50,50,output.innerHTML);
    }
  </script>
</html>

...zur Frage

JavaScript function pausieren

Hallo nochmal,

langsam zweifle ich an meinem Verstand! Ein Fan von JavaScript werde ich in diesem Leben wohl wirklich nicht mehr...

Folgender Code:

function punktung() {
    var punkte = document.getElementById("punkte");
    if ( punkte.innerHTML.length > 3 ) {
        punkte.innerHTML = "";
        clearinterval(dots);
        setTimeout(function (){losgehts()}, 5000);
    }
    else  {
        punkte.innerHTML += ".";
    }
}

function losgehts() {
var dots = window.setInterval( function() { punktung() },500);
}

losgehts();

Das Script schreibt immer vier Punkte in ein Div und soll, nachdem die vier Punkte geschrieben wurden und die ID "Punkte" auf "" gekürzt wird, 5 Sekunden pausiert wird - danach das Gleiche wieder von vorne.

Ich lösche also den Interval "dots" und pausiere 5000 Millisekunden und rufe danach wieder die function "losgehts()" auf - warum funktioniert es aber wieder nicht? Es wird einfach keine Pause gemacht, sondern nach dem Kürzen einfach wieder von Vorne begonnen. Warum?

Über Antworten bin ich dankbar!

Grüße, Hummel

...zur Frage

JavaScript function beenden

Hallo zusammen,

folgende Codes:

function blabla(abbrechen) {

    if (abbrechen == "JA") {
    return;
    }

    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }
    
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("ausgabe").innerHTML=xmlhttp.responseText;
        }
    }
    
    xmlhttp.open("GET","blablabla.php",true);
    xmlhttp.send();
    
}



setInterval(function () {blabla()}, 5000);
var abbrechen = "JA";
setTimeout(function (){blabla(abbrechen)}, 10000);

Ich verstehe leider nicht, warum meine Function "blabla" nicht nach 10 Sekunden beendet wird. Immerhin gebe ich das mit

setTimeout(function (){blabla(abbrechen)}, 10000);

doch an?!

Über eine Aufklärung wäre ich dankbar!

-> Ich möchte einfach nur, dass die obige Funktion mit dem Interval alle 5 Sekunden ausgeführt wird, aber darunter nach 10 Sekunden mit TimeOut beendet wird. Was passt dem Programm nicht?

Grüße, Hummel

...zur Frage

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

Bilder bei jquery/JavaScript nach bestimmter zeit austauschen?

Erstmal entschuldigung für die komische Überschrift, ich schmeiße manchmal die beiden gerne durcheinander.

Ich hab auf meiner Seite einen Timer (fürs Beispiel 30s), der mit einem Button gestartet werden. Am Anfang soll Bild1 stehen. Nachdem der Timer bei der Hälfte der Zeit angekommen ist (hier 15s) soll Bild2 dort erscheinen wo Bild1 vorher war. Ist der Timer bei 0 angekommen, wird man auf eine andere Seite weitergeleitet.

Wie mache ich das am besten?

Hier mein bisheriger Code

$(document).ready(function (e) {

var $timer = $("#timer");

var stop = false;

var timerLoop;

$( "#button_start" ).click(function() {

timerLoop = setInterval(function(){ update() }, 1000);

});

function update() {

if(!stop){

var myTime = $timer.html();

var ss = myTime.split(":");

var dt = new Date();

dt.setHours(0);

dt.setMinutes(ss[0]);

dt.setSeconds(ss[1]);

var dt2 = new Date(dt.valueOf() - 1000);

var temp = dt2.toTimeString().split(" ");

var ts = temp[0].split(":");

if(ss[0] === "00" && ss[1] === "01"){

stop = true;

clearInterval(timerLoop);

$("body").load( "./erfolgreich.html" );

}

$timer.html(ts[1]+":"+ts[2]);

//setTimeout(update, 1000);

}

});

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

Tabelle nach SQL-Eintrag aktualisieren?

Hallo!

Ich habe mir ein Tool gebaut, welches Namen von einem SQL-Server holt und anzeigt. Das ganze habe ich schon verwendet, aber dann habe ich mir gedacht, dass es besser wäre wenn ich die Namen auch anhaken könnte. Das hab ich so programmiert aber dann ist mir etwas aufgefallen. Um die Daten aus dem SQL-Server zu aktualisieren habe ich folgendes verwendet:

<meta http-equiv="refresh" content="30">

Dadurch werden die Häkchen jetzt immer wieder gelöscht. Wie könnte man dieses Problem lösen?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen