Ми робимо ігрові слоти всередині назви сайту. Привітання, у цій статті ми зробимо гру «слотами» всередині назви сайту (приклад, титлюн). Механіка гри буде дуже простою. Натисніть кнопку - ви отримуєте випадкові слоти, якщо всі слоти збігаються - ви виграєте. Навіщо робити ігри від імені сайту? Так, можливо, це звучить як щось абсолютно дивне, але, тим не менш, це досить цікаво. У будь -якому випадку, це цікавіше, ніж робити гру звичайним способом. Анімації. Анімація може бути реалізована по -різному: SetInterval. Функція анімація ()); > SetTimeout. Нехай таймер = 0; Функція анімація () Поки і чекати. Функціональний сон (MS) SetTimeout (R, MS)); > Анімація функції Async ()> Механіка. Як слоти, я буду використовувати емоджі (смайлики, емоджі, як ви зручніші): Тож я можу отримати випадкові слоти: const getSlot = () =>; const getslots = () =>; Коли ви натиснете кнопку, відбудеться анімація різних слотів, швидкість яких поступово зростатиме: Вартість спін = document.getelementbyid ('спін'); Вартість slotsanimation = Async () => = 1000) Швидкість+= 50; Чекати сон (швидкість); >>; Spin.addeventlistener ('клацання', startgame); Checkwin - функція для перевірки виграшу: const checkwin = (слоти) = >> оповіщення ('win !!'); >; Зараз це вже відтворюється. Але я хотів би додати більше анімацій (наприклад, виграшів та анімації головного меню) Це можна зробити, якщо ви представляєте глобальні змінні, такі як: Нехай грає = помилково; Нехай WIN = FALSE; І на основі них показано анімацію: Вартість slotsanimation = Async () => = 1000) Швидкість+= 50; Чекати сон (швидкість); >>; consteanimation = async () = >>; // ця анімація просто циклічно дублює констанцію mainanImation = async () = >>; Ми робимо зручніше. Перше, що я хотів би зробити, - це функція, яка замінить логіку виннімації. Вона відобразить повідомлення, а потім запустить іншу функцію. Як аргумент, він візьме об’єкт із текстів, ряд ітерацій, швидкості та стовпця. const message = async () => = text.length) textIndex = 0; // для кожного циклу ми покажемо 1 повідомлення з масиву документа звітів.title = text [textIndex]; I ++; TextIndex ++; Чекає сну (швидкість) >>; // Використання Message () Я також хотів би зробити менеджера анімації, з яким можна буде запустити та керувати ними. Це буде клас із зберіганням анімації та декількома методами. Анімація класу) // Знайдіть анімацію, увімкніть та запустіть функцію const animation = this.animations.find (item => item.name === анімація); якщо (! анімація) повернення; Анімація.play = правда; Анімація.callback (args)>; Isplay (анімація) item.name === анімація) .play> createAnimation (ім'я, зворотний виклик) >>>>>>>>>>>>>>>>>>>>>> Опис методів: Сетанімація - викликає анімацію. ISPlay-функція-депозит для перевірки "відтворює" анімацію. Креатинація - додає анімацію до зберігання. Тепер код буде виглядати так: const checkwin = (слоти) = >> оповіщення ('win !!'); Анімація.setanimation ('повідомлення', aminats.setanimation ('головна') >>>>; Вартість slotsanimation = Async () => = 1000) Швидкість+= 50; Чекати сон (швидкість); >>; const mainanImation = async () = >>; . Анімація.createAnimation ('гра', slotsanimation); Анімації.createAnimation ('Повідомлення', повідомлення); // запуск анімації.setanimation ('головна'); Здатність додати слот. Для різноманітності додайте можливість додати випадковий слот. (Тут ми просто беремо емоджі з API, додаємо до масиву і вмикаємо основну анімацію) Вартість addslot = async () => catch (e) нарешті>; От і все. Сподіваюся, ви дізналися щось нове. Репозиторій на github - посилання. Сайт для прикладу.