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 zum Beitrag

1 Antwort

eldorim

20.06.2023, 07:27

Wäre hilfreich zu erfahren, was genau nicht geht.

Dein Code sieht auf den ersten Blick ok aus., wobei ich sagen muss, dass ich plain javascript schon lange nicht mehr geschrieben habe. Ob .textContent und .disable funktionieren, darauf verlasse ich mich jetzt mal. Mir ist aber aufgefallen, dass du setIntervall verwendest. Damit habe ich sehr schlechte Erfahrungen gemacht. Es hat oft nicht wie erwartet funktioniert. Deshalb habe ich von dieser Funktion Abstsnd genommen. Vielleicht ist das hier auch das Problem. Ersetze mal setIntervall durch setTimeout. (was, wie ich finde, auch einfacher zu händeln ist)

das sieht dann folgendermaßen aus:

function countdown() {
    time--;
    timeDisplay.textContent = time;
    //oder timeDisplay.textContent = --time; 
    if (time <= 0) {
      endGame();
    }else{
      setTimeout(countdown,1000);
    }
}

Woher ich das weiß:Berufserfahrung

<script>
      document.addEventListener('DOMContentLoaded', function() {
          const scrollButtons = document.querySelectorAll('.button1');

          scrollButtons.forEach(button => {
              button.addEventListener('click', function() {
                  const target = button.getAttribute('data-target');
                  const targetElement = document.getElementById(target);

                  if (targetElement) {
                      window.scrollTo({
                          top: targetElement.offsetTop,
                          behavior: 'smooth'
                      });
                  }
              });
          });
      });
  </script>

Hi,

AI hat mir den code gegeben um meine buttons nützlich zu machen. Weil ich kein Javascript kann weiß ich nicht wo ich meine class namen einfügen soll.

Bitte helft mir

LG Lisa

...zur Frage

Javascript Rechnung mit Kommastellen?

Ich habe in JS eine Funktion, mit welcher ich meine Zeugnisnote berechnen kann, allerdings hätte ich es gerne so das z.B statt "3" eine "3,5" angegeben wird und nicht auf die nächste Zahl gerundet wird. Wie mache ich das?

function lkberechnung(){
    const at = parseInt(document.getElementById("lkallgemein").value)
    const kl1 = parseInt(document.getElementById("kl1").value)
    const kl2 = parseInt(document.getElementById("kl2").value)


    const lkergebnis = String(Math.round((kl1 +kl2 + at*2)/4));
    document.getElementById("lkergebnis").innerHTML =("Du hast " + lkergebnis + " Punkte auf dem Zeugnis");

...zur Frage

Timer mit JavaScript?

Ich möchte mit JavaScript einen Timer programmieren. Der User soll die Zeit einstellen können bspw 60min und dann soll der Timer runterzählen. Wenns bei 00:00:00 ist, soll ein neuer Bildschirm aufgerufen werden.

Ich hab leider nicht wirklich eine Ahnung wie ich das hinbekommen soll. Im Internet sind zwar Beispiele für Timer, jedoch laufen die von 0 bis unendlich.... Da ich technisch nicht so versiert bin um das ganze umzustellen, hoffe ich, dass ihr mir helfen könnt. Bis jetzt habe ich es nur hinbekommen, dass der Timer überhaupt läuft (allerdings von 0 an) und erst beginnt, wenn man auf den Start-Button drückt.

Hier meine js Datei:

$(document).ready(function() {

var timer = 0;

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

setInterval(function(){ increaseTimer() }, 1000);

});

function increaseTimer(){

timer = timer +1;

$("#timer").html(timer);

};

});

Schonmal vielen Dank!

Eure Amy

...zur Frage

JavaScript, wofür steht in function(e) das e?

Hallo, ich lerne aktuell JS und habefolgendes Beispiel (siehe unten). Ich frage mich, wieso Lehrbücher in anonymen Funktionen solche Buchstaben als Parameter einbauen. Das e steht hier glaube ich für "Event", aber es ändert ja nichts an der Funktionsweise, wenn ich die Klammern leer stehen lasse, korrekt? Ich würde gerne verstehen, welche Vorteile sich für den Programmierer hier bieten. Am Anfang und auch jetzt fand ich es verwirrend, weil der Buchstabe ja nur symbolische Funktion zu haben scheint. Deswegen frage ich mich auch oft "Sollte ich das genauso handhaben oder eher weglassen". Dass es um ein Event geht, sieht man ja schon daran, dass Event-Listener und das Event change eingesetzt wird.



const checkbox = document.getElementById("remember");

