Джерело: Google Images — Дитяча іграшка Pop It.
Кілька днів тому моя дружина та я купили для нашого сина іграшку: Pop It. Ця цікава дитяча іграшка допомагає в розвитку дотику, слуху та координації рухів, особливо у дітей.
Геймплей полягає в тому, щоб натискати на світлові кульки на рельєфній "клавіатурі". Коли натискається клавіша, вона опускається, імітуючи луснення мильного бульбашки. З кожним рівнем складність збільшується. Якщо натискати на неправильну клавішу, на більшості пристроїв гра починається заново з рівня 1, і весь прогрес втрачається.
Після того, як я спостерігав за грою мого сина, у мене виникла ідея: чому б не застосувати трохи логіки і створити цифрову версію цієї іграшки? Отже, я відкрив Visual Studio Code (VS Code) і почав реалізовувати механіку гри за допомогою CSS, HTML та JavaScript, у файлі PHP. Я вибрав PHP, але можна було б використовувати простий HTML-файл, оскільки в цій першій версії нічого, що стосується бекенду, не було реалізовано.
Моя мета полягала в тому, щоб створити досвід, схожий на фізичну іграшку, але доступний на мобільних пристроях, таких як телефони. Це дозволило б використовувати екранний дотик замість миші для натискання.
Popit Digital
Будівництво
Логіка коду була такою: при доступі до URL або сторінки, гра завантажувала масив з попередньо заданим розміром, після чого випадковим чином вибирала квадрати, які потрібно було натискати, виділяючи їх зеленим кольором. На першому рівні гравець міг натискати на зелені квадрати. Кількість квадратів збільшувалася з кожним рівнем, тобто:
- Рівень 1: 1 зелений квадрат
- Рівень 2: 2 зелених квадрати
- І так далі, поступово збільшуючи складність.
Коли зелений квадрат був натиснутий, його колір змінювався на чорний, вказуючи, що цей елемент уже був вибраний. Якщо гравець помилявся і натискав на неправильний квадрат, неправильна позиція позначалася фіолетовим. Через 2 секунди всі квадрати миготіли червоним, сигналізуючи про "GAME OVER", і гра починалася заново з рівня 1.
Місія виконана: гра працювала!
Проте, як це часто буває з програмістами, відчуття досягнення швидко зникло, оскільки побудова була досить простою. Крім того, я виявив помилку: з підвищенням рівня іноді гра не переходила на наступний етап, навіть після того, як всі зелені квадрати були натиснуті. Після дослідження я зрозумів, що функція, яка випадковим чином вибирала зелені квадрати, інколи вибирала одну й ту саму позицію двічі. Це змушувало гравця натискати двічі на один і той самий квадрат, щоб завершити рівень. Я виправив помилку і знову відчув задоволення. Тоді я подумав: чому б не додати нові функціональні можливості і зробити гру ще складнішою?
Збільшую складність для гравця — Відлік часу
Я вирішив додати відлік часу, оскільки у фізичному Pop It немає обмеження по часу для вибору елементів. Для цього я використав функції setInterval та setTimeout.
Однак я помітив, що фіксований час не підходить для більш складних рівнів. Тому я налаштував таймер таким чином, щоб доступний час збільшувався з кожним рівнем, але з "контрвагою". На кожному рівні з часу віднімалося 200 мілісекунд, множачись на рівень. Це зробило гру більш складною та динамічною.
Збільшую складність для гравця — Фальшиві квадрати
До цього часу досвід гри став цікавим, але я хотів зробити його ще складнішим.
Я вирішив додати фальшиві квадрати починаючи з п’ятого рівня.
Логіка була простою: з п’ятого рівня половина елементів фази випадковим чином вибиралися як жовті квадрати, що представляли пастки. Лише зелені квадрати мали бути натиснуті для переходу на наступний рівень. Цей візуальний елемент мав на меті заплутати гравця, змушуючи його бути більш уважним при натисканні. Кінцевим результатом стала гра, що стала більш складною та захопливою.
Мораль історії
Ми завжди можемо розвивати і вдосконалювати свої навички. У моєму випадку проста іграшка перетворилася на веселий виклик, який я зміг створити, використовуючи свої знання програмування.
Повідомлення, яке я хочу передати: ніколи не припиняй вчитися та тренуватися. Якщо хочеш вирізнятися, використовуйте досвід з повсякденного життя як натхнення і спробуй відтворити їх в коді. Реальні приклади, поряд з популярними API, такими як Pokédex, можуть дуже допомогти. Вихід із зони комфорту і практика нових алгоритмів є важливим для твого розвитку.
Ті, хто хоче запустити код гри локально, можуть знайти його за посиланням:
https://github.com/araujodev/popit
Перекладено з: Melhor recomendação para desenvolvedores: Don't Stop, keep moving