ga jadi ga isa konek

GameLogic.js

@@ -1,4 +1,4 @@
-//bagian tempat main ama buat generate game 2d
+// //bagian tempat main ama buat generate game 2d
 var canvas = document.getElementById("game");
 var content = canvas.getContext("2d");
 const Text = document.getElementById("text");
@@ -25,9 +25,9 @@ KepalaKeKanan.src = "image/KepalaHorizontalKanan.png";
 var KepalaKeAtas = new Image();
 KepalaKeAtas.src = "image/KepalaVertikalAtas.png";
 var KepalaKeKiri = new Image();
-KepalaKeKiri.src = "image/KepalaVertikalBawah.png";
+KepalaKeKiri.src = "image/KepalaVertikalBawah.png"; // Asumsi ini adalah Kepala ke KIRI
 var KepalaKeBawah = new Image();
-KepalaKeBawah.src = "image/KepalaHorizontalKiri.png";
+KepalaKeBawah.src = "image/KepalaHorizontalKiri.png"; // Asumsi ini adalah Kepala ke BAWAH
 // ↑ kepala ular
 
 var BadanHori = new Image();
@@ -50,6 +50,7 @@ RandomizeApel();
 
 //mastiin gambar external generate dulu sebelum game start
 KepalaKeKanan.onload = function () {
+    // Memastikan gambar termuat, meskipun fungsi ini tidak melakukan apa-apa selain deklarasi
     function gameLoop() {} 
 };
 
@@ -86,7 +87,8 @@ function resetGame() {
     RandomizeApel();
     UpdateScore(0);
     ModeH = false;
-  GameStart = false;
+    // Penting: Jangan set GameStart=false di sini jika ingin memulai ulang game loop
+    // Kita set GameStart=false saat game over, lalu di sini kita persiapkan UI
 }
 
 //ngatur tombol pas gameover kemana abis di klik
