Pair game chat gpt

By AYESHA KHAN -

 <!DOCTYPE html>

<html>

<head>

  <title>Simple Match Game</title>

  <style>

    button {

      font-size: 30px;

      padding: 20px;

      margin: 10px;

      width: 100px;

      height: 100px;

      cursor: pointer;

    }


    .hidden {

      visibility: hidden;

    }


    body {

      font-family: Arial, sans-serif;

      text-align: center;

      margin-top: 40px;

    }


    #message {

      font-weight: bold;

    }

  </style>

</head>

<body>

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


  <!-- Buttons -->

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

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

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

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


  <!-- Score and Message -->

  <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 selected = [];


    const pairs = {

      A: "Apple",

      Apple: "A",

      B: "Ball",

      Ball: "B"

    };


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


    // Add click events to each button

    buttons.forEach(id => {

      const btn = document.getElementById(id);

      btn.onclick = () => selectButton(btn);

    });


    function selectButton(btn) {

      if (btn.classList.contains("hidden") || selected.includes(btn)) return;


      selected.push(btn);


      if (selected.length === 2) {

        setTimeout(checkMatch, 500); // slight delay for better UX

      }

    }


    function checkMatch() {

      const [btn1, btn2] = selected;


      if (pairs[btn1.id] === btn2.id) {

        btn1.classList.add("hidden");

        btn2.classList.add("hidden");

        score++;

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

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


        if (score === 2) {

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

        }

      } else {

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

      }


      selected = [];

    }


    function restart() {

      score = 0;

      selected = [];

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

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


      buttons.forEach(id => {

        const btn = document.getElementById(id);

        btn.classList.remove("hidden");

      });

    }

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