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:
cursorpaljs.js
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