БлогNot. Делаем простую графическую игру на p5.js

Делаем простую графическую игру на 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 просмотров]


теги: javascript random игра программирование учебное графика время

показать комментарии (1)