Claude button label matching game

By AYESHA KHAN -

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Match Labels Button Game</title>

</head>

<body>

    <h1>Match Labels Button Game</h1>

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

    <p id="status">Click two buttons with matching labels!</p>

    

    <div>

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

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

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

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

    </div>

    

    <button onclick="reset()">Reset Game</button>


    <script>

        let score = 0;

        let firstClick = null;

        let secondClick = null;

        let clickCount = 0;

        let matchedButtons = [];

        

        const updateScore = () => {

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

        };

        

        const updateStatus = (message) => {

            document.getElementById('status').textContent = message;

        };

        

        const hideButton = (buttonId) => {

            document.getElementById(buttonId).style.visibility = 'hidden';

        };

        

        const showAllButtons = () => {

            document.getElementById('btn1').style.visibility = 'visible';

            document.getElementById('btn2').style.visibility = 'visible';

            document.getElementById('btn3').style.visibility = 'visible';

            document.getElementById('btn4').style.visibility = 'visible';

        };

        

        const checkMatch = () => {

            const firstLabel = document.getElementById(firstClick).textContent;

            const secondLabel = document.getElementById(secondClick).textContent;

            

            if (firstLabel === secondLabel && firstClick !== secondClick) {

                // Match found!

                score++;

                updateScore();

                hideButton(firstClick);

                hideButton(secondClick);

                matchedButtons.push(firstClick, secondClick);

                updateStatus(`Match found! ${firstLabel} and ${secondLabel}`);

                

                // Check if all buttons are matched

                if (matchedButtons.length === 4) {

                    setTimeout(() => {

                        updateStatus('Congratulations! All matches found! Click Reset to play again.');

                    }, 1000);

                }

            } else {

                updateStatus('No match! Try again.');

            }

            

            // Reset clicks

            firstClick = null;

            secondClick = null;

            clickCount = 0;

        };

        

        const handleButtonClick = (buttonId) => {

            // Don't allow clicking already matched buttons

            if (matchedButtons.includes(buttonId)) {

                return;

            }

            

            clickCount++;

            

            if (clickCount === 1) {

                firstClick = buttonId;

                updateStatus('First button selected. Click another button.');

            } else if (clickCount === 2) {

                secondClick = buttonId;

                updateStatus('Checking match...');

                setTimeout(checkMatch, 500);

            }

        };

        

        // Assign click handlers to all buttons

        document.getElementById('btn1').onclick = () => handleButtonClick('btn1');

        document.getElementById('btn2').onclick = () => handleButtonClick('btn2');

        document.getElementById('btn3').onclick = () => handleButtonClick('btn3');

        document.getElementById('btn4').onclick = () => handleButtonClick('btn4');

        

        const reset = () => {

            score = 0;

            firstClick = null;

            secondClick = null;

            clickCount = 0;

            matchedButtons = [];

            updateScore();

            updateStatus('Click two buttons with matching labels!');

            showAllButtons();

        };

    </script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Match Labels Button Game</title>

</head>

<body>

    <h1>Match Labels Button Game</h1>

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

    <p id="status">Match letters with their words: A with Apple, B with Ball!</p>

    

    <div>

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

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

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

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

    </div>

    

    <button onclick="reset()">Reset Game</button>


    <script>

        let score = 0;

        let firstClick = null;

        let secondClick = null;

        let clickCount = 0;

        let matchedButtons = [];

        

        const updateScore = () => {

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

        };

        

        const updateStatus = (message) => {

            document.getElementById('status').textContent = message;

        };

        

        const hideButton = (buttonId) => {

            document.getElementById(buttonId).style.visibility = 'hidden';

        };

        

        const showAllButtons = () => {

            document.getElementById('btn1').style.visibility = 'visible';

            document.getElementById('btn2').style.visibility = 'visible';

            document.getElementById('btn3').style.visibility = 'visible';

            document.getElementById('btn4').style.visibility = 'visible';

        };

        

        const checkMatch = () => {

            const firstLabel = document.getElementById(firstClick).textContent;

            const secondLabel = document.getElementById(secondClick).textContent;

            

            // Check if A matches with Apple or B matches with Ball

            const isMatch = (firstLabel === 'A' && secondLabel === 'Apple') ||

                           (firstLabel === 'Apple' && secondLabel === 'A') ||

                           (firstLabel === 'B' && secondLabel === 'Ball') ||

                           (firstLabel === 'Ball' && secondLabel === 'B');

            

            if (isMatch && firstClick !== secondClick) {

                // Match found!

                score++;

                updateScore();

                hideButton(firstClick);

                hideButton(secondClick);

                matchedButtons.push(firstClick, secondClick);

                updateStatus(`Match found! ${firstLabel} matches with ${secondLabel}`);

                

                // Check if all buttons are matched

                if (matchedButtons.length === 4) {

                    setTimeout(() => {

                        updateStatus('Congratulations! All matches found! Click Reset to play again.');

                    }, 1000);

                }

            } else {

                updateStatus('No match! Try again.');

            }

            

            // Reset clicks

            firstClick = null;

            secondClick = null;

            clickCount = 0;

        };

        

        const handleButtonClick = (buttonId) => {

            // Don't allow clicking already matched buttons

            if (matchedButtons.includes(buttonId)) {

                return;

            }

            

            clickCount++;

            

            if (clickCount === 1) {

                firstClick = buttonId;

                updateStatus('First button selected. Click another button.');

            } else if (clickCount === 2) {

                secondClick = buttonId;

                updateStatus('Checking match...');

                setTimeout(checkMatch, 500);

            }

        };

        

        // Assign click handlers to all buttons

        document.getElementById('btn1').onclick = () => handleButtonClick('btn1');

        document.getElementById('btn2').onclick = () => handleButtonClick('btn2');

        document.getElementById('btn3').onclick = () => handleButtonClick('btn3');

        document.getElementById('btn4').onclick = () => handleButtonClick('btn4');

        

        const reset = () => {

            score = 0;

            firstClick = null;

            secondClick = null;

            clickCount = 0;

            matchedButtons = [];

            updateScore();

            updateStatus('Match letters with their words: A with Apple, B with Ball!');

            showAllButtons();

        };

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