When button id match
<!DOCTYPE html>
<html>
<head>
<title>Match Button Pairs Game</title>
<style>
.btn {
padding: 10px 20px;
margin: 5px;
font-size: 16px;
transition: all 0.3s;
}
.hidden {
visibility: hidden; /* Makes button invisible but keeps its space */
}
.selected {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Match Score: <span id="score">0</span></h2>
<button class="btn" id="btn1" onclick="handleClick('btn1')">Button 1</button>
<button class="btn" id="btn1" onclick="handleClick('btn1')">Button 1</button>
<button class="btn" id="btn2" onclick="handleClick('btn2')">Button 2</button>
<button class="btn" id="btn2" onclick="handleClick('btn2')">Button 2</button>
<script>
let firstSelected = null;
let score = 0;
let matchesFound = 0;
const totalPairs = 2; // Since we have 2 pairs (btn1 and btn2)
function handleClick(btnId) {
const button = event.target;
// Ignore if button is already hidden or is the same as first selection
if (button.classList.contains('hidden') ||
button.classList.contains('selected')) {
return;
}
// If no button is currently selected
if (firstSelected === null) {
firstSelected = button;
button.classList.add('selected');
return;
}
// If we're selecting the second button
button.classList.add('selected');
// Check for match
if (firstSelected.id === button.id) {
// Match found
score += 1;
document.getElementById('score').textContent = score;
matchesFound++;
// Make both buttons invisible
firstSelected.classList.remove('selected');
firstSelected.classList.add('hidden');
button.classList.remove('selected');
button.classList.add('hidden');
// Reset selection
firstSelected = null;
// Check if all pairs found
if (matchesFound === totalPairs) {
setTimeout(() => {
alert(`Game Over! Your score: ${score}`);
resetGame();
}, 500);
}
} else {
// No match
setTimeout(() => {
firstSelected.classList.remove('selected');
button.classList.remove('selected');
firstSelected = null;
}, 1000);
}
}
function resetGame() {
// Reset all buttons (make them visible again)
document.querySelectorAll('.btn').forEach(btn => {
btn.classList.remove('hidden', 'selected');
});
firstSelected = null;
matchesFound = 0;
score = 0;
document.getElementById('score').textContent = score;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Button Pair Match</title>
</head>
<body>
<h2>Score: <span id="score">0</span></h2>
<button onclick="pressButton('A')">Button A</button>
<button onclick="pressButton('B')">Button B</button>
<p id="message"></p>
<script>
// Boolean flags for button presses
var buttonA = false;
var buttonB = false;
var score = 0;
function pressButton(button) {
// Set the appropriate boolean to true
if (button == 'A') {
buttonA = true;
} else if (button == 'B') {
buttonB = true;
}
// Check if both buttons are pressed (regardless of order)
if (buttonA && buttonB) {
score++;
document.getElementById('score').innerText = score;
document.getElementById('message').innerText = "✅ Match! Score +1";
// Reset for next round
buttonA = false;
buttonB = false;
} else {
document.getElementById('message').innerText = "Try again...";
}
}
</script>
</body>
</html>
Other code
<script>
let firstBtn = null;
function clickBtn(btn) {
// First click - hide button
if (firstBtn === null) {
firstBtn = btn;
btn.hidden = true;
return;
}
// Check for matches
if (firstBtn.textContent === 'A' && btn.textContent === 'Apple') {
btn.hidden = true;
}
else if (firstBtn.textContent === 'Apple' && btn.textContent === 'A') {
btn.hidden = true;
}
else if (firstBtn.textContent === 'B' && btn.textContent === 'Ball') {
btn.hidden = true;
}
else if (firstBtn.textContent === 'Ball' && btn.textContent === 'B') {
btn.hidden = true;
}
// Wrong match - show reset
else {
resetBtn.hidden = false;
}
firstBtn = null;
}
function resetGame() {
A.hidden = false;
Apple.hidden = false;
B.hidden = false;
Ball.hidden = false;
resetBtn.hidden = true;
}
</script>
<div style="position:relative; width:200px;">
<button id="A" onclick="clickBtn(this)">A</button>
<button id="Apple" onclick="clickBtn(this)">Apple</button>
<button id="B" onclick="clickBtn(this)">B</button>
<button id="Ball" onclick="clickBtn(this)">Ball</button>
<button id="resetBtn" onclick="resetGame()" hidden
style="position:absolute; top:0; left:0; width:100%; height:100%;">
TRY AGAIN
</button>
</div>
Comments
Post a Comment