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

Bild zu Frage
JavaScript, HTML5
Java Script wird nicht ausgeführt?

hallo, und zwar wird bei mir nicht Java Script ausgeführt. Könnt ihr mir helfen woran dass liegt???

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Quiz Wuiz</title>

<link rel="stylesheet" href="/quiz.css">

</head>

<body>

  <img src="/logo.png" alt="img" id="img" class="img">

  <h1 id="title">Today's Quiz</h1>

  <div id="quiz-container">

    <div class="questions">

      <h2 id="question"></h2>

      <ol type="A">

        <li class="option"><span id="option0" onclick="calcScore(this)"></span></li>

        <li class="option"><span id="option1" onclick="calcScore(this)"></span></li>

        <li class="option"><span id="option2" onclick="calcScore(this)"></span></li>

        <li class="option"><span id="option3" onclick="calcScore(this)"></span></li>

      </ol>

      <h4 id="stat"></h4>

    </div>

    <div class="buttons">

      <button type="button" class="next">Next</button>

    </div>

  </div>

  <!-- scoreboard section -->

  <div id="scoreboard">

    <img src="/logo.png" alt="">

    <h2 id="score-title">Your Score</h2>

    <h2 id="score"></h2>

    <button type="button" id="score-btn" onclick="backToQuiz()">Back to Quiz</button>

    <button type="button" id="check-answer" onclick="checkAnswer()">Check Answers</button>

  </div>

  

  <div id="answerBank">

    <h2>Answers :</h2>

    <ol type="1" id="answers">

    </ol>

    <button type="button" id="score-btn" onclick="backToQuiz()">Back to Quiz</button>

  </div>

  

  <script src="/quiz.js"></script>

</body>

</html>

JAVA SCRIPT:

Bild zu Frage
HTML, Webseite, JavaScript, HTML5, Informatik, Programmiersprache, Webentwicklung, Frontend
Pygame Vampire Survivors?

Hallo ich programmiere gerade ein Spiel in Pygame das dem Spiel Vampire Survivors ähnelt ich habe aktuell das problem das Problem das wenn der spieler auf die Gegner hinzu läuft die Gegener nach hinten verschoben werden staat nach vorn weil.

Also aktuell wenn ich stehe laufen die Gegner auf mich zu.

Und wenn ich von den Gegnern weg laufe werden sie aus dem Screen geschoben.

Aber wenn ich auf sie zu laufe werden sie auch aus dem Screen geschoben.

Obwohl sie dann normal laufen sollen als ob der spieler steth hier der wichtige code:   def update(self, dt, player, screen_width, screen_height):

    if not self.collided_with_enemy and self.is_visible:

      dx = player.x - self.x

      dy = player.y - self.y

      distance = max(1, pygame.math.Vector2(dx, dy).length())

      direction = pygame.math.Vector2(-dx / distance, -dy / distance)

      player_rect = pygame.Rect(player.x, player.y, player.hitbox_width, player.hitbox_height)

      enemy_rect = pygame.Rect(self.x, self.y, self.hitbox_width, self.hitbox_height)

      if player_rect.colliderect(enemy_rect):

        player.handle_collision()

        self.speed = 0

        return

      if dx != 0 and dy != 0:

        dx = 0

        dy = 0

      speed_multiplier = self.speed * dt

      if player.is_moving:

        speed_multiplier *= 0.5

      # Anpassung der Bewegungsrichtung basierend auf dem Spielerstatus

      if player.is_moving:

        self.x -= direction.x * speed_multiplier

        self.y -= direction.y * speed_multiplier

      else:

        self.x += direction.x * speed_multiplier

        self.y += direction.y * speed_multiplier

      self.x = max(-self.hitbox_width, min(self.x, screen_width))

      self.y = max(-self.hitbox_height, min(self.y, screen_height))

      self.animation_timer += dt

      if self.animation_timer >= self.animation_speed:

        self.animation_timer = 0

        self.current_frame = (self.current_frame + 1) % self.animation_frames

      # Anpassung der Geschwindigkeit basierend auf der Bewegungsrichtung des Spielers

      player_direction = pygame.math.Vector2(player.x - self.x, player.y - self.y)

      player_distance = max(1, player_direction.length())

      player_direction = player_direction.normalize()

      dot_product = player_direction.dot(direction)

      if dot_product > 0.5:

        # Spieler bewegt sich dem Gegner entgegen

        self.speed = self.original_speed + 100

      else:

        # Spieler bewegt sich vom Gegner weg

        self.speed = self.original_speed - 100

    else:

      self.x += self.direction * self.speed * dt

      self.collided_with_enemy = False

    for enemy in enemies:

      if check_enemy_collision(player, enemy):

        break