checkbox.addEventListener(
    "change",                               
    function(e) {                           
        console.log(checkbox.value);        
        console.log(checkbox.checked);      
    }                 
);

...zur Frage

Wo liegt der Fehler, dass JavaScript neu hinzugefügte Bilder nicht berücksichtigt?

Hallo,

ich lerne gerade JavaScript.

Um es zu üben, habe ich ein kleines Memoryspiel programmiert. Dabei sollen aus mehreren Bilder per Zufall zehn Bildpaare ausgewählt und auf der Seite angezeigt werden. Als ich heute weiter Bilder eingefügt habe, fiel mir auf, dass die neu hinzugefügten Bilder nicht vom Zufallsgenerator berücksichtigt werden. Leider finde ich den Fehler nicht.

Hier ist mein Code:

const bilder = [
  'Memory/hund1.png',
  'Memory/katze1.png',
  'Memory/blume1.png',
  'Memory/blitz1.png',
  'Memory/hexe.png',
  'Memory/ufo.png',
  'Memory/frau.png',
  'Memory/geist.png',
  'Memory/papagei.png',
  'Memory/schmetterling.png',
  'Memory/taschenuhr.png',
  'Memory/kompass.png',
  'Memory/hasen.png',
  'Memory/springbrunnen.png',
  'Memory/ballon.png',
  'Memory/daenerys.png',
  'Memory/dino.png',
  'Memory/erde.png',
  'Memory/frosch.png',
  'Memory/laub.png',
  'Memory/orange.png',
  'Memory/paar.png',
  'Memory/schloss.png',
  'Memory/teddy.png',
  'Memory/tiger.png',
  'Memory/tropen.png',
  'Memory/wasserfall.png',
  'Memory/biene.png',
  'Memory/mädchen.png',
  'Memory/villa.png',
  'Memory/insel.png',
  'Memory/insel2.png',
  'Memory/wettersymbol.png',
  'Memory/altesauto.png',
  'Memory/ente.png',
  'Memory/kolibri.png',
  'Memory/tinkerbell.png',
  'Memory/fraukatze.png',
  'Memory/vögellaub.png',
  'Memory/sphinx.png',
  'Memory/skulptur.png',
  'Memory/schach.png',
  'Memory/raben.png',
  'Memory/hochhaus.png',
  'Memory/zitronen.png',
  'Memory/lstand.png',
  'Memory/limonade.png',
  'Memory/trinken.png',
  'Memory/hexe2.png',
  'Memory/leuchtturm.png',
  'Memory/leuchtturm2.png',
  'Memory/dänemark.png',
  'Memory/dänemark2.png',
  'Memory/schienen.png',
  'Memory/kuba.png',
  'Memory/havanna.png',
  'Memory/tinkerbell.png',
  'Memory/fraukatze.png',
  'Memory/vögellaub.png',
  'Memory/sphinx.png',
  'Memory/skulptur.png',
  'Memory/schach.png',
  'Memory/raben.png',
  'Memory/hochhaus.png',
  'Memory/zitronen.png',
  'Memory/lstand.png',
  'Memory/limonade.png',
  'Memory/trinken.png',
  'Memory/hexe2.png',
  'Memory/leuchtturm.png',
  'Memory/leuchtturm2.png',
  'Memory/dänemark.png',
  'Memory/dänemark2.png',
  'Memory/schienen.png',
  'Memory/kuba.png',
  'Memory/havanna.png'
];
let karten = [];
let aufgedeckteKarten = 0;
let ersteKarte = null;
let zweiteKarte = null;
let übereinstimmendeKarten = 0;
let spielfeldGesperrt = false;

function kartenMischen() {
  const ausgewählteBilder = bilder.slice(0);
  karten = ausgewählteBilder.sort(() => Math.random() - 0.5);
  karten = karten.slice(0, 10).concat(karten.slice(0, 10));
}

function karteUmdrehen(karte) {
  if (spielfeldGesperrt) return;
  if (karte === ersteKarte) return;

  karte.style.backgroundImage = `url(${karte.dataset.bild})`;

  if (!ersteKarte) {
    ersteKarte = karte;
  }
  else {
    zweiteKarte = karte;
    übereinstimmungPrüfen();
  }
}

function übereinstimmungPrüfen() {
  spielfeldGesperrt = true;

  if (ersteKarte.dataset.bild === zweiteKarte.dataset.bild) {
    übereinstimmendeKarten += 2;

    if (übereinstimmendeKarten === karten.length) {
      alert('Herzlichen Glückwunsch! Du hast gewonnen!');
    }

    kartenDeaktivieren();
  }
  else {
    setTimeout(() => {
      ersteKarte.style.backgroundImage = 'none';
      zweiteKarte.style.backgroundImage = 'none';
      kartenZurücksetzen();
    }, 1000);
  }
}

