ClaudieAi Pair Game WITHOUT JS DOM OBJECT Direct access by ID ✅ ✔✔🌹🌹🎉

By AYESHA KHAN -


-----------------------------------------------------------------------------------------------------------------------

Read More:

https://cupidsnaps.blogspot.com/2025/06/button-id-matching-game-chat-gpt-add.html

------------------------------------------------------------------------------------------------------------------------


<!DOCTYPE html>

<html>

<head>

    <title>Simple Matching Game</title>

</head>

<body>

    <h1>Match A with Apple, B with Ball</h1>

    

    <button id="btnA">A</button>

    <button id="btnApple">🍎</button>

    <button id="btnB">B</button>

    <button id="btnBall">🏀</button>

    

    <p>Score: <span id="score">0</span></p>

    <p id="message">Click two buttons to match!</p>

    <button onclick="restart()">Restart</button>


    <script>

        let score = 0;

        let first = null;

        let second = null;

        

        const clickButton = (btn) => {

            if (btn.style.display === 'none') return;

            

            if (!first) {

                first = btn;

                btn.style.opacity = '0.5';

            } else if (!second && btn !== first) {

                second = btn;

                checkMatch();

            }

        };

        

        const checkMatch = () => {

            const match1 = (first.id === 'btnA' && second.id === 'btnApple');

            const match2 = (first.id === 'btnApple' && second.id === 'btnA');

            const match3 = (first.id === 'btnB' && second.id === 'btnBall');

            const match4 = (first.id === 'btnBall' && second.id === 'btnB');

            

            if (match1 || match2 || match3 || match4) {

                score++;

                document.getElementById('score').textContent = score;

                first.style.display = 'none';

                second.style.display = 'none';

                document.getElementById('message').textContent = 'Match found!';

                

                if (score === 2) {

                    document.getElementById('message').textContent = 'You win!';

                }

            } else {

                first.style.opacity = '1';

                document.getElementById('message').textContent = 'No match, try again!';

            }

            

            first = null;

            second = null;

        };

        

        const restart = () => {

            score = 0;

            first = null;

            second = null;

            document.getElementById('score').textContent = '0';

            document.getElementById('message').textContent = 'Click two buttons to match!';

            document.getElementById('btnA').style.display = 'inline-block';

            document.getElementById('btnApple').style.display = 'inline-block';

            document.getElementById('btnB').style.display = 'inline-block';

            document.getElementById('btnBall').style.display = 'inline-block';

            document.getElementById('btnA').style.opacity = '1';

            document.getElementById('btnApple').style.opacity = '1';

            document.getElementById('btnB').style.opacity = '1';

            document.getElementById('btnBall').style.opacity = '1';

        };

        

        document.getElementById('btnA').onclick = () => clickButton(document.getElementById('btnA'));

        document.getElementById('btnApple').onclick = () => clickButton(document.getElementById('btnApple'));

        document.getElementById('btnB').onclick = () => clickButton(document.getElementById('btnB'));

        document.getElementById('btnBall').onclick = () => clickButton(document.getElementById('btnBall'));

    </script>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------

CODE2

https://cupidsnaps.blogspot.com/2025/06/button-id-matching-game-chat-gpt-add.html

--------------------------------------------------------------------------------------------------------------------


<!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 {

opacity: 0;

pointer-events: none;

}

.matched {

background-color: lightgreen;

transform: scale(1.1);

}

.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 matched or is the same as first selection

if (button.classList.contains('matched') || 

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++;

// Mark both as matched

firstSelected.classList.remove('selected');

firstSelected.classList.add('matched');

button.classList.remove('selected');

button.classList.add('matched');

// 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

document.querySelectorAll('.btn').forEach(btn => {

btn.classList.remove('matched', 'selected');

});

firstSelected = null;

matchesFound = 0;

score = 0;

document.getElementById('score').textContent = score;

}

</script>

</body>

</html>

Other code as2


<!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; }

  </style>

</head>

<body>


<h1>Match Game</h1>


