Пишем бота для онлайн-игры на JavaScript с применением AOP
1. Готовим ингредиенты
- Собствена сама игра. Я буду показывать на примере Пернатска
- Браузер. У меня все стандартно — Chrome
- Текстовый редактор или в чем вы будете редактировать JS код. Notepad++ подойдет
- Аккаунт для тестов, который не жалко будет потерять в результате бана
Важно! Игра должна работать в браузере, а не в клиенте. Причем не на Flash, а на HTML+JavaScript.
На выходе у нас должно получиться расширение для Chrome, которое будет играть вместо нас.
2. Делаем расширение
О том как делается расширение я не буду подробно расписывать. На хабре об этом уже писали, например, тут.
Приведу лишь коды, нужных нам файлов.
В manifest.json
В строчке «matches»: [ «pernatsk.ru*» ] вам нужно будет указать адрес вашей игры.
Файл background.js я использую для случаев, когда хочу инджектить на сайте свой JS кода. Собственно код background.js:
Automa — автоматизация браузера и визуальное программирование
Важно! Если вы не понимаете, что мы делаем в этой единственной функции, то делать бота вам пока рано. Почитайте основы JavaScript.
Вся работа у нас будет вестись в файле injected.js Его код пока такой:
Все эти файлы сохраняем в одной папке bot.
3. Первый пуск бота
4. Добавляем AOP
Для работы бота нам потребуются библиотеки. Мой любимый jQuery уже используется на Пернатске, поэтому добавлять его не будет.
Добавим плагин AOP for Jquery. По хорошему это стоило запаковать в само расширение в виде отдельного файла, но я ленив. Поэтому просто добавим код bin/aop.pack.js первой строкой в наш injected.js.
Проверим, что это работает изменив ai_on
Проверяем, что AOP нормально подключилось. В консоле разработчика теперь будет строчка «jQuery detected!» Сообщение будет только один раз, так как я отключаю совет после первого же срабатывания.
Важно! Прочитайте документацию AOP for Jquery, чтобы понять jQuery.aop.after и bot[0].unweave().
5. Зачем мы будем использовать AOP
6. Учим бота первой команде
В injected.js добавим такой код:
По этой команде наша бот-птичка будет лететь в Пернатске за шишками. Код слегка мудренный, так как в Пернатске есть небольшая защита от ботов.
Когда вы будете писать свои команды я рекомендую сначала опробовать их работоспособность в console, а уже потом переносить код в редактор.
Чтобы протестировать и проверить работу нашей команды запустим в косноле код commands.conessearch() Все работает.
7. Ищем событие на которое должен реагировать бот
Тут есть два метода первый — анализируем код игры. Долго
Второй метод — воспользоваться AOP, и после всех функций, который срабатывали вывести в лог их имя. Потом выбрать нужные.
Меняем ai_on()
У нас пойдет много-много функция. Там будет $ от jQuery или стандартная setTimeout.
Работать с этим очень не удобно изменим код еще раз.
Теперь у нас отражаются только те функции, которые еще не отображались. Их полный список мы храним в fnList.
Как автоматизировать работу в браузере
После пары минут там будут такие варианты функции для прицепки [«clearInterval», «$», «setTimeout», «timerTick», «serverTimeUpdate», «getComputedStyle», «setInterval», «tutorialArr», «showQ», «showQc», «updateBirdData», «viz», «unviz», «weatherUpdate»]
Меняя target и регулярное выражение в method мы можем подобрать ту функцию, которая нам подойдет, чтобы к ней прицепиться. Для примера, я выбираю функцию weatherUpdate теперь каждый раз как будет меняться погода наша птичка будет лететь за шишками.
7. Учим бота реагировать на события
Управляем интернетом с помощью Python
Проблема: чтобы отправить задание на проверку в университет, мне приходится проходить через лабиринт веб-страниц настолько запутанный, что несколько раз я ошибался и отправлял задание не туда. К тому же, хоть эти дело пары минут, иногда оно кажется непреодолимым препятствием, например, когда ты закончил задание глубокой ночью и тебе в таком состоянии нужно еще напрячь мозг и вспомнить пароль.
Решение: автоматизировать отправку заданий с помощью Python! В идеале это выглядит так: я сохраняю задание, нажимаю пару кнопок и в считанные секунды это задание уже отправлено. Сначала я подумал, что такое волшебство возможно лишь в сказках, но потом я нашел Selenium — инструмент, который можно запрограммировать гулять по интернету за вас с помощью Python.
Каждый раз, когда нам приходится совершать одну и ту же последовательность действий, мы получаем прекрасную возможность перепоручить её выполнение программе, которая пройдет все шаги за нас.С помощью Selenium и Python достаточно единожды написать скрипт, и можно будет запускать его сколько угодно раз, что избавит вас от необходимости совершать рутинные бесполезные действия. В моем случае, этот скрипт еще и помог мне не ошибаться с адресом отправителя.
Далее я расскажу, как написать программу, которая научила браузер отправлять задания за меня. Для этого мы познакомимся с основами использования Python и Selenium для автоматизации работы в сети. Несмотря на то что этот код работает (я пользуюсь ей каждый день!), его нельзя бездумно скопипастить в свое приложение, потому что он заточен под мой проект. Тем не менее, общий подход, описанный здесь, можно применить к любому приложению. Весь код доступен на Github.
Подготовка
Прежде чем переходить к веселой части автоматизации веба, обозначим общую структуру наших действий. Сразу писать код без предварительного плана — значит потратить несколько часов в пустую. Я хочу написать программу, которая будет отправлять мои готовые задания в нужное место Canvas — систему управления обучением которую использует мой университет.
Начнем с самого простого: мне нужно каким-то образом указать программе название задания и урока. Я поступил самым простым образом — создал папку для хранения выполненных заданий, а внутри неё завел дочерние папки для каждого урока. В этих вложенных папках я разместил выполненные задания, названные в соответствии с темой каждого урока. Программа может получать название класса из имени папки, а название задания из имени документа.
Первая часть кода — цикл, который проходит по папкам и ищет название задания и класса, которые мы храним в кортеже (tuple) Python:
# os for file management import os # Build tuple of (class, file) to turn in submission_dir = ‘completed_assignments’ dir_list = list(os.listdir(submission_dir)) for directory in dir_list: file_list = list(os.listdir(os.path.join(submission_dir, directory))) if len(file_list) != 0: file_tup = (directory, file_list[0]) print(file_tup) (‘EECS491’, ‘Assignment 3 — Inference in Larger Graphical Models.txt’)
Здесь мы задействуем файловую систему, и теперь программа знает, какой файл и куда отправлять. Следующий шаг — использовать selenium, чтобы выйти на нужную страницу и выгрузить задание.
Управляем интернетом с помощью Selenium
Перед началом использования selenium необходимо импортировать эту библиотеку и создать Selenium webdriver — браузер, которым мы будем управлять с помощью нашей программы. В моем случае я создаю движок (driver) Chrome и с помощью него открываю страницу, куда нужно отправить задание.
import selenium # Using Chrome to access web driver = webdriver.Chrome() # Open the website driver.get(‘https://canvas.case.edu’)
Как только мы открываем страницу Canvas, мы встречаемся с первым препятствием — формой авторизации. Чтобы пройти её, нам нужно ввести id и пароль и нажать на кнопку входа.
Веб драйвер можно сравнить с человеком, который видит указанную страницу первый раз: нам нужно предельно точно указать ему, куда кликнуть, что напечатать и какую кнопку нажать. Есть несколько способов указать веб драйверу, к какому элементу обратиться. Все они основаны на использовании селекторов. Селектор (selector) — это уникальный идентификатор элемента на странице.
Чтобы найти селектор определенного элемента, в нашем примере пусть это будет CWRU ID, нужно исследовать веб-страницу. В Chrome это делается с помощью комбинации клавиш “ctrl + shift + i” или нажатием правой кнопкой мыши по элементу, а затем выбором пункта “Inspect” («Исследовать элемент») контекстного меню. В результате чего откроется инструмент разработчика Chrome ( Chrome developer tools) — чрезвычайно полезное средство для просмотра HTML-структуры любого сайта.
Чтобы найти форму с селектором “CWRU ID”, я кликнул по ней правой кнопкой мыши, нажал “Inspect” («Исследовать элемент») и в открывшейся панели инструментов разработчика увидел размещенный ниже код. Строка кода, соответствующая id выбранной нами формы, выделена цветом (это строка называется «HTML тег» (HTML tag).
Приведенный в примере HTML выглядит ужасающе, но мы можем проигнорировать бОльшую часть информации и сосредоточиться на частях id = «username» и name=»username» — их еще называют атрибутами HTML-тега.
Чтобы выбрать блок id с помощью нашего веб-драйвера Selenium, мы можем использовать атрибуты id or name , которые ранее нашли в инструментах разработчика. У веб-драйверов в Selenium есть много разных методов для выбора элементов на веб-странице и часто также несколько способов выбрать один и тот же элемент:
# Select the id box id_box = driver.find_element_by_name(‘username’) # Equivalent Outcome! id_box = driver.find_element_by_id(‘username’)
Наша программа теперь имеет доступ к id_box , и мы можем взаимодействовать с этим блоком различными способами, например, набрать на клавиатуре текст или щелкнуть по кнопке (если мы её предварительно показали драйверу).
# Send id information id_box.send_keys(‘my_username’)
JavaScript Hello World
Те, кто изучал какой-либо язык, знает, что практически в любом учебном пособии первая программа, которая пишется — это программа Hello World. Почему именно Hello World? По двум причинам: первая причина — это простота кода, вторая причина — данная программа показывает основной синтаксис языка. И в этой статье мы напишем простейшую программу Hello World на языке JavaScript, а также ознакомимся с основами синтаксиса этого языка.
Сразу привожу код Hello World на JavaScript, а дальше объясню, что здесь написано:
Если Вы сохраните этот скрипт в файле под расширением «html» и откроете его в браузере, то увидите, что в окне написана надпись: «Hello World». А теперь объясняю, что здесь написано.
Вначале идёт открывающий тег с атрибутом language в значении «javascript». Данная строка означает, что внутри тега идёт код, написанный на языке javascript. На следующей строке написано: «document.write(«Hello World»);». Document — это объект языка JavaScript, а write() — это метод этого объекта, который принимает в качестве параметра строку (в нашем примере — это «Hello World») и выводит её в браузер.
Если Вы знакомы с ООП (объектно-ориентированным программированием), то тогда Вам всё стало уже понятно. А тем, кто не знаком, предлагаю для начала (только для начала) принять строчку «document.write(«Hello World»);» — как конструкцию, которая выводит в окно браузера строку.
После каждого оператора ставится «;». Хотя JavaScript позволяет этого не делать, но всё же я настоятельно рекомендую Вам их ставить, потому что практически в любом языке программирования они требуются (за небольшим исключением, по типу языка assembler), и желательно привыкать к ним с самого начала.
Когда код JavaScript написан, требуется закрыть тег .
Вот мы и написали простейшую программу Hello World на языке JavaScript.
Создано 30.09.2010 16:47:58
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 21 ):
avb-intik 02.06.2012 16:10:39
А валидатор W3C ругается уже на language = ‘javascript’ для HTML5, считая его устаревшим. Достаточно указать type=»text/javascript» (и лучше в двойных кавычках)
GoTo 19.10.2012 14:28:59
Тоже только что решил эту проблему. Страница не проходит валидацию XHTML 1.1, если написано . А так код валидный.
sasha0309 10.12.2012 20:18:24
Как называть файл
Admin 10.12.2012 20:21:56
Не важно, только латинскими буквами и без пробелов.
remox 11.07.2013 12:10:44
Здраствуйте!) Заметил, что иногда js подключают в , иногда в . Михаил, подскажите пожалуйста, как и когда правильнее, и почему) спасибо)
Admin 11.07.2013 16:57:45
Всякие функции подключают в head. А вот их вызов зачастую в body. Правил как таковых нет, надо просто смотреть, где должен быть вызов.
kudrjav 15.08.2013 12:16:12
Михаил Русаков, у меня такой вопрос. Я видел во вконтакте программный код в просмотре кода элемента и когда я посмотрел какие там длинные строки в ява-скрипт файлах (строк по моему около 4000 ) как это они это делают? вы мне сможете объяснить? А то просто кажется, что ява-скрипт не постежим для изучения
kudrjav 10.08.2013 20:10:20
Михаил Русаков, у меня такой вопрос. Я видел во вконтакте программный код в просмотре кода элемента и когда я посмотрел какие там длинные строки в ява-скрипт файлах (строк по моему около 4000 ) как это они это делают? вы мне сможете объяснить? А то просто кажется, что ява-скрипт не постежим для изучения
Zhumataev 10.09.2013 20:44:13
Здравствуйте Михаил, хотел спросить у Вас какой из языков более ценится на рынке и какой более легкий в усваивании(JavaScript, php или HTML )? Спасибо.
Admin 11.09.2013 18:06:30
Все эти языки всё равно связаны, и профессиональные сайты делаются с применением каждого из них. Так что сказать какой из них востребованнее сложно.
Максим78 11.01.2014 22:10:13
Здравствуйте Михаил!Скажите существует ли в Javascript какой-нибудь графический модуль, наподобие GraphABC в Паскале.
alexandrdante 11.01.2014 22:20:27
К сожалению — язык этого не подразумевает. Есть библиотеки для работы с графикой и для создания графиков например так http://raphaeljs.com
Максим78 12.01.2014 01:47:20
Говоря о графическом модуле я не имею ввиду создание графиков. Просто рисование графических примитивов: линий, окружностей, дуг и т.д.но НЕ ИСПОЛЬЗУЯ CSS и HTML. Не то, чтобы мне нужно было что-то нарисовать, просто нужно наверняка знать есть ли в чистом Javascript возможность работы со встроенной графикой (для учебно-иследовательской работы) Интуитивно догадываюсь, что такой возможности нет, но нужно знать наверняка.
Источник: myrusakov.ru