function kartenDeaktivieren() {
  ersteKarte.removeEventListener('click', () => karteUmdrehen(ersteKarte));
  zweiteKarte.removeEventListener('click', () => karteUmdrehen(zweiteKarte));
  kartenZurücksetzen();
}

function kartenZurücksetzen() {
  [ersteKarte, zweiteKarte] = [null, null];
  spielfeldGesperrt = false;
}

const spielfeld = document.getElementById('spielfeld');
kartenMischen();

for (let i = 0; i < karten.length; i++) {
  const karte = document.createElement('div');
  karte.classList.add('karte');
  karte.dataset.bild = karten[i];
  karte.style.backgroundImage = 'none';
  karte.addEventListener('click', () => karteUmdrehen(karte));
  spielfeld.appendChild(karte);
}

Es wäre schön wenn mir jemand sagt, wo mein Fehler liegt.

Danke

...zur Frage

React JS, was ist <React.StrictMode>?

Das ist ja standardmäßig in der index.js aber was bringt es genau ?
Wenn ich es nicht weglasse dann werden meine Funktionen innerhalb der Komponente doppelt aufgerufen die zwischen dem <React.StrictMode> sind.

Also kann ich es weglassen ?

App JS :

import {React,useEffect,useState} from 'react'
export default function App() {
useEffect(() => {
  // http://api.icndb.com/jokes/random
  const fetchJoke = async()=>(
    await fetch(`http://api.icndb.com/jokes/random`)
    .then(response => response.json())
    .then(data => console.log(data.value.joke))
  )
fetchJoke()
}, [])
  return (
    <div>App</div>
  )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>    
 <App />
<React.StrictMode> 
);

Hab ja auch useEffect Hook benutzt damit es nur 1x beim laden ausgeführt werden soll.

...zur Frage

Java script if Abfrage zur Überprüfung eines leeren Feldes?

Hallo,

im folgenden ist ein Code, der beim Click auf einen Button überprüfen soll, ob das Feld mit dem Namen Mailadresse leer ist. Warum funktioniert Variante 1, aber Variante 2 nicht?

Variante 1

const Buttons=document.getElementById('Buttons'),

Mailadresse=document.getElementsByName('Mailadresse');

Buttons.addEventListener('click',pruefen);

function pruefen () {

if (Mailadresse.value == null) { window.alert ("Bitte alle Pflichtfelder ausfüllen")}

};

Variante 2

const Buttons=document.getElementById('Buttons'),

Mailadresse=document.getElementsByName('Mailadresse');

Buttons.addEventListener('click',pruefen);

function pruefen () {

if (Mailadresse.value == 0) { window.alert ("Bitte alle Pflichtfelder ausfüllen")}

};

Über eine hilfreiche Antwort würde ich mich sehr freuen.

...zur Frage

was ist hier falsch gelaufen?

<!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>Rocket vs Aliens</title>
  <style>
    canvas {
      background-color: gray;
    }
    
  </style>
  <script>
    let KEY_SPACE = false;
    let KEY_UP = false;
    let KEY_DOWN = false;
    let canvas;
    let ctx;
    let backgroundImage = new Image();
    let rocket = {
      x: 100,
      y: 200,
      width: 200,
      height: 80,
      src: 'img/rocket.png'
    };
    let spaceship = {
      x: 500,
      y: 200,
      width: 100,
      height: 40,
      src: 'img/spaceship.png'
    };
    document.onkeydown = function(e) {
      if (e.keyCode ==32) { // Leertaste gedrückt
        KEY_SPACE = true;
      }
      if (e.keyCode ==32) { // unten gedrückt
        KEY_SPACE = true;
      }
    
      if (e.keyCode ==38) { // Oben gedrückt
        KEY_UP = true;
      }
    }
    document.onkeyup = function(e) {
      if (e.keyCode ==32) { // Leertaste losgelassen
        KEY_SPACE = false;
      }
    
      if (e.keyCode ==38) { // oben losgelassen
        KEY_UP = false;
      }
      if (e.keyCode ==40) { // unten losgelassen
        KEY_DOWN = false;
      }
    }
    function startGame () {
      canvas = document.getElementById('canvas');
       ctx = canvas.getContext('2d');
      loadImages();
      draw();
      // calculate
    }
    function loadImages() {
      backgroundImage.src = 'img/background.png';
      rocket.img = new Image();
      rocket.img.src = rocket.src;
      spaceship.img = new Image();
      spaceship.img.src = spaceship.src;
    }
    function draw() {
      ctx.drawImage(backgroundImage, 0, 0);
      ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.widht, rocket.height);
      
      requestAnimationFrame(draw);
    }
  </script>
