Блог

Главная - Вопросы по программированию - Как добавить анимационный GIF-файл в программу на javascript

Как добавить анимационный GIF-файл в программу на javascript

#javascript

#javascript

Вопрос:

Я очень новичок в мире программирования, и я нахожусь в coding bootcamp, изучая JavaScript. Мы создали игру в угадывание чисел, и я пытаюсь добавить анимацию, которая будет запускаться после ввода правильного ответа. Я несколько раз гуглил, пытаясь найти ответ, но я искал, есть ли более простой способ. Я включил копию программы ниже. Если бы я хотел, чтобы анимация появлялась после ввода правильного ответа, как я мог это сделать?

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Number Guessing Game</title>
    </head>
    <body style='background-color:black'>
        <h1>Number Guessing Game</h1>
        <button type="button" onclick="runGame()">Start Game</button>
        <script>
            function runGame() {
                let guessString ='';
                let guessNumber = 0;
                let correct = false;
                let numTries = 0;

                const randomNumber = Math.random() * 100;
                const randomInteger = Math.floor(randomNumber);
                const target = randomInteger   1;

                do {
                    guessString = prompt('I am thinking of a number in the range 1 to 100.nnWhat is the number?');
                    guessNumber =  guessString;
                    numTries  = 1; 
                    correct = checkGuess(guessNumber, target, numTries);
                } while (!correct);

                alert('You got it! The number was '   target   '.nnIt took you '   numTries   ' tries to guess correctly.');
            }

            function checkGuess(guessNumber, target, numTries) {
                let correct = false;

                if (isNaN(guessNumber)) {
                    alert('Alright smarty pants!nnPlease enter a number in the 1-100 range.');
                } else if ((guessNumber < 1) || (guessNumber > 100)) {
                    alert('Please enter an integer in the 1-100 range.');
                } else if (guessNumber > target) {
                    alert('Your number is too large!nnGuess Number: '   numTries   '.');
                } else if (guessNumber < target) {
                    alert('Your number is too small!nnGuess Number: '   numTries   '.');
                } else {
                    correct = true;
                }
                return correct;
            }
        </script>
    </body>
</html>

Комментарии:

1. Пожалуйста, не используйте alert() в фрагменте кода, особенно если он находится в цикле. Это делает страницу бесполезной и вызывает проблемы при попытке ответить на ваш вопрос или добавить комментарии. В любом случае, в вашей checkGuess функции, где correct = true вы могли бы создать img элемент: let img = document.createElement("img") , добавьте источник изображения: img.src = "yourAnimation.gif" , затем добавьте его в документ: document.body.appendChild(img)

2. Спасибо! Я найду способ избавиться от alert() в коде.

Ответ №1:

Чтобы это сделать, вам нужно научиться манипулировать DOM.

Вот простой пример :

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Number Guessing Game</title>
    </head>
    <body style='background-color:black'>
        <h1>Number Guessing Game</h1>
        <button type="button" onclick="runGame()">Start Game</button>
        <script>
            function runGame() {
                let guessString ='';
                let guessNumber = 0;
                let correct = false;
                let numTries = 0;

                const randomNumber = Math.random() * 100;
                const randomInteger = Math.floor(randomNumber);
                const target = randomInteger   1;

                do {
                    guessString = prompt('I am thinking of a number in the range 1 to 100.nnWhat is the number?');
                    guessNumber =  guessString;
                    numTries  = 1; 
                    correct = checkGuess(guessNumber, target, numTries);
                } while (!correct);

                alert('You got it! The number was '   target   '.nnIt took you '   numTries   ' tries to guess correctly.');
                // add your gif to the dom
                // create an img element
                const img = document.createElement("img")
                // set the source of the gif
                img.src = "https://i0.wp.com/badbooksgoodtimes.com/wp-content/uploads/2017/12/plankton-correct-gif.gif?fit=400,287"
                // add the img element to the dom
                // in this case we are gonna add it after the 'start game' button, so
                // select the button element
                const btn = document.querySelector("button")
                // insert the img element after the button
                btn.parentNode.insertBefore(img, btn.nextSibling);
                
            }

            function checkGuess(guessNumber, target, numTries) {
                let correct = false;

                if (isNaN(guessNumber)) {
                    alert('Alright smarty pants!nnPlease enter a number in the 1-100 range.');
                } else if ((guessNumber < 1) || (guessNumber > 100)) {
                    alert('Please enter an integer in the 1-100 range.');
                } else if (guessNumber > target) {
                    alert('Your number is too large!nnGuess Number: '   numTries   '.');
                } else if (guessNumber < target) {
                    alert('Your number is too small!nnGuess Number: '   numTries   '.');
                } else {
                    correct = true;
                }
                return correct;
            }
        </script>
    </body>
</html>

продолжайте и удачи.