В этой статье вы прочитаете как делается простая игра на JavaScript, вы сможете её сделать, даже если вы изучили только самые основы.
Также, если вы более продвинутый разработчик, то советую вам почитать статью про то, как сделать пинг-понг на JavaScript.
Простая игра на JavaScript:
Итак, вы хотите использовать свои базовые знания в области веб-разработки, чтобы создать что-то более крутое, чем приложение с делами.
Игры — один из лучших проектов, которые вы можете создать, потому что они очень нравятся конечному пользователю, а создавать их очень весело!
Обзор игры на JavaScript:
Какая игра лучше представляет веб-разработку, чем игра про динозавров Chrome, в которую вы играете, когда теряете подключение к Интернету? Это забавная игра, и код легко воссоздать. Он не выглядит точно так же, но работает так же. Если вы действительно хотите, вы можете стилизовать его, когда закончите!
Версия игры на JavaScript с игроком-динозавром:
Чтобы начать кодирование игры, создайте новую папку в своих документах. Используйте свой любимый текстовый редактор, чтобы открыть эту папку, затем создайте три новых файла и назовите их: «index.html», «style.css» и «script.js». С HTML5 можно сделать все в одном файле, но он более организован, чтобы хранить все отдельно.
Наш файл «index.html» будет очень простым: как только у вас будет базовый HTML-макет, создайте div с идентификатором «game», а затем еще два внутри него с идентификаторами character и block. Персонаж будет динозавром, а блок — кактусами, приближающимися к нам.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <! DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title> Игра в прыжки </title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="game"> <div id="character"></div> <div id="block"></div> </div> <script src="script.js"> </script> </body> </html> |
Затем перейдите к файлу CSS и начните применять стили к двум только что созданным div. Сначала мы начнем с div игры. Выберите элемент по его идентификатору, который представлен символом решетки (#).
1 2 3 4 5 6 | #game{ width: 500px; height: 200px; border: solid bleck 1px; margin: auto; } |
Затем мы изменим стиль нашего символа div. Мы должны объявить позицию как относительную, потому что позиционные атрибуты, такие как top и left, применяются только к позиционированным элементам.
1 2 3 4 5 6 7 | #character{ width: 20px; height: 50px; background-color: red; position: relative; top: 150px; // высота игры - высота персонажа (200-50) } |
Создайте анимацию по ключевым кадрам, которая называется прыжком. Эта анимация заставит верхнюю позицию сдвинуться на 50 пикселей вверх, а затем снова вниз.
1 2 3 4 5 6 | @keyframes jump { 0% {top: 150px;} 30% {top: 100px;} 70% {top: 100px;} 100% {top: 150px;} } |
Затем мы создадим новый класс с именем animate, который применяет анимацию прыжка.
1 2 3 | .animate { animation: jump 300ms linear; } |
Мы собираемся использовать JavaScript, чтобы добавлять класс animate к нашему персонажу всякий раз, когда вы щелкаете мышью.
В файле «script.js» создайте функцию с именем jump(), которая добавляет класс animate к символу div. Создайте прослушиватель событий, который прослушивает щелчок пользователя, а затем выполняет функцию перехода.
Создайте еще одну функцию с именем removeJump(), которая удаляет класс анимации. Затем добавьте функцию тайм-аута в jump(), которая запускает removeJump() по окончании анимации. Анимация не запустится снова, пока мы ее не удалим.
1 2 3 4 5 6 7 8 9 10 | var character = document.getElementById("персонаж"); document.addEventListener ("click", jump); function jump () { character.classList.add("animate"); setTimeout(removeJump, 300); // 300мс = длина анимации }; function removeJump () { character.classList.remove("animate"); } |
Это работает, но кажется, что возникает сбой, если пользователь щелкает мышью во время прыжка. Чтобы исправить это, добавьте строку ниже в начале jump(). Это остановит функцию от каких-либо действий, если анимация запущена.
1 | if (character.classList == "animate") {return;} |
Теперь вернемся к нашему файлу CSS и начнем стилизовать блок div.
1 2 3 4 5 6 7 8 9 | #block{ width: 20px; height: 20px; background-color: blue; position: relative; top: 130px; // высота игры - высота персонажа - высота блока (200-50-20) left: 480px; // ширина игры - ширина блока (500-20) animation: block 1s infinite linear; } |
Мы еще не создали анимацию блока, поэтому создайте анимацию, чтобы блок скользил справа налево.
1 2 3 4 | @keyframes block { 0% {left: 500px} 100% {left: -20px} } |
Теперь мы можем прыгать, но мы должны довести игру до конца, если попадем в блок. Создайте функцию с именем checkDead(), которая получает позицию блока и символа, а затем оценивает, находятся ли они друг над другом. Если да, то закончите игру.
Создайте переменную с именем characterTop, которая равна верхнему значению символа div. getComputedStyle() вернет все значения CSS, связанные с элементом, а getPropertyValue() указывает свойство, из которого вы хотите получить значение.
Вывод:
В этой статье вы прочитали как делается простая игра на JavaScript, для самых новичков, думаю вам было интересно.
Подписываетесь на соц-сети:
Оценка:
Загрузка...