Как сделать кликер в браузере

Обновлено: 04.07.2024

Сегодня я получил ссылочку на статью на хабре о технологии создания «макроса-бота для браузерной игры». Там же было написано с сожалением, что AutoIT мало представлен на хабре. Со штуками, описанными в статье я баловался год-два назад. В последнее время использую библиотеку IE.au3, которая позволяет творить с браузерными игрушками просто чудеса.Собственно информацией об этом и хотел бы поделиться. Только сразу предупреждаю — речь идет только работе под MS-Internet Explorer. Фанатам других браузеров скажу сразу — можно тоже самое делать наверное под любым браузером, только нужно искать соответствующую библиотеку и как они работают я сказать не могу. Скажу только о библиотеке IE.au3 — она входит в комплект стандартной установки AutoIT-а, достаточно хорошо протестирована, снабжена комментариями и примерами, описанные в ней функции удобно подсвечиваются и предлагаются к завершению при наборе с соответствующими подсказками, как стандартные функции пакета (или как там назвать этот самый AutoIT).

Выбор жертвы

Вариант №1 — примитивный вариант

Ищем на экране куда тыкать, и тыкаем «мышей» куда надо. Сразу скажу – это вариант неправильный, но для общей эрудиции я приведу текст скрипта с пояснениями.Кусок №1: ищем на экране «точку отсчета», за которую можно будет зацепиться и от неё считать местоположение квадратиков куда будем обтыкивать поле.

Func GetTopLeftCorner ( $window )
Global $x = 0 , $y = 0
WinActivate ( $window , "" )
If WinActive ( $window ) Then
$size = WinGetPos ( "[active]" )
For $i = 1 To $size [ 3 ]
If CheckRGB ( PixelGetColor ( $x + $i , $y + $i ) , Dec ( "402215" ) , Dec ( "5A352A" ) ) Then
If CheckRGB ( PixelGetColor ( $x + $i - 259 , $y + $i ) , Dec ( "331A0D" ) , Dec ( "624232" ) ) Then
For $j = $i To 1 Step - 1
If not CheckRGB ( PixelGetColor ( $i + 1 , $j ) , Dec ( "000000" ) , Dec ( "3A301D" ) ) Then
$x = $i
$y = $j
ExitLoop ( 2 )
EndIf
Next
ExitLoop
EndIf
EndIf
Next
EndIf
EndFunc

Функция проверяет цвета точек, пробегая по диагонали, ищет левый край окна игры в браузере. Затем просматривает цвета точек, пробегая вверх, ищет верхнюю границу окна игры. Найденную точку я буду считать «точкой отсчета». Расстояние от неё до каждой клетки на поле игры фиксированное и легко вычисляется по индексу.Результат работы функции возвращается в глобальных переменных $x и $y, которые соответствуют координатам точки по горизонтали и вертикали соответственно.При вызове функции в качестве параметра нужно указать заголовок окна программы. Его можно задать вручную, определив предварительно с помощью утилиты AutoIt Window Info, которая устанавливается вместе с AutoIt-ом.Приведенный выше скрипт использует самодельную функцию CheckRGB:

Func CheckRGB ( $color , $min , $max )
Local $rgb [ 3 ] [ 3 ]
$res = True
$rgb [ 2 ] [ 0 ] = BitAND ( $min , Dec ( "FF0000" ) ) / Dec ( "10000" )
$rgb [ 1 ] [ 0 ] = BitAND ( $min , Dec ( "00FF00" ) ) / Dec ( "100" )
$rgb [ 0 ] [ 0 ] = BitAND ( $min , Dec ( "0000FF" ) )
$rgb [ 2 ] [ 1 ] = BitAND ( $color , Dec ( "FF0000" ) ) / Dec ( "10000" )
$rgb [ 1 ] [ 1 ] = BitAND ( $color , Dec ( "00FF00" ) ) / Dec ( "100" )
$rgb [ 0 ] [ 1 ] = BitAND ( $color , Dec ( "0000FF" ) )
$rgb [ 2 ] [ 2 ] = BitAND ( $max , Dec ( "FF0000" ) ) / Dec ( "10000" )
$rgb [ 1 ] [ 2 ] = BitAND ( $max , Dec ( "00FF00" ) ) / Dec ( "100" )
$rgb [ 0 ] [ 2 ] = BitAND ( $max , Dec ( "0000FF" ) )
For $i = 0 To 2
If $rgb [ $i ] [ 0 ] > $rgb [ $i ] [ 1 ] Or $rgb [ $i ] [ 1 ] > $rgb [ $i ] [ 2 ] Then
$res = False
ExitLoop
EndIf
Next
Return $res
EndFunc