</head>
<body onload="startGame()">
<canvas id="canvas" width="720" height="480"></canvas>
</body>
</html>

...zur Frage

Wie kann ich mit JavaScript eine einfache Validierung umsetzen?

Hallo zusammne,

ich möchte gerne, dass wenn man in das Inputfield vom Typ email etwas eingibt, eine alert-Funktion aufgerufen wird. Die Funktion soll erst aufgerufen werden, wenn in das Eingabefeld vom Typ email fünf Zeichen eingegben worden sind.

Beispiele:

Maxmu (hier sollte das alert aufgerufen werden) stermann@muster.com, wäre richtig.
ds@d, wäre falsch, da nur vier Zeichen eingegeben worden sind und die Funktion sollte nicht aufgerufen werden.

Hier das Codebeispiel.

HTML:

<!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 rel="Stylesheet" href="style.css">
    <script src="Übungen.js"></script>
  </head>
  <body>
    <form>
      <label for Anmelden>Anmelden</label>
      <input type="email" name="Anmelden" id="Anmelden">
      <label for Password>Password</label>
      <input type="password" name="Password" id="Passwort">
      <button type="button" onclick="Einloggen()">Anmelden</button>
    </form>
  </body>
</html>

JavaScript:

const Anmeldedaten = document.getElementById("Anmelden").innerHTML;

function Einloggen() {
  if (Anmeldedaten.length > 5) {
    alert("Es hat geklappt!");
  }
}

Ich bedanke mich im Voraus bei euch. :)

...zur Frage

Zugriff auf svg Element in HTML gibt immer "null" zurück?

Hallo zusammen,

folgendes Problem:

Ich möchte aus meinem javascript Code zu laufzeit auf meine sonarGrafik.svg zugreifen können um deren Elemente zu manipulieren (oder neue hinzufügen zu können).

So sieht erstmal der ganze HTML Code aus:

<!DOCTYPE html>
<html>
<head>
    <title>Arduino Daten</title>
    <link rel="icon" href="data:,">
    <script src="scripts/script.js"></script>
    <link rel="stylesheet" href="styles/style.css"> 
</head>
<body>
    <object id = "svgObject" data="styles/sonarGrafik.svg" type="image/svg+xml"></object>
</body>
</html>

Der betroffene Teil in meinem javascript Code:

function insertDots(cx, cy) {
    const svgObject = document.getElementById("svgObject");
    console.log(svgObject.contentDocument) // hier erhalte ich in der Console immer "null"


    svgObject.addEventListener("load", function() {
        if (svgObject && svgObject.contentDocument) {
            const sonarSVG = svgObject.contentDocument.getElementById("sonar");
            console.log(sonarSVG);
        }
    });
}

(Die funktion insertDots(cx, cy) wird alle paar sekunden aufgerufen und ich erhalte in der Browser Konsole immer nur null. Dementsprechend ist die if Bedienung darunter auch nie wahr)

In meiner .svg Datei gibt es definitv die id= "sonar":

<svg id="sonar" width="700" height="700" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" fill="rgba(128, 128,   128, 0.25)" />
</svg>

So sieht meine Ordnerstruktur aus:

Website
│   SonarVisuallisierung.html
│
├── scripts
│       script.js
│
└── styles
        style.css
        sonarGrafik.svg

Gibt es irgendwo einen Fehler oder eine andere Möglichkeit auf die Elemente der .svg Datei über das script zuzugreifen? (Den Inhalt der .svg will ich ausgelagert lassen und nicht in das HTML einfügen wegen der Übersichtlichkeit)

Danke für alle Lösungsvorschläge.

...zur Frage

JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

...zur Frage

Spotify API Get Methode Blocked?

Moin, hab mal ne Frage, da ich es einfach nicht hin bekomme. Ich habe vor sowas wie eine Musikwunsch Seite für ein Schul Projekt zu coden. Dafür will ich die Spotify API nutzen, damit man über diese Songs suchen kann. Es kommt aber immer in der Netzwerkanalyse der Fehler NS_BINDING_ABORTED, obwohl mein Access Token korrekt ist. Hier ist meine script.js

const API_ENDPOINT = "https://api.spotify.com/v1/search";
const ACCESS_TOKEN = "your_access_token";

