We are writing a bot for an online JavaScript game using AOP

  • Tutorial

If you like me like online games, but don’t like to spend a lot of time on them, welcome to cat. We won’t discuss bots whether it’s good or not, but we’ll just analyze how to make a bot for a specific online game. He will not stupidly click on the button for a timeout, but will respond to events in the browser. We will do this using Aspect-Oriented Programming (hereinafter AOP). For an example, I chose the game Pernatsk, beloved by the hubr.

1. Cooking the ingredients


We will need:
  • The game itself is. I will show on the example of Pernatsk
  • Browser. Everything is standard with me - Chrome
  • A text editor or in what you will edit the JS code. Notepad ++ will do
  • Account for tests, which will not be a pity to lose as a result of the ban


Important! The game should work in the browser, and not in the client. And not on Flash, but on HTML + JavaScript.
At the output, we should get an extension for Chrome that will play in our place.

2. Make an extension


I won’t describe in detail how the extension is done. On a habr already wrote about it, for example, here .
I will give only the codes of the files we need.
In manifest.json

{
  "name": "BOT for pernatsk",
  "version": "0.1",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": [ "http://pernatsk.ru/*" ],
      "js": [ "background.js" ],
	  "run_at": "document_end"
    }
  ],
  "permissions": [
          "storage"
  ],
  "web_accessible_resources": [
    "/injected.js"
  ]
}

In the line "matches": [" pernatsk.ru *"] you will need to specify the address of your game.
I use the background.js file for cases when I want to inject my JS code on the site. Actually the background.js code:

$.get(chrome.extension.getURL('/injected.js'), 
    function(data) {
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.innerHTML = data;
        document.getElementsByTagName("head")[0].appendChild(script);
        document.getElementsByTagName("body")[0].setAttribute("onLoad", "ai_on();");
    }
);

Important! If you do not understand what we are doing in this single function, then it is too early for you to make a bot. Read the basics of JavaScript.
All work with us will be carried out in the injected.js file. His code so far is:

function ai_on(){
        console.log("Hello world")
}

All these files are saved in one bot folder.

3. The first launch of the bot


We go to Chomre in Settings - Tools - Extensions, click on "Download unpacked extension." You should have a tick on the "Developer Mode". Specify the folder with our files.
Now let's go into our game. Turn on the developer console (we will have to do this often) - press F12 and see "Hello Wolrd". The application has earned.
Now everything that we write in the ai_on function will be processed after the page is loaded.

4. Add AOP


For the bot to work, we need libraries. My favorite jQuery is already in use in Pernatsk, so I won’t add it.
Add the AOP for Jquery plugin . For good, it was worth packing in the extension itself as a separate file, but I'm lazy. So just add the bin / aop.pack.js code as the first line in our injected.js.
Check that this works by changing ai_on

function ai_on(){
	bot = jQuery.aop.after( {target: window, method: '$'}, function(result){
		console.log('jQuery detected!');
		bot[0].unweave();
		return result;
	});
}

Check that the AOP is connected properly. The line “jQuery detected!” Will now be in the developer console The message will be only once, since I turn off the advice after the first operation.
Important! Read the AOP for Jquery documentation to understand jQuery.aop.after and bot [0] .unweave ().

5. Why will we use AOP


The essence of AOP can be very roughly expressed as follows: “ After function_1, we need to make function_2. What kind of function_1 is of little concern to us. It worked, so we have to work our way out. We won’t get into function_1. ” I repeat this very roughly. It’s better to read the normal description, for example here
How to use it? We can launch ours after any function. For example, a function worked in the browser that a monster appeared in the visibility zone. We start the function to attack him, which we have already written ourselves.

6. We teach the bot the first team


Add the following code to injected.js:

var commands = {
	conessearch:function(){
		if( window.location.pathname != "/location/conessearch") {
			window.location.pathname = "/location/conessearch";
			return false;
		}
		var buttons = $('form').eq(0).find('button');
		for (var index = 0; index < buttons.length; ++index) {
			if(buttons.eq(index).css('display') == "inline-block") {
				buttons.eq(index).mouseenter();
				buttons.eq(index).click();
				return true;
			}
		}
		return false;		
	},	
}


On this command, our bird-bird will fly in Pernatsk for cones. The code is a little tricky, as in Pernatsk there is little protection against bots.
When you write your commands, I recommend that you first test their performance in console, and only then transfer the code to the editor.
To test and verify the work of our team, we will run the code commands.conessearch()Everything works in the cosnol .

7. We are looking for an event to which the bot should respond


There are two methods here first - we analyze the game code. Long :( The
second method is to use AOP, and after all the functions that worked, print their name in the log. Then select the necessary ones.
Change ai_on ()

function ai_on(){
	bot = jQuery.aop.around( {target: window, method: ''}, function(invocation){
		console.log(invocation.method);
		return invocation.proceed();
	});
}

We will have many, many functions. There will be $ from jQuery or standard setTimeout.
It’s not very convenient to work with this; we’ll change the code again.

function ai_on(){
	fnList = [];
	bot = jQuery.aop.around( {target: window, method: ''}, function(invocation){
		var fnName = invocation.method.toString();
		if(fnList.indexOf(fnName) == -1) {
			console.log(fnName);
			fnList.push(fnName);			
		}
	});
}

Now we only reflect functions that have not yet been displayed. We store their complete list in fnList.
After a couple of minutes there will be such options for the function for hooking ["clearInterval", "$", "setTimeout", "timerTick", "serverTimeUpdate", "getComputedStyle", "setInterval", "tutorialArr", "showQ", "showQc", "updateBirdData", "viz", "unviz", "weatherUpdate"]
Changing the target and the regular expression in the method, we can choose the function that suits us in order to cling to it. For example, I select the weatherUpdate function now every time the weather changes, our bird will fly behind the cones.

7. We teach the bot to respond to events


We change the function code ai_on () again

function ai_on(){
	bot = jQuery.aop.after( {target: window, method: 'weatherUpdate'}, commands.conessearch());
}
function ai_off(){
	bot[0].unweave();
}

The ai_off function is needed to turn off the bot through the console.

8. Directions for further development


I hope this material was useful to you. What else can be done?
  • Make the switch off the bot by the button. Using the functions ai_on, ai_off
  • Make a full bot
  • Make the extension work in any browser. For example, using Kango
  • Etc

The code doesn’t really do anything, so I don’t post it.

Also popular now: