Button matching A apple B ball add score 1

By AYESHA KHAN -

 

<!DOCTYPE html>

<html>

<body>


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

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

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

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

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

<p id="message">Match A-🍎 and B-🏀!</p>


<script>

// Game setup

var score = 0;

var activeButton = null;

var buttons = {

  "btnA": { pair: "btnApple", pressed: false },

  "btnApple": { pair: "btnA", pressed: false },

  "btnB": { pair: "btnBall", pressed: false },

  "btnBall": { pair: "btnB", pressed: false }

};


// AS2-style button setup

for(var id in buttons) {

  var btn = document.getElementById(id);

  btn.onPress = function() {

    if(!buttons[this.id].pressed) {

      // First button clicked

      if(!activeButton) {

        activeButton = this.id;

        this.style.background = "yellow";

      } 

      // Matching pair clicked

      else if(buttons[activeButton].pair === this.id) {

        score++;

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

        buttons[activeButton].pressed = true;

        buttons[this.id].pressed = true;

        document.getElementById(activeButton).style.visibility = "hidden";

        this.style.visibility = "hidden";

        document.getElementById("message").textContent = "Good match!";

        activeButton = null;

      } 

      // Wrong pair clicked

      else {

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

        document.getElementById(activeButton).style.background = "";

        activeButton = null;

      }

    }

  };

  btn.addEventListener("click", btn.onPress);

}

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

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(...
Read more