Java, JavaScript, Minecraft, C Sharp, Programmiersprache, Python, Python 3, Unity, Pygame
Als Student Online Geld verdienen (Programmieren)?

Hallo,

Da ich noch Student bin und nicht sehr viel Geld habe, bin ich auf der Suche nach Jobs (Freelancing). Mein Ziel ist es um die 1200-2000 Fr. zu verdienen, da ich mir ein MacBook kaufen möchte, aber ich weiss nicht genau wie ich das anstellen soll. In meiner Freizeit programmiere ich sehr gerne und interessiere mich generell sehr gerne für die IT. Ich kenne mich schon mit Java, SQL, Python, C++, Javascript aus und ich bin auch recht gut darin.

Mein einziges Problem darin ist, dass ich nicht weiss, wie ich etwas verkaufen soll, damit ich irgendwie an das gewünschte Geld komme. Was ich sehr gut kann, ist das, was in einer App im Hintergrund passiert. Also das Logische hinter einer App. Was ich aber wiederum noch nicht sehr gut kann, ist das Designen einer App, damit es benutzerfreundlich ist und damit man die auch verwenden kann. Ich kann ja keine App verkaufen, ohne das entsprechende Design. Ich habe auch vor das mit Flutter zu lernen, aber bis dahin geht es mir ein bisschen zu lange.

Was ich auch noch sehr gut kann, ist Datenbanken erstellen, Queries, ERM, Schema usw. Ich kann diese auch dann mit der dementsprechenden Software verknüpfen.

Ich habe bisher keine Option gefunden, mit diesem Wissen irgendwelches Geld zu verdienen. Natürlich kenne ich auch Plattformen wie FIverr, aber ich habe das Gefühl da ich da keinen Gewinn erzielen werde, denn wenn ich z.B. anbiete eine WordPress Homepage zu machen, dann gibt es schon 50 andere die schon mehr Erfahrung haben als ich und auch schon 5-Sterne-Bewertungen haben und warum sollten dann Kunden bei mir einkaufen, wenn es andere gibt, wo es besser ausschaut.

Mein Ziel ist es ja nicht etwas langzeitiges zu finden, sondern ich möchte eigentlich nur an den gewünschten Betrag zu kommen, und das auch möglichst schnell.

Vielleicht habt ihr ein paar Tipps, wie ich an mein Ziel näher kommen könnte.
PS: Mir wäre es auch egal, müsste ich dafür eine neue Programmiersprache lernen.

Ich hoffe, jemand kann mir irgendwie helfen
Danke im Voraus!

LG
Simone

Geld verdienen, Job, Nebenjob, SQL, Java, JavaScript, Minijob, pro, Taschengeld
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 zu Frage
HTML, CSS, Java, JavaScript, HTML5, Informatik, Programmiersprache, Webentwicklung
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.

HTML, Webseite, JavaScript, HTML5, Programmiersprache, Webentwicklung
Strato Web-Baukasten anpassen?

Noch einmal vorab, nicht ich habe mir den Mis... gekauft, wollte jemanden helfen, der die Seite benötigt. Wenn sich also jemand mit Tricks im Strato Baukasten auskennt und so lieb sein mag, konstruktive Ansätze mit mir zu teilen, wäre ich sehr dankbar.

Hallo,

Es geht um einfachste Abläufe, die sich im Strato Baukasten nicht verwirklichen lassen. Der Strato Service war sehr hilfreich (Ironie)! Wenn jemand selbst schon Ideen über Umwege gefunden hat, würde ich mich sehr über einen Ideenaustausch freuen.