<button id="btnA">A</button>

<button id="btnB">B</button>

<button id="btnApple">Apple</button>

<button id="btnBall">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 = "";


// AS2-style button functions

btnA = document.getElementById("btnA");

btnB = document.getElementById("btnB");

btnApple = document.getElementById("btnApple");

btnBall = document.getElementById("btnBall");


// Button press handlers

btnA.onPress = function() { checkMatch("A", "Apple"); }

btnB.onPress = function() { checkMatch("B", "Ball"); }

btnApple.onPress = function() { checkMatch("Apple", "A"); }

btnBall.onPress = function() { checkMatch("Ball", "B"); }


// Add click listeners

btnA.onclick = btnA.onPress;

btnB.onclick = btnB.onPress;

btnApple.onclick = btnApple.onPress;

btnBall.onclick = btnBall.onPress;


// Main game function

function checkMatch(btnId, matchId) {

  if (!firstClick) {

    firstClick = btnId;

    document.getElementById("btn"+btnId).style.background = "yellow";

    return;

  }


  if (firstClick === matchId) {

    // Correct match

    document.getElementById("btn"+firstClick).style.display = "none";

    document.getElementById("btn"+btnId).style.display = "none";

    score++;

    document.getElementById("score").innerText = score;

    document.getElementById("message").innerText = "Match! Score: " + score;

    

    if (score === 2) {

      document.getElementById("message").innerText = "You win!";

    }

  } else {

    // Wrong match

    document.getElementById("message").innerText = "Try again!";

  }

  

  // Reset selection

  document.getElementById("btn"+firstClick).style.background = "";

  firstClick = "";

}


// Reset game

function resetGame() {

  score = 0;

  firstClick = "";

  document.getElementById("score").innerText = "0";

  document.getElementById("message").innerText = "Click matching pairs!";

  

  // Show all buttons

  var buttons = ["A", "B", "Apple", "Ball"];

  for (var i = 0; i < buttons.length; i++) {

    var btn = document.getElementById("btn"+buttons[i]);

    btn.style.display = "";

    btn.style.background = "";

  }

}

</script>


</body>

</html>

Other code 

<!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>

------------------------------------------------------------------------------------------------------------

MAKE GAME WITHOUT DOM OBJECT YOU CAN ALSO 

------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

<title>Simple Match Game</title>

<style>

button {

font-size: 24px;

padding: 15px 30px;

margin: 10px;

cursor: pointer;

}

#TextBox1, #TextBox2 {

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>

<div id="TextBox2">Score: 0</div>

<div id="TextBox1">Click matching pairs!</div>

<button onclick="resetGame()">Reset</button>

<script>

var score = 0;

var firstClick = "";

function checkMatch() {

var clickedBtn = event.target;

if (firstClick === "") {

firstClick = clickedBtn;

clickedBtn.style.background = "yellow";

return;

}

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")) {

firstClick.style.display = "none";

clickedBtn.style.display = "none";

score++;

TextBox2.innerHTML = "Score: " + score;

if (score === 2) {

TextBox1.innerHTML = "You win!";

} else {

TextBox1.innerHTML = "Match!";

}

} else {

TextBox1.innerHTML = "Try again!";

}

firstClick.style.background = "";

firstClick = "";

}

function resetGame() {

score = 0;

firstClick = "";

TextBox2.innerHTML = "Score: 0";

TextBox1.innerHTML = "Click matching pairs!";

btnA.style.display = "";

btnA.style.background = "";

btnB.style.display = "";

btnB.style.background = "";

btnApple.style.display = "";

btnApple.style.background = "";

btnBall.style.display = "";

btnBall.style.background = "";

}

</script>

</body>

</html>

------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

<title>Simple Match Game</title>

<style>

button {

font-size: 24px;

padding: 15px 30px;

margin: 10px;

cursor: pointer;

}

#TextBox1, #TextBox2 {

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>

<div id="TextBox2">Score: 0</div>

<div id="TextBox1">Click matching pairs!</div>

