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

        #msg { margin: 10px; height: 20px; }

    </style>

</head>

<body>

    <h1>A-Apple B-Ball Match</h1>

    <div id="game">

        <button id="btn1" class="btn" data-btn-num="1" style="width:70px;height:50px;top:10px;left:10px;">A<br>Apple</button>

        <button id="btn2" class="btn" data-btn-num="2" style="width:90px;height:40px;top:10px;left:90px;">B<br>Ball</button>

        <button id="btn3" class="btn" data-btn-num="3" style="width:70px;height:50px;top:80px;left:90px;">A<br>Apple</button>

        <button id="btn4" class="btn" data-btn-num="4" style="width:90px;height:40px;top:80px;left:10px;">B<br>Ball</button>

        <button id="try" onclick="reset()">TRY AGAIN</button>

    </div>

    <div id="msg">Pick two cards</div>


    <script>

        let firstPick = null;

        let secondPick = null;

        const buttons = document.querySelectorAll('.btn');


        buttons.forEach(button => {

            button.addEventListener('click', function() {

                pick(this);

            });

        });


        function pick(button) {

            if (firstPick === null) {

                firstPick = button;

                firstPick.style.background = 'orange';

                firstPick.disabled = true; // Disable the button after first pick

            } else if (secondPick === null && button !== firstPick) {

                secondPick = button;

                secondPick.style.background = 'orange';

                secondPick.disabled = true; // Disable the button after second pick

                check();

            }

        }


        function check() {

            const sameSize = firstPick.offsetWidth === secondPick.offsetWidth &&

                             firstPick.offsetHeight === secondPick.offsetHeight;


            document.getElementById('msg').innerText = sameSize ? 'Match!' : 'No match!';


            if (sameSize) {

                // Disable matched buttons permanently

                firstPick.disabled = true;

                secondPick.disabled = true;

            }


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

        }


        function reset() {

            buttons.forEach(button => {

                button.style.background = '#4682B4';

                button.disabled = false; // Enable all buttons

            });

            firstPick = null;

            secondPick = null;

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

            document.getElementById('msg').innerText = 'Pick two cards';

        }

    </script>

</body>

</html>


Other Code 


<!DOCTYPE html>
<html>
<head>
    <title>Simple Matching Game</title>
    <style>
        button { width: 80px; height: 80px; margin: 10px; font-size: 20px; }
        input { width: 80px; height: 30px; margin: 5px; font-size: 16px; }
        #msg { font-size: 20px; margin: 10px; }
        #try { padding: 8px 15px; margin: 10px; }
    </style>
</head>
<body>
    <div id="game">
        <button onclick="pickCard(0, this)">0</button>
        <button onclick="pickCard(1, this)">1</button>
        <button onclick="pickCard(0, this)">0</button>
        <button onclick="pickCard(1, this)">1</button>
        
        <div>
            First: <input type="text" id="first" readonly>
            Second: <input type="text" id="second" readonly>
        </div>
        
        <div id="msg">Pick two cards</div>
        <button id="try" onclick="reset()" style="display:none">Try Again</button>
    </div>

    <script>
        var firstPick = null;
        var secondPick = null;
        
        function pickCard(value, button) {
            if (button.disabled) return;
            
            if (firstPick === null) {
                firstPick = button;
                document.getElementById('first').value = value;
            } 
            else if (secondPick === null && button !== firstPick) {
                secondPick = button;
                document.getElementById('second').value = value;
                checkMatch();
            }
        }
        
        function checkMatch() {
            var msg = document.getElementById('msg');
            if (firstPick.innerHTML === secondPick.innerHTML) {
                msg.innerHTML = 'Match!';
                // Disable matched buttons
                firstPick.disabled = true;
                secondPick.disabled = true;
            } else {
                msg.innerHTML = 'No match!';
            }
            document.getElementById('try').style.display = 'block';
        }
        
        function reset() {
            // Re-enable all buttons
            var buttons = document.querySelectorAll('#game button:not(#try)');
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].disabled = false;
            }
            
            firstPick = null;
            secondPick = null;
            document.getElementById('first').value = '';
            document.getElementById('second').value = '';
            document.getElementById('msg').innerHTML = 'Pick two cards';
            document.getElementById('try').style.display = 'none';
        }
    </script>
</body>
</html>

Other Code 

<!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; }
        #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; }
        #msg { margin: 10px; height: 20px; }
    </style>