Alle Fragen wurden beantwortet mit "Ja, das sehen Sie leider richtig, dies ist nicht vorgesehen" weitere Aussage "Aber schreiben Sie das bitte als Wunsch und Beschwerde, das hören wir seit Jahren." :-(

Zu den Problemen:

Also lange Texte kann man nicht einfach kürzen und mit beispielsweise ...weiter kürzen, dies geht nur über eine versteckte Seite im Untermenü! Ebenso auf dieser versteckten Seite mit einem ...zurück!

Soweit so Gut (Schlecht), denn die ...zurück Verlinkung, kann man intern nur auf den Hauptreiter oder Unterseite oder versteckte Seite lenken! Bin ich aber in der Mitte der "Home" Seite (habe also dort drüber schon verschiedene Themen) und möchte jetzt ein Produkt beschreiben.

Also binde ich dort den ...weiter Link ein und möchte dann zurück auf die gleiche Höhe, ist dies nicht möglich, sondern man fängt ganz oben bei "Home" wieder an, da man den Bereich nicht wählen kann, wohin es zurückgehen soll :-(

Es gibt noch nicht einmal die Möglichkeit eines simplen "Ziehharmonika Effektes!"

Mit dem “Embed-Widget” hatte ich die Hoffnung, eine Art von Code einbinden zu können, aber trotz richtiger Codes, versteht das Tool wohl nur bestimmte Codes von Fremdseiten?!

Sollte sich schon einmal jemand mit diesem furchtbaren Baukasten beschäftigt haben und Ideen oder Tricks benennen können, wäre ich sehr dankbar. Es kann ja nicht sein, dass ich, dem Service von Strato erkläre, wie man gewisse Sachen bei Ihnen “faken” kann und dies leider auch nonstop muss (Thema Mehrsprachigkeit).

Mein Kopf raucht und ist müde, also sollte es jemanden da draußen geben, der am besten einen Ordner mit allen Strato-Tricks besitzt, wie man den Strato-Baukasten nutzen kann, lasse es mich bitte wissen. 

Fragen, warum ich mir den Stress überhaupt antue?! Ich wurde leider gefragt, ob ich helfen kann, da diejenige es für ein Jahr gekauft hat (Geld weg und 14 Tage um), wurde ich um eine Lösung für das Produkt/Problem gebeten.

Ich freue mich auf hilfreiche Antworten.

Danke GPM

Homepage, HTML, Webseite, CSS, JavaScript, Strato, Webentwicklung
Wie kann ich eine Tabelle aus einem Array im local storage rendern?

Moin! Ich muss in HTML einen kleinen Blog erstellen. Ich habe es bereits geschafft Blog Beiträge zu den Favoriten hinzuzufügen und die relevanten infos im Local Storage zu speichern. Das Array sieht so aus:

titel: "TestArtikel1",

autor: "Max Mustermann",

url: "http://TestArtikel1.html",

bild_url: "http://img/Artikelbild1.jpg",

Nun geht es darum mit js eine funktion zu schreiben mit der man das Array aus dem local Storage auf der Seite zu rendern. Kennt sich zufällig jemand damit aus und kann mir helfen das ich die Tabelle gerendert bekomme? Hab garantiert nicht alle relevanten infos hier in der Frage drin falls noch was fehlt bitte gerne kurz bescheid sagen :) Die momentane Funktion sieht bei mir so aus:

function renderFavoriten() {

    const favoriten = JSON.parse(localStorage.getItem('favoriten'));

 

    const tableBody = document.getElementById('favoriten-body');

    tableBody.innerHTML = ''; // Lösche alle bestehenden Zeilen

 

    if (favoriten && favoriten.length > 0) {

      favoriten.forEach((favorit, index) => {

        const row = document.createElement('tr');

 

        const titelCell = document.createElement('td');

        titelCell.textContent = favorit.titel;

        row.appendChild(titelCell);

 

        const autorCell = document.createElement('td');

        autorCell.textContent = favorit.autor;

        row.appendChild(autorCell);

 

        const entfernenCell = document.createElement('td');

        const entfernenButton = document.createElement('button');

        entfernenButton.type = 'button';

        entfernenButton.textContent = 'Aus Favoriten entfernen ❌';

        entfernenButton.addEventListener('click', () => {

          entferneVonFavoriten(index);

          renderFavoriten();

        });

        entfernenCell.appendChild(entfernenButton);

        row.appendChild(entfernenCell);

 

        tableBody.appendChild(row);

      });

    } else {

      const emptyRow = document.createElement('tr');

      const emptyCell = document.createElement('td');

      emptyCell.colSpan = 3;

      emptyCell.textContent = 'Keine Favoriten vorhanden';

      emptyRow.appendChild(emptyCell);

      tableBody.appendChild(emptyRow);

    }

  }

 

  // Rufe die Funktion zum Rendern der Favoriten-Tabelle auf

  renderFavoriten();

Vielen Dank im vorraus!

HTML, Webseite, JavaScript, HTML5
Wie kann man zwei Bedingungen in einen JQuery schreiben?

Guten Tag :)