<button onclick="resetGame()">Reset</button>

<script>

var score = 0;

var firstClick = "";

function checkMatch() {

var clickedBtn = event.target;

if (firstClick === "") {

firstClick = clickedBtn;

clickedBtn.style.background = "yellow";

return;

}

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")) {

firstClick.style.display = "none";

clickedBtn.style.display = "none";

score++;

TextBox2.innerHTML = "Score: " + score;

if (score === 2) {

TextBox1.innerHTML = "You win!";

} else {

TextBox1.innerHTML = "Match!";

}

} else {

TextBox1.innerHTML = "Try again!";

}

firstClick.style.background = "";

firstClick = "";

}

function resetGame() {

score = 0;

firstClick = "";

TextBox2.innerHTML = "Score: 0";

TextBox1.innerHTML = "Click matching pairs!";

var buttons = ["btnA", "btnB", "btnApple", "btnBall"];

for (var i = 0; i < buttons.length; i++) {

var btn = window[buttons[i]];

btn.style.display = "";

btn.style.background = "";

}

}

</script>

</body>

</html>

------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<title>Simple Match Game</title>
<style>
button {
font-size: 24px;
padding: 15px 30px;
margin: 10px;
cursor: pointer;
}
#TextBox1, #TextBox2 {
font-weight: bold;
font-size: 20px;
margin: 15px;
}
</style>
</head>
<body>
<h1>Match Game</h1>
<!-- Buttons with matching values -->
<button id="btnA" value="A" onclick="checkMatch()">A</button>
<button id="btnApple" value="A" onclick="checkMatch()">Apple</button>
<button id="btnB" value="B" onclick="checkMatch()">B</button>
<button id="btnBall" value="B" onclick="checkMatch()">Ball</button>
<div id="TextBox2">Score: 0</div>
<div id="TextBox1">Click matching pairs!</div>
<button onclick="resetGame()">Reset</button>
<script>
var score = 0;
var firstClick = null;
function checkMatch() {
var clickedBtn = event.target;
// Ignore if the same button is clicked twice
if (firstClick === clickedBtn) return;
// First button click
if (firstClick === null) {
firstClick = clickedBtn;
clickedBtn.style.background = "yellow";
return;
}
// Match by value
if (firstClick.value === clickedBtn.value) {
firstClick.style.display = "none";
clickedBtn.style.display = "none";
score++;
TextBox2.innerHTML = "Score: " + score;
TextBox1.innerHTML = score === 2 ? "You win!" : "Match!";
} else {
TextBox1.innerHTML = "Try again!";
}
// Reset selection
firstClick.style.background = "";
firstClick = null;
}
function resetGame() {
score = 0;
firstClick = null;
TextBox2.innerHTML = "Score: 0";
TextBox1.innerHTML = "Click matching pairs!";
var buttons = ["btnA", "btnB", "btnApple", "btnBall"];
for (var i = 0; i < buttons.length; i++) {
buttons[i].style.display = "";
buttons[i].style.background = "";
}
}
</script>
</body>
</html>

-----------------------------------------------------------------------------------------------------------

OR USE THIS CODE WIRH TIMER TO RETURN

-----------------------------------------------------------------------------------------------------------


<!DOCTYPE html>

<html>

<head>

  <style>

    button {

      padding: 20px;

      margin: 10px;

      font-size: 20px;

    }

  </style>

</head>

<body>


<!-- Buttons for matching -->

<button id="0">A</button>

<button id="0">Apple</button>

<button id="1">B</button>

<button id="1">Ball</button>


<!-- Result icon -->

<img id="result" style="display:none;width:50px;">


<script>

let firstElement = null;


const allButtons = document.querySelectorAll('button');


function disableButtons(disabled) {

  allButtons.forEach(btn => btn.disabled = disabled);

}


