Tutorial Creating Userscripts (Slither.io)

Hexui Undetected CSGO Cheats Sinkicheat PUBG Cheat

Xploit

Ride the Pony
Dank Tier Donator
Nobleman
Dec 27, 2016
142
1,228
1
Hello Guided Hacking Community,
I decided to write up a small tutorial on setting up a userscript for slither.io (I'm sure this will help with other games as well).
The way i started to learn was by looking at the Slither.io games source code and by studying other peoples userscripts (NOT SKIDDING)..

You can easily View the games source code by right clicking the page or going to
your browser menu and selecting the developer tools / firebug and so on.. You should be able to find a '.js' file for the game..
After you find it go ahead and download the file.. Open it in a text editor , I highly suggest Notepad++.. You will notice the code
is all tightly put together, You can easily fix this by using a script or using an online tool..


Once you can read the script a bit better , go ahead and run through it and find some variables you may think are useful.

Every interesting variable should be copied into a second text file for keeping, This text file will be used to help you test.

I will provide a small list of variables ive found so far from the games code below..

C++:
My Information -
=======================================
my_nick               # My Playername;
window.snake.yy       # My Y Coordinate;
window.snake.xx       # My X Coordinate;
snake.fy              # ??
snake.fx              # ??
rank                  # My Current Rank;



Server / Connection / Performance -
======================================
want_close_socket     # Uses Int / Have not tested;
rdps                  # Connection Bytes/sec;
window.bso.ip         # Current Server IP Address;
window.bso.po         # Current Server Port;
window.fps            # My Frames Per Second;
high_quality          # Game Quality?;


Game Information -
======================================
snake_count           # Total Snakes in Current Game;
foods_c=0;            # ??
foods=[];             # ??
snakes=[];            # ?? Possibly find other players IP, ID, XPos, YPos, Length, Rank Etc..?
preys=[];             # ??
sectors=[];


Misc / Unknown / Not Tested -
======================================
view_yy              # ??
view_xx              # ??
eaten=!0;            # ??

Go ahead and copy that or build your list from scratch.. After you have collected the data needed..
Go ahead and open up TamperMonkey(You did know you were going to be needing this right?).
Make sure you are creating a new script.. And go ahead and choose the option ECMAScript 5.

Now you should get a sample code like this..

C++:
// ==UserScript==
// [USER=55501]Name[/USER]         New Userscript
// [USER=55501]Name[/USER]space    [url]https://tampermonkey.net/[/url]
// @version      0.1
// @description  try to take over the world!
// [USER=38098]Auth[/USER]or       You
// [USER=48418]mat[/USER]ch        [url]https://*/*[/url]
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();
Go ahead and clear out the code within the function.. So what you are seeing is called a Self-Executing Anonymous Function..
I Read up on this myself as i am actually sort of new to everything javascript related.. I'm gonna break it down..

C++:
(function() {
   // Code here..
})();
So what you are seeing is a normal anonymous function

C++:
(function() {
   // Code here..
})
Adding the parentheses at the end are what make the function run/execute immediatly.

C++:
 ();
So if you want to go ahead and run a test userscript on slither.io , Make sure in the userscript info you make the match point to slither.io
Example :
C++:
// ==UserScript==
// [USER=55501]Name[/USER]         New Userscript
// [USER=55501]Name[/USER]space    [url]https://tampermonkey.net/[/url]
// @version      0.1
// @description  try to take over the world!
// [USER=38098]Auth[/USER]or       You
// [USER=48418]mat[/USER]ch        [url]https://*/*[/url]                       # Change this to [url]https://slither.io/*[/url]
// @grant        none
// ==/UserScript==
Now within the function go ahead and place this code.

C++:
al3rt("I Have been Executed.");
As soon as you load up slither.io with this script running , you should recieve an Alert on the top of your screen
with the text you supplied..


Now that you know about the basics on how this is working, Lets go ahead and start writing a userscript for slither..

So we now have a script looking like this..

C++:
// ==UserScript==
// [USER=55501]Name[/USER]         TeSt
// [USER=55501]Name[/USER]space    [url]https://tampermonkey.net/[/url]
// @version      0.1
// @description  try to take over the world!
// [USER=38098]Auth[/USER]or       Xploit
// [USER=48418]mat[/USER]ch        [url]https://slither.io/*[/url]
// @grant        none
// ==/UserScript==

(function() {
   al3rt("I Have been Executed.");
})();
First things first in between the ending parentheses type the word "window" in without quotes like so..
C++:
(function() {
   al3rt("I Have been Executed.");
})(window);                                              <-- Just like that..
Secondly you may want to rename your reference to 'window' using the first pair of parentheses after the word function..
You can rename this to almost anything most people will use just a single letter to keep things simple instead of writing
C++:
window.snake.xx <- Grabs the snakes X position..

You can use a single letter

w.snake.xx; 

or give it a name

slither.snake.xx;
You do this simply by putting the desired name in the first pair of parentheses like so

C++:
(function(w) {                                     <-- Just like that..
   al3rt("I Have been Executed.");
})(window);
As you can see i used (w) It didnt have to be a single letter but it makes it less of a hassle to write out the variables..


Next go ahead and remove that al3rt(); we created.. And were going to be making an automatic "Update" function.. pretty easy dont worry..

So within our anonymous function create a new function named Update or whatever you want to name it..

C++:
function update() {
    // Code here...
  }
Theres two ways we can go about doing this... The first way using setTimeout(); on the update function from within the update function like so...

C++:
function update() {
	console.log("Update Function Ran !"); // Your going to want to do this for testing purposes..
    setTimeout(update, 3000)              // Run the function every Three-Seconds.
  }
Now the second way will be using the setInterval function with a function inside of it..

C++:
setInterval(function update() {
console.log("Update Function Ran !");
}, 3000);
if you test either of these , you will need to open up the developer tools and go to the console to see that they are working

So now that you have

1. A 'Self-Executing Anonymous Function'
2. A Function that constantly runs itself

You now have a base for Slither.io userscripts.. But if you want to make it a little better lets add some key binding functionality!

So in order to do this lets go ahead and create a new function in our Anonymous Function.. Call it hookKeys
C++:
(function(w) {

function hookKeys() {
    
}
 
setInterval(function update() {
     // Code here..
}, 100);

})(window);
Now that we have our function we are going to need to add an 'Event Listener' Lets go ahead and do that now..

C++:
function hookKeys() {
    document.addEventListener('keypress', function(e) {
		// Set Keys Here;
    });
}
Lets break down some information on whats going on here..

an event listener takes in '2' Required Parameters and '1' Optional one which i wont get into the optional one...

So the '2' Required Parameters are like so..

C++:
document.addEventListener(event, function);
In our code i added a 'keypress' listener but you can choose others such as 'keyup', 'keydown', 'click', 'mouseover', 'mouseout' etc..
So what we did in our code is add in the 'keypress' event to our event parameter and we created a function for our function parameter..

Within our function's parentheses we place a parameter that refers to our event itself..

So far we should have our code looking like this..

C++:
(function(w) {

function hookKeys() {
    document.addEventListener('keypress', function(e) {
		// Set Keys Here;
    });
}

setInterval(function update() {
     // Code here..
}, 100);

})(window);
Now if you want to add keys to your event, Which is the whole point of making this you can go about doing this two different ways

Method 1.
Use If Conditions to check if that key is pressed , if it is then run a code..
C++:
function hookKeys() {
    document.addEventListener('keypress', function(e) {
		if(e.keyCode === 49 || e.which === 49) al3rt("'1' Has been pressed!");
    });
}
e.which is just like e.keyCode they are both properties of the event.

Method 2.
Use a Switch Case for recognizing keyPresses!
C++:
function hookKeys() {
    document.addEventListener('keypress', function(e) {
		switch(e.keyCode || e.which) {
			case 49:
				al3rt("Key [1] Pressed!");
				break;
			case 50:
				al3rt("Key [2] Pressed!");
				break;
			default:
				return;
		}
    });
}
Using this method seems a whole lot cleaner to me , its checking if the properties keyCode or which match the case then run the code.
the Default case is what is ran if none of the cases match..

So now that you have learned a bit about adding key events and you have your automatic updating code, we may need to fix the script a bit..
First thing you would need to do is you dont want your key presses to be ran when your inputting your username or in the menu ,
So you will need an if condition to check whether we are playing or not! , you may use 'window.playing' for now.. so lets put this in our code..

C++:
function hookKeys() {
    document.addEventListener('keypress', function(e) {
		if(w.playing) {
		switch(e.keyCode || e.which) {
			case 49:
				al3rt("Key [1] Pressed!");
				break;
			case 50:
				al3rt("Key [2] Pressed!");
				break;
			default:
				return;
		}
	  }
    });
}
This will be checking if we are playing , if we are , run the switch case on key press.. if we arent well do nothing..

Lets take a look at our base so far..

C++:
(function(w) {

function hookKeys() {
    document.addEventListener('keypress', function(e) {
		if(w.playing) {
		switch(e.keyCode || e.which) {
			case 49:
				al3rt("Key [1] Pressed!");
				break;
			case 50:
				al3rt("Key [2] Pressed!");
				break;
			default:
				return;
		}
	  }
    });
}

setInterval(function update() {
     // Code here..
}, 100);
})(window);
Now if you noticed your keyPresses arent working.. Can you find the problem in this code? Something is missing..

Try finding the problem before you continue onto the next line...

---------------------------------------

If You couldnt find the problem.. The thing thing we were missing is the function call for our hookKeys..

Go ahead and add that after your update function..

Now you have working key presses, and your base is coming along great!

Now what do we do? Well i have not told you what to do with your update function.. And we havnt made any functions to make things easier for ourselves..

So first lets go ahead and make something to help us create elements on slither.. this will be sort of easy , I've seen this function used plenty of times
on other scripts made for slither.. so lets check it out !


C++:
function appendDiv(id, className, style) {
        var div = document.createElement("div");
        if (id) {
            div.id = id;
        }
        if (className) {
            div.className = className;
        }
        if (style) {
            div.style = style;
        }
        document.body.appendChild(div);
    }
Honestly i dont know who really made this function.. So whoever made it .. Great job you made it into my tutorial.

What its doing is taking in three parameters [The id you want your div to have , the class your want your div to have and the styling of the div itself];
The function creates a variable that creates a div and then checks if the parameters were given then setting the div's properties to the parameters values.
once all that is done it appends the child, in other words adds it to the document.. So you can throw this into your project or we can try to better it..

Instead of limiting ourselves to only adding div's lets give this function a bit more flexability.. Change the name to appendElement() and give it these parameters..

C++:
function appendElement(type, id, className, style) {
        var elem = document.createElement(type);    // Make sure to replace the string "div" with your type parameter.. and rename the variable..
        if (id) {
            elem.id = id;
        }
        if (className) {
            elem.className = className;
        }
        if (style) {
            elem.style = style;
        }
        document.body.appendChild(elem); // Dont forget to replace all other uses of the original variable name of div with your new variable name..
		
    }

Now that we have updated the function we can now create any element we want (i think)

I've used this code to create a canvas and a div so far.. Shouldnt have any problems creating anything else?..

In my opinion our base is pretty much done.. But if you want to add more functions like getSnakeX() or things like that.. Thats up to you..

But the tutorial isnt over.. Now we are going to get into creating the elements and applying our snakes X and Y position onto them..

So on the way top of your script right above the hookKeys() function , Go ahead an set up a spot for your variables !

C++:
var playerPositionX = null,
	playerPositionY = null;
Now we have two variables for our X and Y Positions.. This could have easily been put into one variables but i felt like throwing in what it looks like
to have more than on variable without having to type var multiple times..

Lets create one more variable for our div Styles!

C++:
var playerPositionX = null,
	playerPositionY = null,
	divStyling      = "color: #FF0000; font-family: \"Arial Black\", Gadget, sans-serif; font-size: 20px; position: fixed; opacity: .75; z-index: 11;";
I Took that style code from my own slither script ive been working on..

So now that we have our variables lets go ahead and use our appendElement Function!

under our hookKeys function type the following..

C++:
appendElement("div", "myPositionX",    "GuidedHacking", divStyling + "top: 100px;");
appendElement("div", "myPositionY",    "GuidedHacking", divStyling + "top: 120px;");
this creates two elements which you can see if you save and run your script and go to slither.io , open the developer console and look at the
html pages elements you will see our divs created.. but they dont have a value at all.. so we would need to set this up in our update function..

But first we need to set our variables values to our div's! so type the following

C++:
playerPositionX = document.getElementById("myPositionX");
playerPositionY = document.getElementById("myPositionY");
now that our variables have gotten ahold of our div's lets set there values in our update function...

First things first we need to make sure we are in game for these values to set and update.. so do what we did in our key listener and add
an if condition to check if we are playing..
C++:
setInterval(function update() {
     if(w.playing) {
		 
	 }
}, 100);
Now we will set our div's text values ! this is where you will be using the games variables as well..

what we need to do is use if conditions to check whether our divs are present.. then within those if conditions we set the text..

C++:
setInterval(function update() {
     if(w.playing) {
		 if(playerPositionX) playerPositionX.textContent = "Player X : " + ~~w.snake.xx;
		 if(playerPositionY) playerPositionY.textContent = "Player Y : " + ~~w.snake.yy;
	 }
}, 100);
What we just did was set the text of our div's to equal our snake coordinates, which we got from the games variables..

You may be wondering why i used the 'tilde ~' symbol.. Well what this does is convert the value to a 32-bit integer...

Without the tilde's the snakes x and y values will appear as floats or decimal values, using the tilde fixes the display of that for us..

so far our code should look like this..


C++:
// ==UserScript==
// [USER=55501]Name[/USER]         TeSt
// [USER=55501]Name[/USER]space    [url]https://tampermonkey.net/[/url]
// @version      0.1
// @description  try to take over the world!
// [USER=38098]Auth[/USER]or       Xploit
// [USER=48418]mat[/USER]ch        [url]https://slither.io/*[/url]
// @grant        none
// ==/UserScript==

(function(w) {

    var playerPositionX = null,
	playerPositionY = null,
	divStyling      = "color: #FF0000; font-family: "Arial Black", Gadget, sans-serif; font-size: 20px; position: fixed; opacity: .75; z-index: 11;";


function hookKeys() {
    document.addEventListener('keypress', function(e) {
		if(w.playing) {
		switch(e.keyCode || e.which) {
			case 49:
				al3rt("Key [1] Pressed!");
				break;
			case 50:
				al3rt("Key [2] Pressed!");
				break;
			default:
				return;
		}
	  }
    });
}


    function appendElement(type, id, className, style) {
        var elem = document.createElement(type);    // Make sure to replace the string "div" with your type parameter.. and rename the variable..
        if (id) {
            elem.id = id;
        }
        if (className) {
            elem.className = className;
        }
        if (style) {
            elem.style = style;
        }
        document.body.appendChild(elem); // Dont forget to replace all other uses of the original variable name of div with your new variable name..
		
    }

    appendElement("div", "myPositionX",    "GuidedHacking", divStyling + "top: 100px;");
    appendElement("div", "myPositionY",    "GuidedHacking", divStyling + "top: 120px;");

    playerPositionX = document.getElementById("myPositionX");
    playerPositionY = document.getElementById("myPositionY");

setInterval(function update() {
     if(w.playing) {
		 if(playerPositionX) playerPositionX.textContent = "Player X : " + ~~w.snake.xx;
		 if(playerPositionY) playerPositionY.textContent = "Player Y : " + ~~w.snake.yy;
	 }
}, 100);
})(window);


And if you test the code out and start playing the game you should see red text appear on the top left of the screen
with your snakes coordinate information..

This should be it for this tutorial , if i got any information incorrect on what the codes use was please let me know
im still a little new to javascript , this is my second day actually getting into it putting effort into learning it..

thanks for reading and if this helped you any dont forget to leave a thanks!



- Xploit


Sources :

[Self-Executing Anonymous Functions]
[Javascript Event Listeners]
[Javascript 'Tilde' Usage]
 

Rake

Cesspool Admin
Administrator
Jan 21, 2014
12,118
78,998
2,392
Dude this is awesome, I have made many small userscripts and there was lots of information here that was still very useful for me! Thanks for sharing
 

Xploit

Ride the Pony
Dank Tier Donator
Nobleman
Dec 27, 2016
142
1,228
1
Rake;46892 said:
Dude this is awesome, I have made many small userscripts and there was lots of information here that was still very useful for me! Thanks for sharing
No Problem it took me quite a bit of research to completely understand how everything was working at first lol, By The Way Thanks for leaving some feedback :D






Just found out, You can place Self Executing Anonymous Functions within other Self Executing Anonymous Functions.. I Believe this can be good for Keyhooking And i do believe this can be used as a 3rd Automatic Update function, Easily by Creating a Self Executing Function, And calling to the function using setTimeout();

Like So..

C++:
(function(w) {
    
    (function SelfExec(x){
    // Self Executing Function Within a Self Executing Anonymous Function..
        console.log("SelfExec(x) Called!");
        setTimeout(SelfExec, 100); // Function calls itself from within itself creating an infinite loop..
})();


setInterval(function update() {
     if(w.playing) {
		 // Code here..
	 }
}, 100);
})(window);
 
Last edited:

Not2EXceL

The rust BC is trash...wait no im a shit dev
Dank Tier Donator
Nobleman
Jan 20, 2013
130
1,743
3
Ugh writing in js and not typescript
 

Xploit

Ride the Pony
Dank Tier Donator
Nobleman
Dec 27, 2016
142
1,228
1
Ugh writing in js and not typescript
I Was pretty new to JS at the time , not sure exactly what type script is but im guessing it has to do with ECMA Script 6 n shit like that? Either way it still works.. and took me quite awhile to write this tutorial
 

Not2EXceL

The rust BC is trash...wait no im a shit dev
Dank Tier Donator
Nobleman
Jan 20, 2013
130
1,743
3
I Was pretty new to JS at the time , not sure exactly what type script is but im guessing it has to do with ECMA Script 6 n shit like that? Either way it still works.. and took me quite awhile to write this tutorial
Typescript is transpiled to javascript and allows one not to have to write in a duck typed language. Was opinion comment earlier as I think duck typed languages are bad and much harder to understand from a glance
 

Xploit

Ride the Pony
Dank Tier Donator
Nobleman
Dec 27, 2016
142
1,228
1
Typescript is transpiled to javascript and allows one not to have to write in a duck typed language. Was opinion comment earlier as I think duck typed languages are bad and much harder to understand from a glance
Duck typed? I would think using js would be good practice as it can lead to game development as well, is this considered typescript? or just javascript still?
JavaScript:
let fun = () => {
    console.log('lol');
}
 

Not2EXceL

The rust BC is trash...wait no im a shit dev
Dank Tier Donator
Nobleman
Jan 20, 2013
130
1,743
3
Duck typed? I would think using js would be good practice as it can lead to game development as well, is this considered typescript? or just javascript still?
JavaScript:
let fun = () => {
    console.log('lol');
}
duck typed is just colloquial for dynamic typed, eg not specifying types anywhere

no thats still javascript. not saying javscript is bad, but with larger things its gets worse and harder to maintain/debug. Sure if the game is in a browser javascript or html5 is pretty much the options there, but that's honestly the only place that javascript should be used for games IMHO

TypeScript - JavaScript that scales.
typescript gets transpiled to javascript, so you get the safety of statically type programming language without leaving too far from javascript.

personally if I need to write javascript (which is rarely), I either use scala or kotlin and have it compile to javascript. Those are my wheelhouse but they are statically typed among other features which prevents breaking stuff/debugging stuff easier during development. Mainly due to the ability to actually properly debug the code
 
Attention! Before you post:

Read the How to Ask Questions Guide
99% of questions are answered in the Beginner's Guide, do it before asking a question.

No Hack Requests. Post in the correct section.  Search the forum first. Read the rules.

How to make a good post:

  • Fill out the form correctly
  • Tell us the game name & coding language
  • Post everything we need to know to help you
  • Ask specific questions, be descriptive
  • Post errors, line numbers & screenshots
  • Post code snippets using code tags
  • If it's a large project, zip it up and attach it

If you do not comply, your post may be deleted.  We want to help, please make a good post and we will do our best to help you.

Community Mods