It's the code I got. The game is not running...Help me!

Asked 2 years ago, Updated 2 years ago, 63 views

I scratched the game source code I found on the Internet, modified only the image part and css part, and ran it, but Uncaught ReferenceError: $ is not defined and it does not run... What's wrong with you? If you select a // card here, $(document).on('click', '#cardTabletd', function(){ This part indicates an error.Help me(Crying) I don't know... I'm a design student. I have no idea.ㅠ<

https://dororongju.tistory.com/103 I brought the code here.

If you press start, the original image should appear. It's not coming up...

<!DOCTYPE html> Finding a picture that's like Crayon Shin-chan. Ta-da! body{font-family: 'Jua', sans-serif;} .width500px{width: 450px; display: inline-block;} .center{text-align: center;} #menuTable{ font-size: 22px; } #startBtn{border: none; color: white; background-color: #84D3BD; width: 100px;padding: 7px; font-family: 'Jua', sans-serif; font-weight: bold; font-size: 22px; cursor: pointer;} #cardTable{border-collapse: collapse;} #cardTable td{border: 1px solid #84D3BD; width: 75px; height: 121px; text-align: center; cursor: pointer;} #cardTable td img{max-width: 70px;} #cardTable td span{font-size: 25pt; font-weight: bold; color: #84D3BD; display: none;} #countDown{background-color: #84D3BD; color: white; font-size: 20pt; padding: 5px;} #info{width: 450px; height: 250px; background-color: #DDDDDD; color: white; padding-top: 230px;}

    </style>
    <script>
        // Game status
        var gameState = '';

        // Open card src
        var openCardId = '';
        var openCardId2 = '';

        // Random number generation function
        function generateRandom (min, max) {
            var ranNum = Math.floor(Math.random()*(max-min+1)) + min;
                return ranNum;
        }


        var cards; // List of cards
        var score = 0; // Score
        variableCtn = 0; // Number of matched cards

        // Card Placement
        function setTable(){
            cards = [
            '1.png','1.png', // 
            '2.png','2.png', // 
            '14.png','14.png', // 
            '4.png','4.png', // 
            '5.png','5.png', // 
            '6.png','6.png', // 
            '7.png','7.png', // 
            '8.png','8.png', // 
            '9.png','9.png', // 
            '10.png','10.png', // 
            '11.png','11.png', // 
            '16.png','16.png' // 
            ];
            var cardTableCode = '<tr>';                
            for(var i=0;i<24;i++) {
                if(i>0 && i%6 == 0){
                    cardTableCode += '</tr><tr>';
                }
                var idx = generateRandom(0,23-i);
                var img = cards.splice(idx,1);

                cardTableCode += '<td id="card'+i+'"><img src="./'+img+'"><span>?</span></td>';
            }
            cardTableCode += '</tr>';
            $('#cardTable').html(cardTableCode);
        }

        // Cover the entire card
        function hiddenCards(){
            $('#cardTable td img').hide();
            $('#cardTable td span').show();
        }

        // The game starts
        function startGame() {
            var sec = 6;

            $('#info').Hide(); // Covering the information phrase
            scoreInit(); // Initialize score
            setTable(); // Place Card

            //Countdown
            function setText(){
                $('#countDown').text(--sec);
            }

            //Countdown
            var intervalID = setInterval(setText, 1000);
            setTimeout(function(){
                clearInterval(intervalID);
                $('#countDown').text('start');
                hiddenCards();
                gameState = '';
            }, 6000);
        }


        // the choice of card.
        $(document).on('click', '#cardTable td', function(){
            If (! = '' gamestate) // then pressed when I'm on the countdown to Games ; return return.
            If (2! = '' opencardid) // if two open press and return. ; return
            if($(this).Hasclass return ('opened')) ; // open the cards pressed again.                
            $(this).Addclass for dividing that by opening ('opened') ; // class more.

            if(openCardId == '') {
                $(this).find('img').show();
                $(this).find('span').hide();
                openCardId = this.id;
            }else {
                If (openCardId == openCardId2) return; // If the same card is pressed, return

                $(this).find('img').show();
                $(this).find('span').hide();

                var openCardSrc = $('#'+openCardId).find('img').attr('src');
                var openCardSrc2 = $(this).find('img').attr('src');
                openCardId2 = this.id;

                if(openCardSrc == openCardSrc2) { // match
                    openCardId = '';
                    openCardId2 = '';
                    scorePlus();
                    if(++openedCtn == 12){
                        alert("Success!"\n'+score+' dot!');
                    }
                }else { // mismatch
                    setTimeout(back, 1000);
                    scoreMinus();
                }
            }
        });

        // Flip Two Cards Again
        function back() {
            $('#'+openCardId).find('img').hide();
            $('#'+openCardId).find('span').show();
            $('#'+openCardId2).find('img').hide();
            $('#'+openCardId2).find('span').show();
            $('#'+openCardId).removeClass('opened');
            $('#'+openCardId2).removeClass('opened');
            openCardId = '';
            openCardId2 = '';
        }

        // Initialize Score
        function scoreInit(){
            score = 0;
            openedCtn = 0;
            $('#score').text(score);
        }
        // an increase in scores
        function scorePlus(){
            score += 20;
            $('#score').text(score);
        }
        // a decrease in scores
        function scoreMinus(){
            score -= 5;
            $('#score').text(score);
        }

        $(document).on('click', '#startBtn', function(){
            if(gameState == '') {
                startGame();
                gameState = 'alreadyStart'
            }
        });


    </script>

🤓 Find the same person 🤓 start  score : 0 ready Press the start button

Full code.

html javascript error

2022-09-22 19:14

1 Answers

jquery is required.

Also, I modified the image by referring to what was hanging on the link.

https://jsfiddle.net/da728zmb/2/


2022-09-22 19:14

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.