Pair game restart button dee
<!DOCTYPE html>
<html>
<head>
<title>Button Matching Game</title>
<style>
button {
padding: 20px 40px;
font-size: 24px;
margin: 15px;
cursor: pointer;
border-radius: 10px;
border: none;
transition: opacity 0.3s;
}
#A, #B { background-color: #4CAF50; color: white; }
#Apple, #Ball { background-color: #2196F3; color: white; }
#message {
font-size: 24px;
margin: 20px;
min-height: 30px;
color: #FF5722;
}
#restart {
background-color: #FF9800;
color: white;
padding: 15px 30px;
font-size: 20px;
margin-top: 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.matched {
visibility: hidden;
}
</style>
</head>
<body>
<h1>Button Matching Game</h1>
<div id="buttons">
<button id="A">A</button>
<button id="Apple">🍎</button>
<button id="B">B</button>
<button id="Ball">🏀</button>
</div>
<p>Matches: <span id="score">0</span>/2</p>
<p id="message">Click a button to start matching!</p>
<button id="restart">Restart Game</button>
<script>
// Game variables
let score = 0;
let firstButton = null;
let isChecking = false;
const pairs = {
"A": "Apple",
"Apple": "A",
"B": "Ball",
"Ball": "B"
};
// Handle button clicks
function handleClick(clickedButton) {
if (clickedButton.classList.contains('matched') || isChecking) return;
if (!firstButton) {
firstButton = clickedButton;
clickedButton.style.opacity = "0"; // Completely invisible when selected
document.getElementById("message").textContent = "Now click its match!";
return;
}
isChecking = true;
clickedButton.style.opacity = "0"; // Completely invisible when selected
setTimeout(() => {
if (pairs[firstButton.id] === clickedButton.id) {
// Correct match - keep hidden
score++;
document.getElementById("score").textContent = score;
firstButton.classList.add('matched');
clickedButton.classList.add('matched');
document.getElementById("message").textContent = "Correct match!";
if (score === 2) {
document.getElementById("message").textContent = "You won! All matches found!";
}
} else {
// Incorrect match - make visible again
document.getElementById("message").textContent = "Wrong match! Try again!";
firstButton.style.opacity = "1";
clickedButton.style.opacity = "1";
}
firstButton = null;
isChecking = false;
}, 300);
}
// Reset game
function resetGame() {
score = 0;
firstButton = null;
isChecking = false;
document.getElementById("score").textContent = "0";
document.getElementById("message").textContent = "Click a button to start matching!";
const buttons = document.querySelectorAll("#buttons button");
buttons.forEach(button => {
button.classList.remove('matched');
button.style.opacity = "1";
button.style.visibility = "visible";
});
}
// Set up event listeners
document.getElementById("A").onclick = function() { handleClick(this); };
document.getElementById("Apple").onclick = function() { handleClick(this); };
document.getElementById("B").onclick = function() { handleClick(this); };
document.getElementById("Ball").onclick = function() { handleClick(this); };
document.getElementById("restart").onclick = resetGame;
</script>
</body>
</html>
Comments
Post a Comment