allButtons.forEach(btn => {

  btn.onclick = function () {

    if (this.style.visibility === 'hidden' || this.disabled) return;


    if (firstElement === null) {

      firstElement = this;

    } else {

      // Disable all buttons temporarily

      disableButtons(true);


      const secondElement = this;


      if (firstElement === secondElement || firstElement.id !== secondElement.id) {

        // Same button clicked twice OR different ids = wrong

        document.getElementById('result').src = "https://cdn-icons-png.flaticon.com/512/1828/1828843.png"; // ❌

      } else {

        // Correct match

        firstElement.style.visibility = 'hidden';

        secondElement.style.visibility = 'hidden';

        document.getElementById('result').src = "https://cdn-icons-png.flaticon.com/512/4436/4436481.png"; // ✅

      }


      document.getElementById('result').style.display = 'block';


      // Reset after a short delay

      setTimeout(() => {

        document.getElementById('result').style.display = 'none';

        firstElement = null;

        disableButtons(false);

      }, 1000);

    }

  };

});

</script>


</body>

</html>

-----------------------------------------------------------------------------------------------------------


<!DOCTYPE html> <html> <head> <style> button { padding: 20px; margin: 10px; font-size: 20px; } #TextBox1 { font-weight: bold; font-size: 20px; margin: 15px; } </style> </head> <body> <!-- Matching buttons with same IDs --> <button id="0">A</button> <button id="0">Apple</button> <button id="1">B</button> <button id="1">Ball</button> <!-- Message display --> <div id="TextBox1">Click matching pairs!</div> <script> let FirstClick = null; let LastClick = null; let buttons = document.querySelectorAll("button"); for (let i = 0; i < buttons.length; i++) { buttons[i].onclick = function () { if (buttons[i].style.visibility === 'hidden') return; if (FirstClick === null) { FirstClick = buttons[i]; TextBox1.innerHTML = "Select second!"; } else { LastClick = buttons[i]; // Prevent double click on same button if (FirstClick !== LastClick) { if (FirstClick.id === LastClick.id) { FirstClick.style.visibility = "hidden"; LastClick.style.visibility = "hidden"; TextBox1.innerHTML = "Match!"; } else { TextBox1.innerHTML = "Try again!"; } } else { TextBox1.innerHTML = "Don't click same button!"; } // Reset both FirstClick = null; LastClick = null; } }; } </script> </body> </html>

Comments

Post a Comment

Popular posts from this blog

cc app code button match with size return with Try Again Button

By AYESHA KHAN -
 <!DOCTYPE html> <html> <head>     <title>Size Match Game</title>     <style>         body { font-family: Arial; text-align: center; margin-top: 30px; }         #game { position: relative; width: 220px; height: 160px; margin: 0 auto; }         .btn { position: absolute; border: none; background: #4682B4; color: white;                cursor: pointer; border-radius: 5px; font-size: 14px; }         .btn:disabled { background: gray; cursor: not-allowed; } /* Style for disabled buttons */         #try { position: absolute; width: 100%; height: 100%; top: 0; left: 0;                background: rgba(0,0,0,0.7); color: white; display: none;                border: none; cursor: pointer; font-size: 18px; }     ...
Read more

AS2 in JavaScript add score 1 press button A and B clicked id null

By AYESHA KHAN -
 <!DOCTYPE html> <html> <body> <button id="btnA">Button A</button> <button id="btnB">Button B</button> <p>Score: <span id="score">0</span></p> <script> // Simple AS2-style button click handling var score = 0; var aPressed = false; var bPressed = false; // Create button objects like in AS2 btnA = document.getElementById("btnA"); btnB = document.getElementById("btnB"); // AS2-style onPress functions btnA.onPress = function() {   aPressed = true;   checkScore(); }; btnB.onPress = function() {   bPressed = true;   checkScore(); }; function checkScore() {   if (aPressed && bPressed) {     score++;     document.getElementById("score").textContent = score;     aPressed = bPressed = false; // Reset   } } // Add click listeners to simulate AS2 onPress btnA.addEventListener("click", btnA.onPress); btnB.addEventListener("click", btnB.onPre...
Read more