Welcome to Cursor Pal 1.0!

This is a small project inspired by Neko (webneko), the little cat that sits in the top-left corner of a page and chases your cursor. It's written in (very unprofessional) JavaScript. I wrote the code myself by reading through a million different Stack Overflow pages and other assorted development pages, and I wanted to also create a version for other people to use! So I'll put together a little tutorial here. However, do be aware that I am an amateur, and I barely understand JavaScript as a language. Therefore there may be bugs, and I probably won't be able to fix them.

As long as you're okay with that and you still want a little cursor pal to run around on your web page, continue reading!


How does it work?

Cursor Pal determines the horizontal and vertical positions of your cursor when you click somewhere on the webpage. It compares these values to the current location of the Pal itself in order to determine what direction it should face, and changes the image source accordingly. Then, it moves to the determined position of your cursor.

There are eight directions that the Pal can move - left, upleft, up, upright, right, downright, down, and downleft.

How can I get my own?

You will need to provide the eight images for each possible direction the Pal can be facing. You will also need an image to be displayed when the Pal is paused, for a total of nine images.


Left: Pause image (.png). | Right: 'down-right' image (.gif).

Use the following naming guide for your images:

Pause image: down.png
Direction images: down.png, down.gif, left.gif, leftdown.gif, leftup.gif, right.gif, rightdown.gif, rightup.gif, up.gif

Your pause image should be a .png file, and the directions should be .gif files. As long as you follow these names identically, you shouldn't have to edit the .js file at all. HOWEVER, if you decide to use different file formats or names, you will have to make some changes to the .js file. There are comments in there to help you.

Alright, now that you have your images ready:

You have to link the Javascript file, cursorpaljs.js, in your HTML page that you want your Pal to be on. You can get the code here:


The script goes right after the closing </head> tag in your document. For simplicity's sake, it's best if all of your images and the .js file are in the same directory as the page you want your Pal on.

You will also need to add a start and stop button somewhere on your HTML page. These can be actual buttons, text, or images; anything that can use onclick="" and can call a function. You can put these two buttons anywhere on the page.

For your start button, include this code: onclick="startMove()"
For your stop button: onclick="stopMove()"

Finally, you will also need to add the following code to the very top of your code, right after the <body> tag. This is the Pal itself. It will show up at the very top left corner on your page, and has absolute positioning, so it shouldn't mess with your existing layout.

How else I customize my Pal?

You can adjust these 'settings' by changing the JavaScript file (instructions included).

- Change how long it takes for your Pal to reach where you click
- Change how many times you see your Pal move until it reaches the end point ('framerate')
- Have your Pal return to the top-left corner when the stop/pause button is clicked

Last words

I hope these instructions were simple enough to actually follow! If you have any questions or comments, feel free to e-mail me at koinuko (at) yahoo.com, but if it's actually related to the code itself I don't know how much I can help you. Have a good time with your new Pal, or feel free to just play around with the one on here!

back to home