</head>
<body>
    <h1>A-Apple B-Ball Match</h1>
    <div id="game">
        <button id="btn1" class="btn" style="width:70px;height:50px;top:10px;left:10px;" onclick="pick(1)">A<br>Apple</button>
        <button id="btn2" class="btn" style="width:90px;height:40px;top:10px;left:90px;" onclick="pick(2)">B<br>Ball</button>
        <button id="btn3" class="btn" style="width:70px;height:50px;top:80px;left:90px;" onclick="pick(3)">A<br>Apple</button>
        <button id="btn4" class="btn" style="width:90px;height:40px;top:80px;left:10px;" onclick="pick(4)">B<br>Ball</button>
        <button id="try" onclick="reset()">TRY AGAIN</button>
    </div>
    <div id="msg">Pick two cards</div>

    <script>
        var firstPick = null;
        var secondPick = null;
        
        function pick(btnNum) {
            var btn = document.getElementById('btn'+btnNum);
            
            if (firstPick === null) {
                firstPick = btn;
                btn.style.background = 'orange';
            } 
            else if (secondPick === null && btn !== firstPick) {
                secondPick = btn;
                btn.style.background = 'orange';
                check();
            }
        }
        
        function check() {
            var sameSize = firstPick.offsetWidth === secondPick.offsetWidth && 
                          firstPick.offsetHeight === secondPick.offsetHeight;
            
            document.getElementById('msg').innerText = sameSize ? 'Match!' : 'No match!';
            document.getElementById('try').style.display = 'block';
        }
        
        function reset() {
            if (firstPick) firstPick.style.background = '#4682B4';
            if (secondPick) secondPick.style.background = '#4682B4';
            firstPick = null;
            secondPick = null;
            document.getElementById('try').style.display = 'none';
            document.getElementById('msg').innerText = 'Pick two cards';
        }
    </script>
</body>
</html>

other code 


<!DOCTYPE html>
<html>
<head>
    <title>Color Match Game</title>
</head>
<body>
    <h1>Color Match Game</h1>
    <div>
        <button onclick="pick(this)" style="background-color:red;width:80px;height:50px;">A<br>Apple</button>
        <button onclick="pick(this)" style="background-color:blue;width:90px;height:40px;">B<br>Ball</button>
        <button onclick="pick(this)" style="background-color:red;width:80px;height:50px;">A<br>Apple</button>
        <button onclick="pick(this)" style="background-color:blue;width:90px;height:40px;">B<br>Ball</button>
    </div>
    <div id="msg">Pick two cards</div>
    <button id="try" onclick="resetGame()" style="display:none;padding:10px 20px;">TRY AGAIN</button>

    <script>
        var firstPick = null;
        var secondPick = null;
        
        function pick(btn) {
            if (!firstPick) {
                firstPick = btn;
            } 
            else if (!secondPick && btn !== firstPick) {
                secondPick = btn;
                checkMatch();
            }
        }
        
        function checkMatch() {
            var isMatch = firstPick.style.backgroundColor === secondPick.style.backgroundColor;
            
            document.getElementById('msg').textContent = isMatch ? 'Match!' : 'No match!';
            document.getElementById('try').style.display = 'block';
        }
        
        function resetGame() {
            firstPick = null;
            secondPick = null;
            document.getElementById('try').style.display = 'none';
            document.getElementById('msg').textContent = 'Pick two cards';
        }
    </script>
</body>
</html>

Other code without javascript 

<!DOCTYPE html>
<html>
<head>
    <title>Color Match Game</title>
</head>
<body>
    <h1>Color Match Game</h1>
    <div>
        <button onclick="pick(this)" style="background-color:red;width:80px;height:50px;">A<br>Apple</button>
        <button onclick="pick(this)" style="background-color:blue;width:90px;height:40px;">B<br>Ball</button>
        <button onclick="pick(this)" style="background-color:red;width:80px;height:50px;">A<br>Apple</button>
        <button onclick="pick(this)" style="background-color:blue;width:90px;height:40px;">B<br>Ball</button>
    </div>
    <div id="msg">Pick two cards</div>
    <button id="try" onclick="resetGame()" style="display:none;padding:10px 20px;">TRY AGAIN</button>

    <script>
        var firstPick = null;
        var secondPick = null;
        
        function pick(btn) {
            if (!firstPick) {
                firstPick = btn;
            } 
            else if (!secondPick && btn !== firstPick) {
                secondPick = btn;
                checkMatch();
            }
        }
        
        function checkMatch() {
            var isMatch = firstPick.style.backgroundColor === secondPick.style.backgroundColor;
            
            if (isMatch) {
                document.getElementById('msg').innerText = 'Match!';
            } else {
                document.getElementById('msg').innerText = 'No match!';
            }
            document.getElementById('try').style.display = 'block';
        }
        
        function resetGame() {
            firstPick = null;
            secondPick = null;
            document.getElementById('try').style.display = 'none';
            document.getElementById('msg').innerText = 'Pick two cards';
        }
    </script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

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