Frage an JavaScript Entwickler?

Ich entwickel gerade ein Spiel und brauchte gerade bisschen Hilfe von ChatGPT und ich verstehe diese Funktion nicht. Bzw. ich verste die If Abfrage hier nicht. Ich saß gestern schon an dieser Funktion und verstehe es einfach nicht. Ich habe fast geweint.

Ich bin dabei ein Ping Pong Spiel zu verstehen.

 // Event-Listener für Mausbewegungen auf dem Dokument
  document.addEventListener("mousemove", function(event) {
    // Die Mausposition relativ zum Spielfeld abrufen
     const mouseY = event.clientY - gameArea.getBoundingClientRect().top;
    // Begrenzen Sie die Spieler-Schlägerbewegung innerhalb des Spielfelds
    if (mouseY >= 0 && mouseY <= gameArea.clientHeight - playerPaddle.clientHeight ) {
      // Aktualisieren Sie die Position des Spieler-Schlägers basierend auf der Mausposition
      playerPaddle.style.top = mouseY + "px";
    }
  });

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

event.clientY ist der Abstand zwischen Mausposition und oberen Rand der gameArea.

gameArea.getBoundingClientRect().top gibt die Information über die Länge zwischen oberen und unteren Rand der gameArea.

event.clientY - gameArea.getBoundingClientRect().top müsste dann eine negative Zahl, also im Minus Bereich ergeben.

Da verstehe ich nicht, wie die If Abfrage dann funktioniert.

 if (mouseY >= 0 && mouseY <= gameArea.clientHeight - playerPaddle.clientHeight ) {
  
    playerPaddle.style.top = mouseY + "px";
    }

Weil mouseY, also die constante , ist immer kleiner als 0, wenn sie sich innerhalb der gamerArea befindet und da sie kleiner als null ist, wie kann es sein, dass der playerPaddle die Maus verfolgt im Spiel. Also wie kann es sein, dass die If Abfrage funktioniert in dem Fall.

Ich verstehe es einfach nicht, bin ich zu dumm dafür?

HTML, Webseite, JavaScript, Code, Programmiersprache, Webentwicklung
PHP-Login Fehler?

Guten Tag,

Ich habe einen Fehler beim einloggen in mein Loginsystem mit PHP. Ich kann user registrieren, also der username und der password_hash werden richtig in der DB gespeichert. Wenn ich mich aber mit einem bestehenden user der in der Datenbank existiert anmelden möchte, klappt das nicht und es kommt diese Fehlermeldung:

Fehlermeldung Beginn:

Warning: Trying to access array offset on value of type bool in C:\xampp\htdocs\login.php on line 16

Anmeldung fehlgeschlagen, versuche es erneut.

Fehlermeldung Ende.

Mein PHP register Script:

<?php

// Datenbankverbindung

include ('connection.php');

// Benutzereingabe aus Formular

$username = $_POST['username'];

$password = $_POST['password'];

// Das Passwort hashen

$hashedPassword = password_hash($password, PASSWORD_BCRYPT);

// SQL-Abfrage, um den Benutzer in der Datenbank zu speichern

$sql = "INSERT INTO users (username, password_hash) VALUES (?, ?)";

$stmt = $conn->prepare($sql);

$stmt->execute([$username, $hashedPassword]);

// Erfolgsmeldung oder Weiterleitung zur Anmeldeseite

header('Location: login.html');

?>

Mein PHP login Script:

<?php

// Datenbankverbindung

include ('connection.php');

// Benutzereingabe aus Formular

$username = $_POST['username'];

$password = $_POST['password'];

// SQL-Abfrage, um das gespeicherte Passwort abzurufen

$sql = "SELECT password_hash FROM users WHERE username = ?";

$stmt = $conn->prepare($sql);

$stmt->execute([$username]);

$row = $stmt->fetch();

// Überprüfen, ob das eingegebene Passwort korrekt ist

if ($row && password_verify($password, $row['password_hash'])) {

    // Anmeldung erfolgreich, führe die notwendigen Aktionen aus

    // z.B., setze eine Sitzung und leite den Benutzer weiter

    session_start();

    header('Location: index.html');

} else {

    echo "Anmeldung fehlgeschlagen, versuche es erneut.";

}

?>

Wäre cool wenn mir jemand bei diesem Problem weiterhelfen könnte, bin noch nicht so fit in dieser Thematik.

SQL, HTML, Webseite, Datenbank, MySQL, PHP, Programmiersprache, Webentwicklung
HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Programmiersprache, Webdesign, Webentwicklung

Meistgelesene Beiträge zum Thema Webentwicklung