— Функция проверяет цвет точки, передаваемой в качестве первого параметра $color на то, чтобы она находилась в цветовом диапазоне от $min до $max, с учетом трех составляющих цвета точки (RGB). Возвращает, соответственно True или False.

Непосредственно процедура обтыкивания всех клеток на поле выглядит так:

For $i = 1 To 12
For $j = 1 To 10
MouseClick ( "left" , $x + ( $i * 40 ) + 103 , $y + ( $j * 40 ) + 172 , 1 , 1 )
Sleep ( 25 )
Next
Next

Тут все понятно. 10 и 12 в заголовках цикла это размер поля в клетках. Константы в параметрах MouseClick вычислены с помощью той же утилиты AutoIt Window Info, относительно определенной ранее «точки отсчета». Значение задержки в Sleep можно менять по своему желанию – это будет влиять на скорость обтыкивания, но слишком быстрое может приводить к ошибкам выполнения скрипта игры.

Преимущество этого метода – он работает в любом браузере. Везде где можно открыть окно игры так, чтобы была видна вся пашня.Недостаток – окно игры должно быть всегда открыто, нужно подбирать скорость обтыкивания и во время работы скрипта нельзя трогать мышь (иначе тыкнет не там где надо).

Полезные статьи про автоматизацию действию пользователя в браузере

Автокликер для браузера с помощью Human Emulator.

Автокликер это программа, которая записывает все действия связанные с управлением мыши и клавиатурой и после этого воспроизводит все эти действия автоматически. Соответвенно, автокликер для барузера это программа, которая повторяет необходимые действия в браузере.

Во всех версиях программы есть все необходимые инструменты для записи и управления клавиатурой и мышь. Для записи используется инструмент Макрос, который записывает ваши действия во встроенном в программу браузере.

Макрос.

Работа с Макросом описана в статье Запись действий пользователя в браузере Human Emulator Studio с помощью Макроса. Эта работа идентична во всех версиях программы. Единственное, что для написания автокликера нужно будет в настройках Макроса указать галочки Полная эмуляция мыши и Полная эмуляция клавиатуры. В этом случае будет использовать реальные клавиатура и мышь.

Эмуляция клавиатуры.

Для управления клавиатурой во все версии программы добавлен объект keyboard. Этот объект обеспечивает полное управление всеми возможностями клавиатуры. Причём в двух режимах: полной эмуляции клавиатуры и передача действий от клавиатуры в браузер.

Полная эмуляция клавиатуры.

В режиме полной эмуляции клавиатуры Human Emulator управляет вводом с реальной клавиатуры, то есть он передаёт события таким образом, как будто это делает реальный человек нажимает на клавиши клавиатуры. В этом случае все действия с клавиатурой будут выполняться в любом активном окне, будь то окно встроенного в программу браузера или это открытое окно программы Блокнот. Функции полной эмуляции.

Пример работы на php в режиме полной эмуляции:

Пример ввода с клавиатуры в открытое окно блокнота для программ на основе Internet Explorer:

В Human Emulator Studio работа с командой input немного отличается, поэтому для того что бы выполнить такое же действие как в примере выше нужно либо использовать буфер обмена:

Либо использовать функционал для управления внешними окнами.

Пример на пхп для работы в Studio:

Передача событий от клавиатуры в браузер.

Всем привет, продолжаем изучать автоматизацию на основе программируемого автокликера.

Начнём с подпрограмм, что это и зачем они нужны.

Подпрограмма это список действий, который будет часто повторяться в вашей программе, но не обязательно подряд. Например, мы используем такие действия (пока напишем в псевдокоде):