function searchSong() {
    let songName = document.getElementById("song-name").value;

    fetch(`${API_ENDPOINT}?q=${songName}&type=track`, {
        headers: {
            "Authorization": `Bearer ${ACCESS_TOKEN}`
        }
    })
    .then(response => response.json())
    .then(data => {
        let songResults = data.tracks.items;

        if (songResults.length > 0) {
            let songList = document.createElement("ul");

            for (let i = 0; i < songResults.length; i++) {
                let song = songResults[i];

                let songItem = document.createElement("li");
                songItem.innerHTML = `<a href="javascript:void(0)" onclick="selectSong('${song.id}')">${song.name} by ${song.artists[0].name}</a>`;

                songList.appendChild(songItem);
            }

            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "";
            songResultsDiv.appendChild(songList);
        } else {
            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "Sorry, no songs found.";
        }
    })
    .catch(error => {
        const errorMessage = document.getElementById("error-message");
        errorMessage.innerText = error;
    });
}

function selectSong(songId) {
    fetch("db.php", {
        method: "POST",
        body: JSON.stringify({songId: songId}),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert("Song added to the list!");
        } else {
            alert("Error adding song to the list.");
        }
    })
    .catch(error => {
        console.log(error);
    });
}

Hier ist dann noch die Index.html:

 <!DOCTYPE html>
<html>
<head>
    <title>DJ Song Request</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>DJ Song Request</h1>
    <form>
        <label for="song-name">Enter song name:</label>
        <input type="text" id="song-name" name="song-name">
        <button type="submit" onclick="searchSong()">Search</button>
    </form>
    <div id="song-results"></div>
</body>
</html>

Vielleicht kann mir ja jemand helfen, da ich echt nicht mehr weiter weiß, im vorraus schon mal Vielen Dank ;D

...zur Frage

WEBSTORM erkennt .send Funktion nicht?

Bei folgendem Code sind die Methoden .send und .awaitReaction unterstrichen.

"Unresolved function or method send()"

Ich habe discord.js und so schon installiert. Muss man da sonst noch etwas importieren, damit .send usw. funktionieren?

const { Client, MessageEmbed, Intents } = require('discord.js');
const client = new Client({ intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES] });

const TOKEN = 'Mein Token';
const channelId = 'ChannelID'; // Die ID des Textkanals, in dem die Nachrichten erstellt werden sollen

const userGroup = []; // Die Liste der Benutzer, die aufgelistet werden sollen
const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5']; // Die Auswahlmöglichkeiten

let currentIndex = 0; // Aktueller Index der Benutzergruppe

client.on('ready', () => {
    console.log(`Eingeloggt als ${client.user.tag}`);
});

client.on('messageCreate', async (message) => {
    console.log("P - Start des Event-Handlers");
    if (message.author.bot) return;

    if (message.content.startsWith('!start')) {
        console.log("P - !start erkannt");
        if (currentIndex < userGroup.length) {
            const user = await client.users.fetch(userGroup[currentIndex]);

            // Erstelle eine Nachricht mit den Auswahlmöglichkeiten
            const embed = new MessageEmbed() // Hier MessageEmbed verwenden
                .setTitle('Wähle eine Option:')
                .setDescription(options.join('\n'));
            const sentMessage = message.guild.channels.cache.get(channelId);
            await sentMessage.send(embed);
            console.log("P - Nachricht gesendet");
            // Füge Reaktionen hinzu
            for (let i = 0; i < options.length; i++) {
                await sentMessage.react(String(i + 1) + '\u20E3'); // Emoji-Reaktionen (1️⃣, 2️⃣, usw.)
            }

            // Warte auf eine Reaktion des aktuellen Benutzers
            const filter = (reaction, user) => user.id === userGroup[currentIndex];
            const collected = await sentMessage.awaitReactions(filter, { max: 1, time: 60000 }); // 60 Sekunden Zeit zum Reagieren

            if (collected.size === 0) {
                message.guild.channels.cache.get(channelId).send(`${user.tag} hat keine Option ausgewählt.`);
            } else {
                const chosenOption = options[parseInt(collected.first().emoji.name) - 1];

                message.guild.channels.cache.get(channelId).send(`${user.tag} hat "${chosenOption}" ausgewählt.`);
                // Hier kannst du die gewünschte Aktion ausführen, basierend auf der ausgewählten Option
            }

            // Lösche die ursprüngliche Nachricht und die Auswahl-Nachricht
            await message.delete();
            sentMessage.delete();

            currentIndex++; // Zum nächsten Benutzer in der Gruppe wechseln
        } else {
            message.channel.send('Alle Benutzer aus der Gruppe wurden aufgelistet.');
        }
    }
});
console.log('Bot starting');

client.login(TOKEN);

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