@@ -99,6 +101,8 @@ PlayAgain.addEventListener("click", function () {
 Udahan.addEventListener("click", function () {
     UpDead.style.display = "none";
     resetGame();
+    // Opsional: Redirect ke halaman lain
+    // window.location.href = 'leaderboard.php';
 });
 
 //gameover terus ngatur ular ke setting awal
@@ -118,8 +122,18 @@ function gameLoop() {
 function RandomizeApel() {
     var pembataslebar = Math.floor(canvas.width / grid);
     var pembatastinggi = Math.floor(canvas.height / grid);
+    
+    do {
         Apel.x = Math.floor(Math.random() * pembataslebar) * grid;
         Apel.y = Math.floor(Math.random() * pembatastinggi) * grid;
+        
+        // Pastikan Apel tidak spawn di atas ular
+        var isOverlapSnake = Ular.cells.some(cell => cell.x === Apel.x && cell.y === Apel.y);
+        
+        // Pastikan Apel tidak spawn di atas tembok
+        var isOverlapWall = Tembok.some(bata => bata.x === Apel.x && bata.y === Apel.y);
+
+    } while (isOverlapSnake || isOverlapWall);
 }
 
 //random spawn tembok
@@ -136,19 +150,21 @@ function RandomSpawnWall() {
         TembokX = Math.floor(Math.random() * pembataslebar) * grid;
         TembokY = Math.floor(Math.random() * pembatastinggi) * grid;
 
-    //cek untuk posisi yang mau di kasih tembok ada/tidak ada ularnya
+        // cek untuk posisi yang mau di kasih tembok ada/tidak ada ularnya
         for (var i = 0; i < Ular.cells.length; i++) {
-      if (Ular.cells[i].x === TembokX && Ular.cells[i].y === TembokY) {
+            // Hindari spawn di sekitar kepala ular (misal 5 kotak pertama)
+            if (Math.abs(Ular.cells[i].x - TembokX) <= grid * 5 && Math.abs(Ular.cells[i].y - TembokY) <= grid * 5) {
                 kosong = false;
                 break;
             }
         }
 
-    //tidak memperbolehkan tembok spawn sama dengan apel
+        // tidak memperbolehkan tembok spawn sama dengan apel
         if (TembokX === Apel.x && TembokY === Apel.y) {
             kosong = false;
         }
 
+        // Cek agar tembok tidak menumpuk
         for (var i = 0; i < Tembok.length; i++) {
             if (Tembok[i].x === TembokX && Tembok[i].y === TembokY) {
                 kosong = false;
@@ -159,10 +175,11 @@ function RandomSpawnWall() {
     Tembok.push({ x: TembokX, y: TembokY });
 }
 
-//nambah tembok tiap score kelipatan ... berapa enaknya ya? 😁
+//nambah tembok tiap score kelipatan 
 function PenambahanTembok() {
     if (ModeH) {
-    if (Tembok.length < Math.floor(score / 2)) {
+        // Tambah tembok setiap 2 skor, tapi jangan melebihi batas (misal 15 tembok)
+        if (score > 0 && score % 2 === 0 && Tembok.length < 15 && Tembok.length < score / 2) {
              RandomSpawnWall();
         }
     }
@@ -171,7 +188,10 @@ function PenambahanTembok() {
 //set dan update score
 function UpdateScore(amount) {
     score = amount > 0 ? score + amount : 0;
+    // Highscore hanya di update jika skor > highscore yang TERCATAT LOKAL.
+    // Highscore dari database biasanya diambil saat inisialisasi.
     highscore = score > highscore ? score : highscore; 
+    
     Text.innerHTML =
         "Score: " + score + "<br>Highscore: " + highscore + "<br>Speed: " + speed;
 
@@ -184,7 +204,9 @@ function GameOver() {
     ClearCanvas();
 
     const modePermainan = ModeH ? "Tambahan" : "Normal";
-  if (score >= 0) {
+    
+    // Kirim skor ke server hanya jika skor lebih besar dari 0 (atau sesuai kriteria)
+    if (score > 0) {
         kirimSkorKeServer(score, modePermainan);
     }
     
@@ -201,55 +223,45 @@ function ClearCanvas() {
 //bagian utama:
 //ular makan dan mati pas ketemu badannya
 function IntiGame() {
-  //buat gambarnya bisa keluar
+    // buat gambarnya bisa keluar
     content.drawImage(ApelImage, Apel.x, Apel.y, grid, grid);
+    
+    // Gambar Tembok
     Tembok.forEach(function (bata) {
         content.drawImage(TembokImage, bata.x, bata.y, grid, grid);
     });
 
+    // Gambar Ular
     Ular.cells.forEach(function (cell, index) {
         if (index === 0) {
             // Logika Pemilihan Gambar Kepala Ular
             var posisiKepalaImage;
-      if (Ular.dx === grid) {
+            if (Ular.dx === grid) { // KANAN
-        // KANAN
                 posisiKepalaImage = KepalaKeKanan;
-      } else if (Ular.dx === -grid) {
+            } else if (Ular.dx === -grid) { // KIRI
-        // KIRI
                 posisiKepalaImage = KepalaKeKiri;
-      } else if (Ular.dy === -grid) {
+            } else if (Ular.dy === -grid) { // ATAS
-        // ATAS
+                posisiKepalaImage = KepalaKeAtas; // Perlu dicek, di atas Anda menamakannya KepalaKeBawah?
-        posisiKepalaImage = KepalaKeBawah;
+            } else if (Ular.dy === grid) { // BAWAH
-      } else if (Ular.dy === grid) {
+                posisiKepalaImage = KepalaKeBawah; // Perlu dicek, di atas Anda menamakannya KepalaKeAtas?
-        // BAWAH
-        posisiKepalaImage = KepalaKeAtas;
             } else {
-        // Default, misalnya saat game baru mulai (dx=grid, dy=0, atau default awal)
                 posisiKepalaImage = KepalaKeKanan; 
             }
-
             content.drawImage(posisiKepalaImage, cell.x, cell.y, grid, grid);
         } else {
-      content.drawImage(BadanHori, cell.x, cell.y, grid, grid);
+            // Logika sederhana untuk badan: selalu horizontal
-    }
+            // Catatan: untuk badan vertikal/belokan, perlu logika tambahan, tapi kita ikuti kode asli Anda.
-  });
-
-  //bagian generate ular
-  Ular.cells.forEach(function (cell, index) {
-    if (index === 0) {
-      content.drawImage(KepalaKeKanan, cell.x, cell.y, grid, grid);
-    } else {
             content.drawImage(BadanHori, cell.x, cell.y, grid, grid); 
         }
 
-    //buat pas ular makan Apel
+        // buat pas ular makan Apel (Deteksi tabrakan kepala vs Apel)
-    if (cell.x === Apel.x && cell.y === Apel.y) {
+        if (index === 0 && cell.x === Apel.x && cell.y === Apel.y) {
             Ular.maxCells += 1;
             UpdateScore(1);
             RandomizeApel();
         }
 
-    //tabrak tembok = mati
+        // tabrak tembok = mati (Hanya kepala yang dicek)
         if (index === 0) {
             Tembok.forEach(function (bata) {
                 if (cell.x === bata.x && cell.y === bata.y) {
@@ -258,9 +270,14 @@ function IntiGame() {
             });
         }
 
-    //buat pas ular mati kena badan sendiri
+        // buat pas ular mati kena badan sendiri (Hanya kepala vs sisa badan)
-    for (var i = index + 1; i < Ular.cells.length; i++)
+        if (index === 0) {
-      if (cell.x === Ular.cells[i].x && cell.y === Ular.cells[i].y) GameOver();
+             for (var i = 1; i < Ular.cells.length; i++) { // Mulai dari index 1 (badan)
+                 if (cell.x === Ular.cells[i].x && cell.y === Ular.cells[i].y) {
+                     GameOver();
+                 }
+             }
+        }
     });
 }
 
@@ -269,8 +286,12 @@ function Movement() {
     if (++count < speed) return;
     if (ArahUlar > 0) ArahUlar--;
     count = 0;
+    
+    // Pindahkan kepala
     Ular.x += Ular.dx;
     Ular.y += Ular.dy;
+    
+    // Cek batas layar
     if (
         Ular.x < 0 ||
         Ular.x >= canvas.width ||
@@ -278,7 +299,11 @@ function Movement() {
         Ular.y >= canvas.height
     )
         GameOver();
+        
+    // Tambahkan posisi baru ke sel pertama (Kepala)
     Ular.cells.unshift({ x: Ular.x, y: Ular.y });
+    
+    // Hapus sel terakhir (Ekor)
     if (Ular.cells.length > Ular.maxCells) Ular.cells.pop();
 }
 
@@ -287,7 +312,7 @@ function InputKeyboard() {
     document.addEventListener("keydown", function (e) {
         if (!GameStart) return;
 
-    //jalan buat ular
+        // Key A, D (Kiri/Kanan)
         if (
             ArahUlar == 0 &&
             ((e.code == "KeyA" && Ular.dx === 0) ||
@@ -296,7 +321,9 @@ function InputKeyboard() {
             ArahUlar = 1;
             Ular.dx = e.code === "KeyA" ? -grid : grid;
             Ular.dy = 0;
-    } else if (
+        } 
+        // Key W, S (Atas/Bawah)
+        else if (
             ArahUlar == 0 &&
             ((e.code === "KeyW" && Ular.dy === 0) ||
                 (e.code == "KeyS" && Ular.dy === 0))
@@ -304,7 +331,9 @@ function InputKeyboard() {
             ArahUlar = 1;
             Ular.dy = e.code == "KeyW" ? -grid : grid;
             Ular.dx = 0;
-    } else if (
+        } 
+        // Arrow Up, Down
+        else if (
             ArahUlar == 0 &&
             ((e.code === "ArrowUp" && Ular.dy === 0) ||
                 (e.code == "ArrowDown" && Ular.dy === 0))
@@ -312,7 +341,9 @@ function InputKeyboard() {
             ArahUlar = 1;
             Ular.dy = e.code == "ArrowUp" ? -grid : grid;
             Ular.dx = 0;
-    } else if (
+        } 
+        // Arrow Left, Right
+        else if (
             ArahUlar == 0 &&
             ((e.code === "ArrowLeft" && Ular.dx === 0) ||
                 (e.code == "ArrowRight" && Ular.dx === 0))
@@ -322,6 +353,7 @@ function InputKeyboard() {
             Ular.dy = 0;
         }
 
+        // Key E (Cepat/Kurangi speed), Key Q (Lambat/Tambah speed)
         if (e.code === "KeyE" || e.code == "KeyQ")
             speed =
                 e.code == "KeyE" && speed > 2
@@ -335,6 +367,7 @@ function InputKeyboard() {
 function kirimSkorKeServer(skor, modePermainan) {
     console.log(`Mengirim skor ${skor} (Mode: ${modePermainan}) ke server...`);
 
+    // Ganti 'score.php' sesuai dengan path di server Anda
     fetch('score.php', { 
         method: 'POST',
         headers: {
@@ -354,13 +387,21 @@ function kirimSkorKeServer(skor, modePermainan) {
     .then(data => {
         if (data.status === 'success') {
             console.log('✅ Berhasil:', data.message);
+            // Opsional: Perbarui highscore lokal dengan skor yang baru jika ini highscore
+            if (data.message.includes('Highscore baru')) {
+                 highscore = skor;
+                 UpdateScore(0); // Update tampilan score/highscore
+            }
         } else {
             console.error('❌ Error Server:', data.message);
         }
     })
     .catch((error) => {
         console.error('⚠️ Error Jaringan atau Proses:', error.message);
+        // Tampilkan pesan error ke user jika perlu
+        // alert("Gagal terhubung ke server skor. Pastikan Anda sudah login."); 
     });
 }
+
 InputKeyboard();
 gameLoop();

leaderboard.php

@@ -1,6 +1,6 @@
 <?php
 session_start();
-require_once "koneksi.php";
+require_once "koneksi.php"; // Menggunakan koneksi MySQLi
 
 if (isset($_SESSION['username'])) {
     $nama = $_SESSION['username'];
@@ -10,7 +10,9 @@ if (isset($_SESSION['username'])) {
 
 $score = 0;
 
+// 1. Ambil Skor User yang Login (Untuk Tampilan Individual, jika diperlukan)
 if (!empty($nama)) {
+    // ⚠️ Perlu DITINGKATKAN ke prepared statement untuk keamanan
     $getScore = "SELECT score FROM users WHERE username = '$nama'";
     $resultMe = mysqli_query($koneksi, $getScore);
 
@@ -20,32 +22,63 @@ if (!empty($nama)) {
     }
 }
 
+// 2. Ambil 10 Skor Tertinggi
 $sql = "SELECT username, score FROM users ORDER BY score DESC LIMIT 10";
 $result = mysqli_query($koneksi, $sql);
 $leaderboard = [];
 
 if($result) {
+    // Ambil semua hasil
     $leaderboard = mysqli_fetch_all($result, MYSQLI_ASSOC);
 }
 ?>
 
-
 <!DOCTYPE html>
 <html lang="id">
     <style>
         body {
             background: linear-gradient(to bottom right, #A3D438, #004D40);
-            height: 568px;
+            height: 100vh; /* Menggunakan vh agar mencakup seluruh tinggi layar */
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding-top: 50px;
+            color: white;
+            font-family: sans-serif;
+        }
+        table {
+            border-collapse: collapse;
+            width: 80%;
+            max-width: 600px;
+            margin-top: 20px;
+            background-color: rgba(0, 0, 0, 0.4);
+        }
+        th, td {
+            border: 1px solid #ddd;
+            padding: 12px;
+            text-align: left;
+        }
+        th {
+            background-color: #004D40;
+            color: white;
+            text-transform: uppercase;
+        }
+        tr:nth-child(even) {
+            background-color: rgba(255, 255, 255, 0.1);
         }
     </style>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Leaderboard</title>
-    <link rel="stylesheet" href="">
-    <link rel="stylesheet" href="">
 </head>
 <body>
+    <h1>🥇 Leaderboard Top 10 🥈</h1>
+    <?php if (!empty($nama)): ?>
+        <p style="font-size: 1.2em;">Skor Tertinggi Anda (<?php echo htmlspecialchars($nama); ?>): <strong><?php echo $score; ?> PTS</strong></p>
+    <?php else: ?>
+        <p>Silakan <a href="login.php" style="color: yellow;">login</a> untuk melihat skor Anda.</p>
+    <?php endif; ?>
     <table>
         <thead>
             <tr>
@@ -64,9 +97,7 @@ if($result) {
             <tr>
                 <td><?php echo $peringkat; ?></td>
                 <td><?php echo htmlspecialchars($pemain['username']); ?></td>
-
                 <td><?php echo $pemain['score']; ?> PTS</td>
-                
             </tr>
 
         <?php
@@ -75,7 +106,6 @@ if($result) {
         } else {
             echo '<tr><td colspan="3" style="text-align: center;">Belum ada Pemain</td></tr>';
         }
-        
         ?>
         </tbody>
         

score.php

@@ -1,4 +1,5 @@
 <?php
+session_start();
 require_once 'koneksi.php';
 
 header('Content-Type: application/json');
@@ -9,7 +10,7 @@ if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
     exit;
 }
 
-if (!isset($_SESSION['id_user'])) {
+if (!isset($_SESSION['id_user']) && !isset($_SESSION['username'])) {
     http_response_code(401);
     echo json_encode(['status' => 'error', 'message' => 'Anda harus login untuk menyimpan skor.']);
     exit;
@@ -17,9 +18,7 @@ if (!isset($_SESSION['id_user'])) {
 
 $input = json_decode(file_get_contents('php://input'), true);
 
-$user_id = $_SESSION['id_user'];
 $final_score = (int)($input['score'] ?? 0);
-$game_mode = $input['mode'] ?? 'Normal';
 
 if ($final_score <= 0) {
     http_response_code(400);
@@ -27,24 +26,56 @@ if ($final_score <= 0) {
     exit;
 }
 
-try {
+$user_id = null;
-    $sql = "INSERT INTO scores (id_user, score_value, mode) VALUES (:id_user, :score_value, :mode)";
+if (isset($_SESSION['id_user'])) {
-    $stmt = $pdo->prepare($sql);
+    $user_id = $_SESSION['id_user'];
+} elseif (isset($_SESSION['username'])) {
 
-    $stmt->execute([
+    $username = $_SESSION['username'];
-        ':id_user' => $user_id,
+
-        ':score_value' => $final_score,
+    $getID_sql = "SELECT id_user FROM users WHERE username = '$username'";
-        ':mode' => $game_mode
+    $result_id = mysqli_query($koneksi, $getID_sql);
-    ]);
+    
+    if ($result_id && mysqli_num_rows($result_id) > 0) {
+        $row = mysqli_fetch_assoc($result_id);
+        $user_id = $row['id_user'];
+    }
+}
+
+if (!$user_id) {
+    http_response_code(401);
+    echo json_encode(['status' => 'error', 'message' => 'ID pengguna tidak ditemukan.']);
+    exit;
+}
+
+$sql = "UPDATE users SET score = ? WHERE id_user = ? AND score < ?";
+
+if ($stmt = mysqli_prepare($koneksi, $sql)) {
+    mysqli_stmt_bind_param($stmt, "iii", $final_score, $user_id, $final_score);
+    $exec = mysqli_stmt_execute($stmt);
+
+    if ($exec) {
+        $rows_affected = mysqli_stmt_affected_rows($stmt);
+        
+        if ($rows_affected > 0) {
+            $message = 'Skor berhasil diperbarui. Ini adalah Highscore baru!';
+        } else {
+            $message = 'Skor berhasil dikirim, tetapi skor tidak lebih tinggi dari Highscore sebelumnya.';
+        }
 
         echo json_encode([
             'status' => 'success', 
-        'message' => 'Skor berhasil disimpan.',
+            'message' => $message,
             'skor_terkirim' => $final_score
         ]);
-
+    } else {
-} catch (\PDOException $e) {
         http_response_code(500);
-    echo json_encode(['status' => 'error', 'message' => 'Terjadi kesalahan server saat menyimpan data.']);
+        echo json_encode(['status' => 'error', 'message' => 'Gagal menjalankan kueri update: ' . mysqli_stmt_error($stmt)]);
+    }
+    mysqli_stmt_close($stmt);
+
+} else {
+    http_response_code(500);
+    echo json_encode(['status' => 'error', 'message' => 'Gagal mempersiapkan statement: ' . mysqli_error($koneksi)]);
 }
 ?>