при этом подразумевается, что вам нужно сделать так с множеством страниц, например 20 штук.
Если бы нам нужно было поставить лайки только на одной странице, мы бы обернули действия в цикл и нам бы этого хватило.

Но что если нужно открывать другие страницы, а может, между делом совершать совсем другие действия (публиковать пост, писать комментарии и т.д.) Тогда имеет смысл выделить наш участок кода в отдельную функцию.

SUB(имяФункции) - определяет начало функции, общепринято все функции выносить на самый верх программы, либо выносить в отдельный файл, но это необязательно и больше для красоты, расскажу об этом в одном из следующих постов.

Имя функции определяете вы сами, старайтесь задать такое, чтобы вам было понятно, что делает эта функция, например ставит лайки в вк - VKLikes, ищет в эксель нужную строку - ExcelFindString и т.д.

END_SUB - соответственно обозначает конец вашей подпрограммы(функции).

Теперь вы можете в любой момент вызвать вашу функцию таким образом - имяФункции()

Почему это удобно? Представим, что вам потребовалось ставить лайк не на каждый пост, а на каждый второй, теперь вам придется проходить по всей вашей программе, искать каждый момент где вы ставите лайк и менять там, добавлять ещё одну прокрутку, если же это у вас выведено в отдельную функцию, вам достаточно поменять это один раз в одном месте. Удобно? а то! Ну и отдельный плюс - сокращение вашего кода. Совсем недавно я изменил свой скрипт, изначально я писал его просто как список действий, без подпрограмм, это заняло у меня 2200 строк, после *рефакторинга скрипт стал занимать 700.

*рефакторинг - процесс улучшения кода без внесения новых возможностей.

Также важной возможностью является передача в вашу функцию какого-либо параметра, который менял бы исполнение этой функции в зависимости от значения переменной.

Вот участок моей реальной программы:

Да, ваш скрипт может целиком выглядеть как вызов различных функций, это нормально и даже очень хорошо. Я передаю в функцию TWPersonalPost переменную, которая имеет значение от 1 до 10, в зависимости от этого, функция открывает тот лист Excel с которого мне нужно скопировать информацию:

Тогда в названии вашей программы нужно указать переменную, например SUB(VKlikes, $name)

и внутри подпрограммы с помощью команд IF или SWITCH сделать различные действия в зависимости от значения переменной.

Анализ экрана

Анализ экрана позволяет добавить в вашу программу ту самую вариативность исполнения, программа будет менять исполнение действий в зависимости от происходящего на экране (вот мы и добрались до создания собственного искусственного интеллекта. ну почти)

для этого clickermann представляет нам множество функций, главной из которой является GETSCREEN.

GETSCREEN - делает снимок экрана и помещает его в буфер для анализа, буквально это print screen. Мы можем сделать как снимок всего экрана, так и снимок определенной области, зачем? Ну это немного ускоряет выполнение скрипта, ведь анализировать часть проще чем весь экран. Во вторых на всем экране могут быть похожие элементы или пиксели такого же цвета, которые помешают нам. Для этого необходимо в скобочках указать координаты двух углов, верхнего правого и нижнего левого. Например так GETSCREEN(649, 473, 883, 631).

Тогда в буфер сохранится выделенный красным криво-прямоугольником участок. Ну например если мы хотим нажать одну из этих зеленых кнопок, и мы знаем что они всегда находятся в этой области.

Хорошо, мы сохранили изображение, как его проанализировать?

IF_PIXEL_IN - ищет пиксель заданного цвета в снимке, и возвращает его координаты. Обязательно нужно указать координаты (если вы сделали снимок области, указываем такие же координаты, что и для GETSCREEN) и цвет искомого пикселя. В коде это выглядит так:

$_return1 \ $_return2 - переменные созданные самой программой, в них лежат координаты (по Х и по Y) для первого найденного пикселя такого цвета в этом участке изображения. Мы можем проделать любые действия с ними, например нажать левой\правой кнопкой мыши, остановить\продолжить исполнение программы и так далее. Для этого нужно поставить эти действия между IF_PIXEL_IN и END_IF которое обозначает конец условия, также как в команде IF.