Ich verzweifle an einem Problem bei einem Live Search Feldes in einer Art Telefonbuch. Ich suche einen Vornamen in dem Input, und er zeigt mir alle Personen die diesen Vornamen haben.

Hauptseite (gekürzt):

...jquery-3.5.1.min.js...
...jquery/1.11.3/jquery.min.js...

<script>$(document).ready(function(){  $('.Suchfeld input[type="text"]').on("keyup input", function(){    /* Bei Änderung des Feldes Daten übertragen */    var inputVal = $(this).val();    var resultDropdown = $(this).siblings(".Ergebnisse");    if(inputVal.length){      $.get("daten.php", {s: inputVal}).done(function(data){        // Zeige Ergebnisse        resultDropdown.html(data);        $("#Suchfeld").focusout(function () { → Hier das Problem          $('#Ergebnisse').css('display', 'none');        });        $("#Suchfeld").focusin(function () {          $('#Ergebnisse').css('display', 'block');        });      });    } else{      resultDropdown.empty();    }  });
  // Angeklicktes ins Feld  $(document).on("click", ".Ergebnisse p", function(){    $(this).parents(".Suchfeld").find('input[type="text"]').val($(this).text());    $(this).parent(".Ergebnisse").empty();  });});</script></head><body>
<div class="Suchfeld"><input type="text" autocomplete="off" placeholder="" name="Suchfeld" id="Suchfeld"><div class="Ergebnisse" name="Ergebnisse" id="Ergebnisse"></div></div>

So sieht das aus:

Funktionen:

Wenn ich den Focus verliere (also etwas anderes auf der Seite anklicke oder TAB drücke) wird das blaue Dropdown Menü geschlossen. Wenn ich es wieder anklicke, wird es wieder ausgeklappt.

Wenn einer der Namen angeklickt wird (z.B. Dennis in diesem Fall) soll der Name in das Input Feld übertragen werden.

Problem:

Das mit dem Namen anklicken hat nur so lange geklappt, bis ich das mit dem Focus verlieren eingebaut habe. Als das drin war, hat es nicht mehr geklappt. Wieso? Weil in dem Moment, wo ich einen Namen anklicke, der Focus von dem Input Feld verloren geht. Also ich klicke auf Dennis, und noch bevor er den Namen in das Input überträgt, verliert er den Focus und schließt das Dropdown Menü sofort wieder.

Daher brauche ich eine zweite Bedingung, nämlich dass das Dropdown Menü beim verlieren des Focus nur geschlossen werden soll, wenn die Maus gerade nicht über dem Dropdown Menü ist.

Also der Code hier:

$("#Suchfeld").focusout(function () {
$('#Ergebnisse').css('display', 'none');
});

Soll nur ausgeführt werden wenn focusout zutrifft und wenn die Maus NICHT drüber ist. Mouseout ist hierfür nicht so geeignet, weil es erst aktiviert wird, wenn man die Maus von drin rausbewegt. Es soll aber immer aktiviert werden wenn die Maus gerade nicht drüber ist, ohne sie erstmal rein und dann wieder raus zu bewegen.

Daher die Bedingungen

  1. Input Feld kein Focus
  2. Maus nicht drüber

Ich verzweifle echt an diesem Problem und wäre sehr dankbar für eine Lösung.

Vielen Dank an die Community <3

Bild zu Frage
HTML, Webseite, JavaScript, JQuery, Programmiersprache, Webentwicklung

Meistgelesene Fragen zum Thema JavaScript