Cat and Mouse with JavaScript

Nesster on Flickr

You computer mouse cursor finally gets a cat to chase it.

For years, we’ve watched the mouse cursor zoom around the screen, unchallenged. Today, we’re going to change that, by creating a JavaScript cat to chase the mouse!

1. Set Up

Open up your web browser and navigate to

See how the screen is separated into four different boxes? Each box accepts code from a different language: HTML, CSS, and JavaScript. Each of these three languages plays an important role in web programming.

There’s one more thing to set up. In the bottom left-hand editor, click on the little grey gear next to ‘JAVASCRIPT’.

Click on the box under ‘Frameworks & Extensions’

Select ‘jQuery 3.2.1’

jQuery is a popular extension of JavaScript. It makes it easy to move and modify the elements of a webpage.


HTML can be seen as the ‘bones’ of a webpage. It contains all the important structural information, like what the text says and how it’s separated.

In the top left-hand editor, type:

<div id="cat"> 

<div id=“cat”> 

An html ‘div’ is a type of container. This one’s id — or ‘name’ — is ‘cat’. Inside the tags we’ll put the ASCII art for our JavaScript kitten.


See how the ‘=‘ are whiskers, and the ‘^’ are ears, and the ‘.’ is a nose? The result is an adorable, minimalist kitten. ASCII at is a way of making pictures using letters and other typed symbols.