Откуда мы узнали какой цвет пикселя нам нужно искать? Для этого достаточно навести на нужное место и посмотреть в окно определения цвета clickermann.

Оранжевым изобразил указатель мыши в момент создания этого снимка.

Но нужно быть осторожным, многие сайты меняют цвета кнопок при наведении на них, так и здесь на пикабу, кнопка "картинка" не меняет цвет при наведении, а вот видео и текст меняют и при наведении на них мы увидим цвет:

Как видно, при наведении кнопка побледнела, в отличии от "картинка", кстати @SupportTech, а не баг ли это?))

Получается, чтобы узнать цвет пикселя нам нужно навести на кнопку, но при наведении, цвет меняется, в своё время я немало посидел, над причиной, почему моя программа не находит цвет, когда вот он туточки.

Для этого мы можем пойти простым путём, делаем скриншот экрана одним из следующих способов, в зависимости от вашего просветления:

Ну разве что последний способ не очень подходит, после чего открываем картинку и уже на ней наводим на кнопку и смотрим её цвет:

С помощью этой функции, также можно проверять, открыто ли нужное окно у вас, или ваша программа начинает творить фигню. Например, мы знаем, что Excel выглядит так:

наверху у него всегда цвет пикселя

Теперь мы можем создать проверку, например мы работаем в Excel и браузере, соответственно в браузере сверху нет цвета пикселя Excel, тогда если мы находим такой пиксель - выводим оповещение:

SOUND("имя_файла.wav") - воспроизводит звуковой файл в ваши динамики, давая вам знать о проблеме или например успешном окончании программы. Только .wav файлы. Файл должен находиться в папке с программой clickerman.

Теперь программа позовёт вас, если что-то пойдёт не так и будет ждать. Как вариант можно в действиях указать нажатие левой кнопкой мыши по значку Excel, для его раскрытия и потом ещё одну такую же проверку, в 90% случаев именно из-за лишнего закрытия-открытия окна что-то идёт не так.

Мы разобрали случай, когда цвет пикселя не повторяется на экране, то есть у нас есть только одна кнопка "текст" например, но что, если у нас множество кнопок одного цвета, и цена ошибки слишком высока, как то так:

Тогда следует использовать анализ экрана по совпадению картинки, а поможет нам функция

IF_PICTURE_IN - ищет образец картинки в сохраненном участке изображения. Только файлы bmp формата, пример:

Чтобы повысить вероятность нахождения, можно указать % точности совпадения. Например так:

IF_PICTURE_IN (20,20, 300, 300, "somefile.bmp", 0, 90) тогда, 90% совпадения будет достаточно для запуска действий внутри IF.

Как получить картинку формата .bmp?

Есть два способа, самый точный это командой SCREENSHOTEX - сохраняет участок экрана как отдельный файл в папке с программой.

и второй способ, включаем режим лупы

Теперь смотрим на окно лупы в clickermann и наводим на нужное место, нажимаем ALT + G

и скриншот указанный на экране лупы будет сохранен в папке программы внутри папки screens.

Теперь это изображение мы можем использовать для поиска его при исполнении скрипта.

Мы рассмотрели две основные функции для анализа экрана, по пикселю и по изображению. Вы можете ознакомиться с остальными функциями в справке программы, возможно найдете функцию которая больше подходит вам для исполнения вашего скрипта, но эти две на 95% покрывают все потребности.

Программы и Браузеры

179 постов 3.6K подписчик

Правила сообщества

-Ставьте наши теги, если Ваш пост о программе, приложении или браузере(в том числе о расширениях, дополнениях в нему), его недоработке, баге, обновлении. Это может быть пост - обзор или отзыв.

-При возникновении споров относитесь с уважением друг к другу, а так же приводите аргументы.

Разрешено всё, что не запрещено правилами Пикабу.

Не знаю, как применить написание таких скриптов в моей работе, но огромный плюс за ценную инфу и хорошее изложение!

А подскажите, какие функции нужны что бы сделать так:

Кликер работает, доходит до поля где нужно вручную ввести текст с бумажки, ждёт ввода, после ввода продолжает дальше.

