adding score
This commit is contained in:
parent
8f5b89a32e
commit
2f29578cf2
@ -243,7 +243,7 @@ body {
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.gameboard {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
// --- KONFIGURASI AUDIO & DOM ---
|
||||
// --- AUDIO CONFIG ---
|
||||
const bgMusic = document.getElementById("bgMusic");
|
||||
const sfxClick = document.getElementById("sfxClick");
|
||||
const sfxMatch = document.getElementById("sfxMatch");
|
||||
@ -7,21 +7,26 @@ const sfxCountdown = document.getElementById("sfxCountdown");
|
||||
const sfxWin = document.getElementById("sfxWin");
|
||||
const sfxLose = document.getElementById("sfxLose");
|
||||
const toggleBtn = document.getElementById("toggleMusic");
|
||||
const overlay = document.getElementById("countdown-overlay");
|
||||
const countdownOverlay = document.getElementById("countdown-overlay");
|
||||
|
||||
let musicMuted = true;
|
||||
|
||||
// AUTO-PLAY PADA INTERAKSI PERTAMA
|
||||
function initAudio() {
|
||||
function playSFX(audio) {
|
||||
if(!musicMuted) {
|
||||
audio.currentTime = 0;
|
||||
audio.play().catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
// Interaksi pertama untuk aktifkan suara
|
||||
document.addEventListener('click', function initAudio() {
|
||||
if(musicMuted) {
|
||||
bgMusic.play().catch(() => {});
|
||||
bgMusic.volume = 0.5;
|
||||
toggleBtn.textContent = "🔊";
|
||||
musicMuted = false;
|
||||
toggleBtn.textContent = "🔊";
|
||||
bgMusic.play().catch(() => {});
|
||||
document.removeEventListener('click', initAudio);
|
||||
}
|
||||
}
|
||||
document.addEventListener('click', initAudio);
|
||||
});
|
||||
|
||||
toggleBtn.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
@ -35,17 +40,13 @@ toggleBtn.onclick = (e) => {
|
||||
musicMuted = !musicMuted;
|
||||
};
|
||||
|
||||
function playSFX(audio) {
|
||||
if(!musicMuted) {
|
||||
audio.currentTime = 0;
|
||||
audio.play().catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
// --- LOGIKA GAME ASLI ---
|
||||
// --- GAME LOGIC ---
|
||||
// UBAHAN DISINI: Hanya pakai 6 Gambar (Fruit 1-6)
|
||||
// 6 Gambar x 2 = 12 Kartu.
|
||||
// Karena CSS kamu 4 kolom, maka otomatis jadi: 4 Samping x 3 Bawah.
|
||||
const images = [
|
||||
"images/fruit1.png", "images/fruit2.png", "images/fruit3.png",
|
||||
"images/fruit4.png", "images/fruit5.png", "images/fruit6.png",
|
||||
"images/fruit4.png", "images/fruit5.png", "images/fruit6.png"
|
||||
];
|
||||
|
||||
let cards = [...images, ...images];
|
||||
@ -56,33 +57,57 @@ let moves = 0;
|
||||
let score = 0;
|
||||
let countdown;
|
||||
let combo = 1;
|
||||
let lastMatchTime = 0;
|
||||
let pendingMatch = false;
|
||||
let lastMatchTime = 0;
|
||||
|
||||
function shuffleArray(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
function showComboPopup(targetCard, combo, bonus) {
|
||||
const popup = document.createElement("div");
|
||||
popup.className = "combo-popup";
|
||||
popup.innerHTML = `COMBO X${combo}<br><span style="font-size:14px;">+${bonus} Bonus</span>`;
|
||||
const rect = targetCard.getBoundingClientRect();
|
||||
popup.style.left = rect.left + rect.width / 2 + "px";
|
||||
popup.style.top = rect.top + "px";
|
||||
popup.style.position = "fixed";
|
||||
document.body.appendChild(popup);
|
||||
setTimeout(() => popup.remove(), 1500);
|
||||
}
|
||||
return array;
|
||||
|
||||
function shuffleDistant(cards, minDistance = 4) {
|
||||
let valid = false;
|
||||
let result;
|
||||
while (!valid) {
|
||||
result = [...cards].sort(() => Math.random() - 0.5);
|
||||
valid = true;
|
||||
const checked = new Set();
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
const value = result[i];
|
||||
if (checked.has(value)) continue;
|
||||
checked.add(value);
|
||||
const firstIndex = result.indexOf(value);
|
||||
const lastIndex = result.lastIndexOf(value);
|
||||
const distance = Math.abs(lastIndex - firstIndex);
|
||||
if (distance < minDistance) { valid = false; break; }
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function runCountdown(callback) {
|
||||
let count = 3;
|
||||
overlay.style.display = "flex";
|
||||
overlay.innerHTML = `<span class="pulse-anim">${count}</span>`;
|
||||
countdownOverlay.style.display = "flex";
|
||||
countdownOverlay.innerHTML = `<span class="pulse-anim">${count}</span>`;
|
||||
playSFX(sfxCountdown);
|
||||
|
||||
let cdTimer = setInterval(() => {
|
||||
count--;
|
||||
if (count > 0) {
|
||||
overlay.innerHTML = `<span class="pulse-anim">${count}</span>`;
|
||||
countdownOverlay.innerHTML = `<span class="pulse-anim">${count}</span>`;
|
||||
playSFX(sfxCountdown);
|
||||
} else if (count === 0) {
|
||||
overlay.innerHTML = `<span class="pulse-anim">GO!</span>`;
|
||||
countdownOverlay.innerHTML = `<span class="pulse-anim">GO!</span>`;
|
||||
} else {
|
||||
clearInterval(cdTimer);
|
||||
overlay.style.display = "none";
|
||||
countdownOverlay.style.display = "none";
|
||||
callback();
|
||||
}
|
||||
}, 1000);
|
||||
@ -94,7 +119,7 @@ function startTimer() {
|
||||
document.getElementById("timer").textContent = --time;
|
||||
if (time <= 0) {
|
||||
clearInterval(countdown);
|
||||
showEndScreen(false); // Kalah
|
||||
showEndScreen(false);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
@ -102,21 +127,20 @@ function startTimer() {
|
||||
function showEndScreen(isWin) {
|
||||
clearInterval(countdown);
|
||||
bgMusic.pause();
|
||||
|
||||
if(isWin) playSFX(sfxWin); else playSFX(sfxLose);
|
||||
|
||||
document.getElementById("endTitle").textContent = isWin ? "🎉 Selamat!" : "⏰ Waktu Habis!";
|
||||
document.getElementById("endMsg").textContent = isWin ? "Anda berhasil menyelesaikan permainan!" : "Coba lagi lain kali!";
|
||||
|
||||
let baseScore = score;
|
||||
let timeBonus = time * 5;
|
||||
let moveBonus = Math.max(0, 200 - moves * 10);
|
||||
let timeBonus = isWin ? time * 5 : 0;
|
||||
let moveBonus = isWin ? Math.max(0, 200 - moves * 10) : 0;
|
||||
let total = baseScore + timeBonus + moveBonus;
|
||||
|
||||
document.getElementById("baseScoreEnd").textContent = baseScore;
|
||||
document.getElementById("timeBonusEnd").textContent = "+" + (isWin ? timeBonus : 0);
|
||||
document.getElementById("moveBonusEnd").textContent = "+" + (isWin ? moveBonus : 0);
|
||||
document.getElementById("totalScoreEnd").textContent = isWin ? total : baseScore;
|
||||
document.getElementById("timeBonusEnd").textContent = "+" + timeBonus;
|
||||
document.getElementById("moveBonusEnd").textContent = "+" + moveBonus;
|
||||
document.getElementById("totalScoreEnd").textContent = total;
|
||||
document.getElementById("endScreen").style.display = "flex";
|
||||
}
|
||||
|
||||
@ -132,8 +156,8 @@ function flipCard(card) {
|
||||
if (flipped.length === 2) {
|
||||
moves++;
|
||||
document.getElementById("moves").textContent = moves;
|
||||
let img1 = flipped[0].querySelector(".back img").src;
|
||||
let img2 = flipped[1].querySelector(".back img").src;
|
||||
let img1 = flipped[0].querySelector("img").src;
|
||||
let img2 = flipped[1].querySelector("img").src;
|
||||
|
||||
if (img1 === img2) {
|
||||
playSFX(sfxMatch);
|
||||
@ -142,18 +166,20 @@ function flipCard(card) {
|
||||
else {
|
||||
if (now - lastMatchTime <= 3000) {
|
||||
combo++;
|
||||
score += (10 * combo);
|
||||
document.getElementById("score").textContent = score;
|
||||
} else { combo = 1; }
|
||||
let comboBonus = combo * 10;
|
||||
score += comboBonus;
|
||||
showComboPopup(flipped[0], combo, comboBonus);
|
||||
} else combo = 1;
|
||||
}
|
||||
lastMatchTime = now;
|
||||
flipped.forEach(c => c.classList.add("matched"));
|
||||
score += 50;
|
||||
document.getElementById("score").textContent = score;
|
||||
time += 5;
|
||||
document.getElementById("timer").textContent = time;
|
||||
flipped = [];
|
||||
if (document.querySelectorAll(".matched").length === cards.length) {
|
||||
setTimeout(() => showEndScreen(true), 600);
|
||||
setTimeout(() => showEndScreen(true), 500);
|
||||
}
|
||||
} else {
|
||||
playSFX(sfxWrong);
|
||||
@ -171,9 +197,8 @@ function startGame() {
|
||||
board.innerHTML = "";
|
||||
|
||||
runCountdown(() => {
|
||||
if(!musicMuted) bgMusic.play();
|
||||
const shuffledCards = shuffleArray([...cards]);
|
||||
shuffledCards.forEach(image => {
|
||||
if(!musicMuted) bgMusic.play().catch(() => {});
|
||||
shuffleDistant(cards, 4).forEach(image => {
|
||||
const card = document.createElement("div");
|
||||
card.className = "card";
|
||||
card.innerHTML = `<div class="inner"><div class="front">?</div><div class="back"><img src="${image}"></div></div>`;
|
||||
@ -181,7 +206,7 @@ function startGame() {
|
||||
board.appendChild(card);
|
||||
});
|
||||
time = 60; moves = 0; score = 0; combo = 1;
|
||||
timerStarted = false;
|
||||
pendingMatch = false; flipped = []; timerStarted = false;
|
||||
document.getElementById("timer").textContent = time;
|
||||
document.getElementById("moves").textContent = moves;
|
||||
document.getElementById("score").textContent = score;
|
||||
|
||||
@ -13,7 +13,7 @@ $user = $_SESSION['user'];
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Memory Card Premium</title>
|
||||
<title>Memory Card Premium 3x4</title>
|
||||
<link rel="stylesheet" href="assets/gameboard-easy.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -68,7 +68,7 @@ $roleIcon = ($roleRaw === 'admin') ? '👑' : '🎮';
|
||||
|
||||
<button class="stage-btn" onclick="selectStage('hard')">
|
||||
<span class="icon">😤</span>
|
||||
<h3>Hard Mode</h3>
|
||||
<h3>Hards Mode</h3>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
30
score.php
Normal file
30
score.php
Normal file
@ -0,0 +1,30 @@
|
||||
<?php
|
||||
session_start();
|
||||
include 'Config.php'; // Pastikan koneksi database benar
|
||||
|
||||
// Kita cek apakah $_SESSION['user'] ada (Sama persis kayak di Mainboard)
|
||||
// Dan cek apakah ada skor yang dikirim
|
||||
if (isset($_SESSION['user']) && isset($_POST['score'])) {
|
||||
|
||||
// Ambil data user dari session (Array)
|
||||
$userData = $_SESSION['user'];
|
||||
|
||||
// Ambil ID dari dalam array itu.
|
||||
// (Biasanya key-nya 'id' kalau dari database, sesuaikan jika kamu pakai 'user_id')
|
||||
$user_id = $userData['id'];
|
||||
|
||||
$score = intval($_POST['score']);
|
||||
|
||||
// Masukkan ke database
|
||||
$stmt = $conn->prepare("INSERT INTO scores (user_id, score) VALUES (?, ?)");
|
||||
$stmt->bind_param("ii", $user_id, $score);
|
||||
|
||||
if ($stmt->execute()) {
|
||||
echo "Berhasil simpan skor untuk ID: " . $user_id;
|
||||
} else {
|
||||
echo "Gagal: " . $conn->error;
|
||||
}
|
||||
} else {
|
||||
echo "Error: Belum login atau Data Session tidak sesuai.";
|
||||
}
|
||||
?>
|
||||
Loading…
x
Reference in New Issue
Block a user