Делаем простую графическую игру на p5.js
В процессе занятий родилось от скуки для примера :)
Рассчитывал, что займёт часа полтора времени и 100 строк кода, на самом деле, вышло в полтора раза больше того и другого.
Если нам нужна типовая кликалка из серии мышедробилок (что-то куда-то перемещается по канве, мы можем это кликать мышкой, за какие-то клики считаются очки, идёт время, при каком-то условии игра заканчивается), то, подключив библиотеку p5.js
, нам понадобится запрограммировать буквально три её метода плюс написать несколько несложных классов,
представляющих собой объекты игры.
Методы библиотеки в нашем случае нужны такие:
setup
- создаём канву и объекты;draw
- перебирая в цикле объекты, изменяем их состояние и вызываем методы для отрисовки из написанных нами классов объектов. Для самого рисования в библиотеке всё сделано удобно;mousePressed
- обрабатываем клики мышки, например, проверяя, кликнут ли нужный объект. Получить координаты мыши крайне легко - простоmouseX
иmouseY
.
Классы объектов мне понадобились только следующие:
bubble
- объект воздействия, перемещающийся по канве эллипс;aiming
- прицел, которым мы гасим bubbl'ов;scoring
- счёт игры;timing
- таймер игры.
Подробнее с исходником можно ознакомиться, щёлкнув правой кнопкой мыши вне графической канвы и выбрав пункт меню "Просмотр кода страницы", "Исходный код страницы", "Просмотр HTML-кода" и т.п., название пункта зависит от браузера. Всего с HTML-обрамлением в исходнике менее 200 строк, библиотека p5.js подключалась не с официального сайта, а с моего, так что последняя версия библиотеки особо не нужна.
Файл игры .html в кодировке Юникода UTF-8 (скачать можно через правую кнопку мыши) (5 Кб)
Открыть игру в текущем окне/вкладке
Цель игры - кликая по мельтешащим шарикам, набрать побольше очков.
Со временем шарики уменьшаются визуально (но не кликабельно), а закончится игра, когда все три шарика вовсе сойдут на нет.
По набранному количеству кликов и затраченному времени вычислится коэффициент кликучести, а какой вышел у вас?
13.04.2021, 15:03 [1858 просмотров]