Claude ✅ when 2 different Aand B click then counter start
<!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>
<!DOCTYPE html>
<html>
<head>
<title>Button Match Game</title>
<style>
button { padding: 10px 20px; font-size: 16px; margin: 10px; }
#matchImage { display: none; margin: 20px; }
</style>
</head>
<body>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<img src="success.jpg" id="matchImage" alt="Success!">
<button id="resetBtn">Restart Game</button>
<script>
// AS2-style variables
btn1Clicked = false;
btn2Clicked = false;
matchImage = document.getElementById("matchImage");
// AS2-style button functions
btn1 = document.getElementById("btn1");
btn2 = document.getElementById("btn2");
resetBtn = document.getElementById("resetBtn");
btn1.onRelease = function() {
btn1Clicked = true;
checkMatch();
};
btn2.onRelease = function() {
btn2Clicked = true;
checkMatch();
};
resetBtn.onRelease = function() {
btn1Clicked = btn2Clicked = false;
matchImage.style.display = "none";
};
// AS2-style match checking
function checkMatch() {
if(btn1Clicked && btn2Clicked) {
matchImage.style.display = "block";
}
}
// Event listeners (simulating AS2)
btn1.addEventListener("click", btn1.onRelease);
btn2.addEventListener("click", btn2.onRelease);
resetBtn.addEventListener("click", resetBtn.onRelease);
</script>
</body>
</html>
Other code
<!DOCTYPE html>
<html>
<head>
<title>Button Match Game</title>
<style>
button { padding: 10px 20px; font-size: 16px; margin: 10px; }
#matchImage { display: none; margin: 20px; width: 100px; }
</style>
</head>
<body>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<img src="success.png" id="matchImage" alt="Success Image">
<button id="resetBtn">Restart</button>
<script>
// AS2-style variables
Btn1Clicked = false;
Btn2Clicked = false;
matchImage = document.getElementById("matchImage");
// AS2-style button objects
btn1 = document.getElementById("btn1");
btn2 = document.getElementById("btn2");
resetBtn = document.getElementById("resetBtn");
// AS2-style button functions
btn1.onRelease = function() {
Btn1Clicked = true;
checkMatch();
};
btn2.onRelease = function() {
Btn2Clicked = true;
checkMatch();
};
// AS2-style match check with your exact condition
function checkMatch() {
if(Btn1Clicked == true && Btn2Clicked == true) {
matchImage.style.display = "block";
}
}
// AS2-style reset function
resetBtn.onRelease = function() {
Btn1Clicked = false;
Btn2Clicked = false;
matchImage.style.display = "none";
};
// Simulate AS2 event handling
btn1.addEventListener("click", btn1.onRelease);
btn2.addEventListener("click", btn2.onRelease);
resetBtn.addEventListener("click", resetBtn.onRelease);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Button State Game</title>
<style>
button { padding: 10px 20px; font-size: 16px; margin: 10px; }
#matchImage { display: none; margin: 20px; width: 100px; }
#statusBox {
padding: 10px;
margin: 10px;
width: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<br>
<img src="success.png" id="matchImage" alt="Success Image">
<br>
<input type="text" id="statusBox" readonly>
<br>
<button id="resetBtn">Restart</button>
<script>
// AS2-style variables
Btn1Clicked = false;
Btn2Clicked = false;
matchImage = document.getElementById("matchImage");
statusBox = document.getElementById("statusBox");
// AS2-style button objects
btn1 = document.getElementById("btn1");
btn2 = document.getElementById("btn2");
resetBtn = document.getElementById("resetBtn");
// Update status display
function updateStatus() {
statusBox.value = "Button 1: " + Btn1Clicked + "\nButton 2: " + Btn2Clicked;
}
// AS2-style button functions
btn1.onRelease = function() {
Btn1Clicked = true;
updateStatus();
checkMatch();
};
btn2.onRelease = function() {
Btn2Clicked = true;
updateStatus();
checkMatch();
};
// Your exact condition check
function checkMatch() {
if(Btn1Clicked == true && Btn2Clicked == true) {
matchImage.style.display = "block";
} else {
matchImage.style.display = "none";
}
}
// AS2-style reset function
resetBtn.onRelease = function() {
Btn1Clicked = false;
Btn2Clicked = false;
matchImage.style.display = "none";
updateStatus();
};
// Simulate AS2 event handling
btn1.addEventListener("click", btn1.onRelease);
btn2.addEventListener("click", btn2.onRelease);
resetBtn.addEventListener("click", resetBtn.onRelease);
// Initialize status
updateStatus();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Button Match Game</title>
<style>
button {
padding: 12px 24px;
font-size: 18px;
margin: 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#matchImage {
display: none;
margin: 20px;
width: 150px;
height: 150px;
border: 3px solid #4CAF50;
border-radius: 8px;
}
#statusBox {
padding: 12px;
margin: 15px;
width: 250px;
border: 2px solid #4CAF50;
border-radius: 4px;
font-family: Arial;
font-size: 16px;
}
#resetBtn {
background-color: #f44336;
}
body {
text-align: center;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Button Match Game</h1>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<br><br>
<!-- Success image (green checkmark from placeholder) -->
<img src="https://cdn.pixabay.com/photo/2016/03/31/14/37/check-mark-1292787_640.png"
id="matchImage"
alt="Success Image">
<br>
<input type="text" id="statusBox" readonly placeholder="Button states will appear here">
<br><br>
<button id="resetBtn">Reset Game</button>
<script>
// Game variables
Btn1Clicked = false;
Btn2Clicked = false;
matchImage = document.getElementById("matchImage");
statusBox = document.getElementById("statusBox");
// Button elements
btn1 = document.getElementById("btn1");
btn2 = document.getElementById("btn2");
resetBtn = document.getElementById("resetBtn");
// Update the status display
function updateStatus() {
statusBox.value = "Button 1: " + (Btn1Clicked ? "CLICKED" : "Not clicked") +
"\nButton 2: " + (Btn2Clicked ? "CLICKED" : "Not clicked");
}
// Check for match
function checkMatch() {
if(Btn1Clicked == true && Btn2Clicked == true) {
matchImage.style.display = "block";
} else {
matchImage.style.display = "none";
}
}
// Button click handlers
btn1.onclick = function() {
Btn1Clicked = true;
updateStatus();
checkMatch();
};
btn2.onclick = function() {
Btn2Clicked = true;
updateStatus();
checkMatch();
};
// Reset game
resetBtn.onclick = function() {
Btn1Clicked = false;
Btn2Clicked = false;
matchImage.style.display = "none";
updateStatus();
};
// Initialize
updateStatus();
</script>
</body>
</html>
OTHER CODE
<button id="Btn1">Button 1</button>
<button id="Btn2">Button 2</button>
<button id="ResetBtn">Restart</button>
<img src="https://cdn.pixabay.com/photo/2016/03/31/14/37/check-mark-1292787_640.png"" id="matchImage" alt="Success Image">
<br>
<div id="TextBox1"></div>
<div id="TextBox2"></div>
<br><br>
<style>
button { padding: 10px 20px; font-size: 16px; margin: 10px; }
#matchImage { display: none; margin: 20px; width: 100px; }
#TextBox1{
padding: 10px;
margin: 10px;
width: 200px;
background-color:Khaki;
color:Red;
border-radius: 8px;
font-size: 22px;
line-height: 22px;
border:5px solid Green;
}
#TextBox2{
padding: 10px;
margin: 10px;
width: 200px;
background-color:Khaki;
color:Red;
border-radius: 8px;
font-size: 22px;
line-height: 22px;
border:5px solid Green;
}
</style>
<script>
var Btn1Clicked = false;
var Btn2Clicked = false;
var Score = 0;
TextBox1.innerHTML = "";
matchImage.style.display = "none";
Btn1.onclick = function(){
Btn1Clicked = true;
var clickedId = event.target.id;
TextBox1.innerHTML += clickedId;
checkMatch();
};
Btn2.onclick = function() {
var clickedId = event.target.id;
TextBox1.innerHTML += clickedId;
Btn2Clicked = true;
checkMatch();
};
// AS2-style match check with your exact condition
function checkMatch() {
if(Btn1Clicked == true && Btn2Clicked == true) {
Score++;
matchImage.style.display = "block";
var clickedId = event.target.id;
TextBox1.innerHTML += clickedId
TextBox2.innerHTML = Score
Btn1.style.visibility = "hidden";
Btn2.style.visibility = "hidden";
}
}
// AS2-style reset function
ResetBtn.onclick = function() {
Btn1Clicked = false;
Btn2Clicked = false;
matchImage.style.display = "none";
Btn1.style.visibility = "visible";
Btn2.style.visibility = "visible";
TextBox1.innerHTML = "";
TextBox2.innerHTML = Score = 0;
};
</script>
OTHER CODE
<button id="Btn1">Button 1</button>
<button id="Btn2">Button 2</button>
<button id="Btn3">Button 3</button>
<button id="Btn4">Button 4</button>
<button id="ResetBtn">Restart</button>
<img src="https://cdn.pixabay.com/photo/2016/03/31/14/37/check-mark-1292787_640.png" id="matchImage" alt="Success Image">
<img src="https://cdn.pixabay.com/photo/2014/03/25/15/19/cross-296507_640.png" id="wrongImage" alt="Wrong Match" style="display:none; width:100px;">
<br>
<div id="TextBox1"></div>
<div id="TextBox2"></div>
<br><br>
<style>
button {
padding: 10px 20px;
font-size: 16px;
margin: 10px;
cursor: pointer;
transition: background-color 0.3s;
}
#matchImage, #wrongImage {
display: none;
margin: 20px;
width: 100px;
}
#TextBox1, #TextBox2 {
padding: 10px;
margin: 10px;
width: 200px;
background-color: Khaki;
color: Red;
border-radius: 8px;
font-size: 22px;
line-height: 22px;
border: 5px solid Green;
min-height: 30px;
}
.selected {
background-color: yellow !important;
}
</style>
<script>
// Game state
var gameState = {
firstSelection: null,
pair1Matched: false,
pair2Matched: false,
Score: 0
};
// Initialize game
function initGame() {
TextBox1.innerHTML = "";
TextBox2.innerHTML = "Score: " + gameState.Score;
matchImage.style.display = "none";
wrongImage.style.display = "none";
// Reset all buttons
[Btn1, Btn2, Btn3, Btn4].forEach(btn => {
btn.style.visibility = "visible";
btn.classList.remove("selected");
});
gameState.firstSelection = null;
}
// Reset button selections
function resetSelections() {
[Btn1, Btn2, Btn3, Btn4].forEach(btn => {
btn.classList.remove("selected");
});
gameState.firstSelection = null;
}
// Handle button clicks
function handleButtonClick(btn) {
// Ignore if already matched or clicking same button twice
if ((btn.id === "Btn1" || btn.id === "Btn2") && gameState.pair1Matched) return;
if ((btn.id === "Btn3" || btn.id === "Btn4") && gameState.pair2Matched) return;
if (btn.id === gameState.firstSelection) return;
// First selection
if (gameState.firstSelection === null) {
gameState.firstSelection = btn.id;
btn.classList.add("selected");
TextBox1.innerHTML = "Selected: " + btn.id;
return;
}
// Second selection
var isPair = false;
// Check for valid pairs
if ((gameState.firstSelection === "Btn1" && btn.id === "Btn2") ||
(gameState.firstSelection === "Btn2" && btn.id === "Btn1")) {
isPair = true;
gameState.pair1Matched = true;
}
else if ((gameState.firstSelection === "Btn3" && btn.id === "Btn4") ||
(gameState.firstSelection === "Btn4" && btn.id === "Btn3")) {
isPair = true;
gameState.pair2Matched = true;
}
if (isPair) {
// Correct match
gameState.Score++;
TextBox1.innerHTML = "Matched! " + gameState.firstSelection + " + " + btn.id;
TextBox2.innerHTML = "Score: " + gameState.Score;
matchImage.style.display = "block";
wrongImage.style.display = "none";
// Hide matched buttons
document.getElementById(gameState.firstSelection).style.visibility = "hidden";
btn.style.visibility = "hidden";
resetSelections();
// Check if game is complete
if (gameState.pair1Matched && gameState.pair2Matched) {
TextBox1.innerHTML = "You won! All pairs matched!";
}
} else {
// Wrong match
btn.classList.add("selected");
TextBox1.innerHTML = "No match! Try again";
wrongImage.style.display = "block";
matchImage.style.display = "none";
// Reset after delay
setTimeout(function() {
resetSelections();
TextBox1.innerHTML = "Select another pair";
wrongImage.style.display = "none";
}, 1000);
}
}
// Event listeners
Btn1.onclick = function() { handleButtonClick(this); };
Btn2.onclick = function() { handleButtonClick(this); };
Btn3.onclick = function() { handleButtonClick(this); };
Btn4.onclick = function() { handleButtonClick(this); };
ResetBtn.onclick = function() {
gameState = {
firstSelection: null,
pair1Matched: false,
pair2Matched: false,
Score: 0
};
initGame();
};
// Initialize game on load
initGame();
</script>
Other code A Apple B Ball
<!DOCTYPE html>
<html>
<head>
<title>Simple Match Game</title>
<style>
button {
font-size: 24px;
padding: 15px 30px;
margin: 10px;
cursor: pointer;
}
#message {
font-weight: bold;
font-size: 20px;
margin: 15px;
}
</style>
</head>
<body>
<h1>Match Game</h1>
<button id="btnA" onclick="checkMatch()">A</button>
<button id="btnApple" onclick="checkMatch()">Apple</button>
<button id="btnB" onclick="checkMatch()">B</button>
<button id="btnBall" onclick="checkMatch()">Ball</button>
<p>Score: <span id="score">0</span></p>
<p id="message">Click matching pairs!</p>
<button onclick="resetGame()">Reset</button>
<script>
// Game variables
var score = 0;
var firstClick = "";
function checkMatch() {
// Get clicked button
var clickedBtn = event.target;
// First click - highlight it
if (firstClick === "") {
firstClick = clickedBtn;
clickedBtn.style.background = "yellow";
return;
}
// Check if buttons match
if ((firstClick.id === "btnA" && clickedBtn.id === "btnApple") ||
(firstClick.id === "btnApple" && clickedBtn.id === "btnA") ||
(firstClick.id === "btnB" && clickedBtn.id === "btnBall") ||
(firstClick.id === "btnBall" && clickedBtn.id === "btnB")) {
// Hide matched buttons
firstClick.style.display = "none";
clickedBtn.style.display = "none";
// Update score
score++;
document.getElementById("score").innerText = score;
// Check for win
if (score === 2) {
document.getElementById("message").innerText = "You win!";
} else {
document.getElementById("message").innerText = "Match!";
}
}
// Wrong match
else {
document.getElementById("message").innerText = "Try again!";
}
// Reset selection
firstClick.style.background = "";
firstClick = "";
}
function resetGame() {
// Reset game state
score = 0;
firstClick = "";
document.getElementById("score").innerText = "0";
document.getElementById("message").innerText = "Click matching pairs!";
// Show all buttons and reset styles
var buttons = ["btnA", "btnB", "btnApple", "btnBall"];
for (var i = 0; i < buttons.length; i++) {
var btn = document.getElementById(buttons[i]);
btn.style.display = "";
btn.style.background = "";
}
}
</script>
</body>
</html>
Comments
Post a Comment