Simple Pair game Array function

By AYESHA KHAN -

 <!DOCTYPE html>

<html>

<head>

    <title>Button Matching Game</title>

    <style>

        button {

            padding: 15px 30px;

            font-size: 20px;

            margin: 10px;

        }

        #message {

            font-size: 24px;

            margin: 20px;

            color: green;

        }

    </style>

</head>

<body>

    <h1>Button Matching Game</h1>

    <div id="buttons">

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

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

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

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

    </div>

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

    <p id="message"></p>


    <script>

        // Game variables

        var score = 0;

        var firstClick = null;

        var pairs = {

            "A": "Apple",

            "Apple": "A",

            "B": "Ball",

            "Ball": "B"

        };

        var matchedPairs = [];


        // Get all buttons

        var buttons = document.querySelectorAll("#buttons button");


        // Add click handlers

        buttons.forEach(function(button) {

            button.onPress = function() {

                // Skip if already matched

                if (matchedPairs.includes(this.id)) return;


                // First click

                if (firstClick === null) {

                    firstClick = this;

                    this.style.opacity = "0.5";

                    document.getElementById("message").textContent = "Now click its pair!";

                } 

                // Second click

                else {

                    // Check if it's a correct pair

                    if (pairs[firstClick.id] === this.id) {

                        score++;

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

                        

                        // Hide matched buttons

                        firstClick.style.display = "none";

                        this.style.display = "none";

                        

                        // Add to matched pairs

                        matchedPairs.push(firstClick.id);

                        matchedPairs.push(this.id);

                        

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

                        

                        // Check if all pairs are matched

                        if (matchedPairs.length === 4) {

                            document.getElementById("message").textContent = "You won! All pairs matched!";

                        }

                    } else {

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

                        firstClick.style.opacity = "1";

                    }

                    

                    // Reset for next try

                    firstClick = null;

                }

            };

            

            button.addEventListener("click", button.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