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 http://jsfiddle.net.

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.

2. HTML

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>

<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.

</div>

Every ‘opening’ HTML tag needs a matching ‘closing’ HTML tag. Picture it as putting a lid on a container.

 

Become a subscriber and get access to the rest of this article. Plus all our magazine articles.

Stories also include numerous links to help parents, kids, and teachers learn more. Get access today at just $15 per year!

Subscribe Today!

Also In The October 2017 Issue

Building and creating your tools with the Minecraft toolbox helps you survive the game.

Sensors give robots the senses humans have.

30+ ideas for all age holiday gifts, from books to apps to board games to VR and more.

There might be a reason that too-real robot and video game character creeps you out.

This programming language uses colors instead of text and punctuation to add and perform other tasks.

Knowing how passwords are cracked can help you create better passwords.

There are a number of strategies teachers (plus parents and students) can take to learn programming.

This project uses conductive thread to create a glove to activates your phone.

Software programming does neat things with language, in this case, mixing capital letters.

This Scratch game has lots of ways you can customize the game play. No cats were harmed in the making of this article either.

Links from the bottom of all the October 2017 articles, collected in one place for you to print, share, or bookmark.

Interesting stories about computer science, software programming, and technology for October 2017.