Это можно как-то на горячую клавишу вывести? Например, ввели текст, нажали "энтер" и он пошёл дальше.

Делать проверку через анализ экрана сильно замороченно, я уверен, что это можно как то проще сделать.

где можно увидеть наглядные примеры с использованием этого софта? Программы и тд. Группа в вк чет мертвая совсем у них

Это очень круто

В пятницу познала дзен с битриксом, всего-то 200 правил для купонов с 1 купоном создать.

В субботу поняла, что можно использовать ваш совет про кликер, вручную вставляя в буфер обмена данные

Да будет завтра битва! ;)

Реализовал кучу функций аля

LCLICK(512,331) //клик по адресу

Понял, что уже реализованы горячие клавиши в разделе шаблонов.

Спасибо за информацию, программу установил и даже юзаю))

Вроде инженерное образование, вроде умею читать. Прочёл все три поста несколько раз, но так и не смог написать ничего работающего(
Я один такой тупой?

Мне больше BurundukPro подходит, есть два режима, для тех кто не хочет морочиться с программированием и для программистов.

Несмотря на то что продолжение не получило такого отклика как начало, ты все-равно молодец.

Хотелось узнать как в Индии относятся к фильму ПиКей в плане его антирелигиозности

Ответ на пост «Как автоматизировать однотипную, монотонную работу бесплатно и без навыков программирования»

Эх, сколько раз меня выручала автоматизация! Вспомнил тут пару случаев. (если что то использую скрипты в AutoHotkey (AHK)).

Первый был когда еще в органах работал. Начальство придумало - а давайте все фабулы дел вносить в базу данных. При этом база данных не воспринимала копировать-вставить (что тупо), но база не публичная и вход через матюки и старый интернет эксплорер, так что работали как есть. Сидишь, придумываешь как это сократить и потом впечатываешь. Особенно сильно негодовали мы с другом, так как у нас были не перспективные дела (в отделе на каждого следака было по 10 дел в месяц, а у нас с ним напару под сотню, именно чтобы разгрузить остальных). И нам печатать было больнее всего. И тут я вспомнил про АНК и что он умеет печатать из буфера обмена - т.е. для меня это было копировать-вставить, а база воспринимала это словно я напечатал. Экономия во времени была колоссальная.

Да и мелкие задачи, если их можно автоматизировать, тоже переносятся в АНК. Из того что помню:

- тоже из учётки. Перешла к нам в отдел женщина, которая в работе разбиралась но с пк была на Вы. Очень мне не нравилось что она постоянно просила меня подойти и поставить апостроф, т.к. у неё не получалось (много раз в день, Карл!). На очередную просьбу я просто сделал ей скрипт который этот апостроф ставит по нажатию на Pause, а на клавиатуру напечатал на самоклейке этот апостроф и на эту кнопку наклеил.

- в онлайн игре играл в 9 окон (ходил на рейд в соло в л2, управляя всем из одного) - это не продвинутый бот и пришлось помучаться но в итогесмог отправлять команды в свёрнутые окна не открывая из, было удобно; в другой игре был тупой крафт, где тоже нужно было прокликивать одни и те же места, тоже скрипт сработал.

- часто работаю в премьер про (программа видеомонтажа) и там некоторые удобные функции не реализованны, увы. Но они прекрасно допиливаются скриптом. Те же накидывания эффектов. Приходится переключаться на отдельную панель, имкать там эффект и перетаскивать на слой.Но те кто работал в АЕ с Fx console меня поймет, это можно сделать удобнее - скрипт сам делает все эти действия, еще и за секунду. Или еще пример. Часто приходится повышать уровень громкости, и это однотипное движение, особенно если видеофрагментов под сотню. Все вместе тоже нельзя - автоматика выровняет по самому громкому кусочку, что попортит все. Выручает скрипт. И еще полезность - горячие клавиши нельзя повесить на правую кнопку мыши, но иногда хочется - опять скрипт. Сделал перемещение курсора себе на пкм. Он еще и щупает что лежит под курсором и если там кусочек видео, то выпадает меню (как обычно), а если пустота то срабатывает горячая клавиша.

- надо было отстабилизировать много фрагметов видео. Алгоритм следющий - выделяем фрагмент, набрасываем на него стабилизатор, жмем "анализ", ждём пока пройдет анализ (каждый раз разное время, зависит от длинны кусочка видео), и переходим к следующему кусочку. И так пару сотен кусков. С коллегой решили что лучше потратить время на настройку скрипта и оставить компьютер на ночь чем сидеть руками делать. И помогло что скриптом можно определять открыто ли окно анализа, на что мы и ориентировались.

Если вы подумали, что для того чтобы сделать всё тут описанное нужны навыки програмирования, то вы ошибаетесь. Большая часть примеров была сделана путем копирования скрипров которые записаны в русской документации по программе (прямо напрячься пришлоь только в скрипте для игры). Да и на самом деле сейчас есть много других программ, в которых даже не нужно ничего писать текстом, записывай действия и все (как в оригинальном посте).
Поэтому помните, что автоматизация это бро. Иногда стоит потратить время на обдумывание однообразной задачи и попытки её автоматизировать.

Привет, наверняка многим знакома проблема однотипных действий за компьютером, особенно на офисных работах. Заполнение каких-то данных в таблицу, размещение постов в социальных сетях, поиск в базе данных и заполнение отчетов.

Я сам долго мучался над такой проблемой, но так как я очень ленив, стал искать способ как это дело можно автоматизировать и вот уже два года, я с некой периодичностью создаю новые или редактирую старые программы действий для компьютера (скрипты или сценарии), позволяя ему работать вместо меня, а себе гонять чай в рабочее время посматривая на экран. Я не стал супер экспертом по автоматизированию, но считаю, что моих знаний достаточно, для того, чтобы я смог научить этому других людей.

И если про автоматизацию работы в эксель уже написано немало постов, то что делать тем, кто работает вне этой замечательной программы? Для этого я хотел бы создать серию постов, в которой попробую научить вас автоматизировать работу с помощью программы clikermann

Почему она?
- Она бесплатная. Совсем. Никаких пробных версий, никаких реклам в самой программе, создана на чистом энтузиазме и добровольных пожертвованиях автору.
- Интерфейс максимально прост, как и язык написания сценариев.
- Есть возможность записи действий, можно полностью обойтись без редактирования или создания с нуля своего скрипта.

- Встроенный редактор.
- Не требуются права администратора для установки, скачал - запустил.

- Русскоязычная справка по программе и русскоязычное сообщество.

Что можно с помощью неё делать?
Лично я автоматизировал работу с 1С, SAP, сайтами, тем же экселем, публикации в социальных сетях. Так же можно запрограммировать действия в играх, реакцию на происходящее на экране, набор текста, буквально что угодно.

Всего лишь иконка этой программы

В первой части уроков познакомимся с интерфейсом программы:

Так как мы пытаемся сделать все как можно проще, расскажу только про самые необходимые кнопки. Создадим свой первый скрипт и попробуем написать какой-нибудь простой скрипт, своего рода Hello world от мира автокликинга.

Нажимаем на кнопку создания скрипта (1) и кнопку редактора (3).

Интерфейс редактора

Нажимаем на сохранить как (4) выбираем место, где он будет храниться (желательно оставить его в папке с программой) и имя сценария. Сама программа и скрипты будут весить совсем немного, 640 КБ действительно хватит всем, для скриптов уж точно, поэтому можно за это не переживать.

Создадим скрипт который будет брать адрес страницы из таблицы эксель, открывать его в браузере и так несколько раз. Вот что у нас получилось:

Ну и собственно, как выглядит скрипт, который делает всю эту работу:

Мы используем несколько команд:

WAIT - небольшая задержка между выполнениями действий, нужна для того, чтобы компьютер успевал открывать страницы, переключать между окнами и так далее, нужна почти между всеми действиями.

RCLICK - Соответственно всё тоже самое, только правой кнопкой мыши, вызывается тем же набором клавиш, просто нужно заменить в скрипте L на R.

Шаблоны копирования и вставки (CTRL + C, CTRL +V) они уже есть в разделе шаблоны, нет необходимости их прописывать самому, просто выбираем подходящий.

KEYPRESS - В том случае, если нам нужно нажать какую либо кнопку, выбираем эту команду, кстати чтобы не прописывать в ручную, эту команду тоже можно выбрать из списка команд:

Возможно на первый раз покажется, что это довольно сложно, однако поработав в программе несколько минут вы уже привыкните к такому пошаговому описанию действий и легко будете разбираться в них.

В следующей части мы разберем более сложные примеры скриптов, рассмотрим как их сделать удобнее с помощью контролирования количества повторений через циклы и подсчёт чего либо с помощью переменных. Если вам интересна эта тема и стоит её развивать, буду рад, если вы дадите знать об этом в комментариях.

Программы и Браузеры

179 постов 3.6K подписчик

Правила сообщества

-При возникновении споров относитесь с уважением друг к другу, а так же приводите аргументы.

Разрешено всё, что не запрещено правилами Пикабу.

Там много фич. К примеру, там вообще не нужно знание чего-либо и достаточно прсотонажать кнопку "запись" и он начнет записывать все дейтсвия пользователя. После чего нажимаем кнопку пуск и оно воспроизводит. МОжно потом привязать это на клавишу. Все можнго делать просто тыкая нужные компоненты. Для тех кто хочет автоматизировать что угодно - там поддержка почти полноценного JS. Попробуйте, авось зайдет, может и проект оживет. Буду рад если он будет полезен хоть кому-то

Но запустить можно где и под Linux и даже под MacOS

Да и мелкие задачи, если их можно автоматизировать, тоже переносятся в АНК. Из того что помню:

Большинство тех, кто начинает изучать программирование, начали это из-за желания сделать свою игру. Нууу… я не исключение, но судьба меня занесла в веб разработку.

Ладно, давай ближе к делу. Создать кликер при помощи pixi.js.

Задача тривиальная, но т.к. в разработке игр я мало разбираюсь, то пришлось изучить чуть лучше эту тему.

Почему Js? Почему pixi.js? Почему вообще кликер?!

— Я решил показать лишь свою реализацию задачи. Не хочу учить кого-то какими технологиями пользоваться, как писать код. Просто мое решение задачи.

Перед началом написания кода:

Это видео с процессом создания игр. Если вам лень читать, то можно посмотреть и послушать

Во-вторых весь код я вставлю картинкой, но в конце статьи будет ссылка на github с исходниками проекта, чтобы вы могли сами потыкать.

В коде я оставил поясняющие комментарии для вас, надеюсь понятно будет.

Для начала мы объявляем алиасы и инициализируем само приложение.

Создаем нужные переменные под все элементы игры и загружаем картинки.

Для картинок я выбрал формат атласа.

Если не знаком с атласом, то это json формат для загрузки большого количества картинок за один раз.

Вот так это выглядит в коде

Я создавал это с помощью TexturePacker. Делать такое вручную, на мой взгляд, не целесообразно.

С помощью функции setup я разбираю атлас, задаю расположение элементов, стили для текста, добавляю начальное значение очков.

Это стандартные действия для всего(расположение). Самое интересное это три свойства у target. interactive, buttonMode и on(«pointerdown», handlerClick). Первые два нужны для взаимодействия клика и элемента target. on — это обычный обработчик событий.

Теперь нам нужно написать все необходимые функции для работы игры.

Игровой цикл — gameLoop
Состояние игры — play
Обработка клика — handlerClick

gameLoop просто вызывает функцию state.

В play я проверяю значение timer(он равен 10) и разрешаю клик по кнопке, так же обновляю размеры target.

handlerClick идет проверка на возможность клика и производится клик.

Из недостатка, который я вижу, это изменение размеров у target элемента. Он изменяется с 0.9 до 1. Сразу. Без анимации. Но когда ты играешь это не заметить, оставил как есть.

Как и обещал, ниже ссылка на github проект.

Если вы не сталкивались с pixi, но хотите развернуть игру у себя, то вам потребуется сервер. Я использовал openserver. Это нужно для ajax запросов.

Читайте также: