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.

3. CSS

If HTML is the bones, then CSS is the ‘skin’. It wraps around the bones and makes everything look pretty.

In the top right-hand editor, type:

#cat {
position:absolute;
}

The #cat references the container we’ve just created.

position: absolute;

The ‘position’ property controls — big surprise — the position of its container. ‘Absolute’ means that the div will be positioned relative to another element. In this case, we’re moving our div based on the mouse’s position.

There are other ways of positioning elements. For example, you could use the browser window as a reference. Or, you could force an element to be frozen in place.

4. JavaScript

JavaScript will be the ‘muscles’ of our webpage. It makes things move!

In the bottom left-hand editor, type:

$(document).mousemove(function(mouse){
    $("#cat").stop().animate({left:mouse.pageX, top:mouse.pageY});
});

Looks like a lot, right? Don’t worry, it’s simpler than you think!

$(document).mousemove( X );

The ‘$’ in JavaScript means that jQuery is being used behind the scenes. This piece of code registers an event handler for mouse movements. That’s a fancy way of saying ‘the browser window nows pays attention when the mouse moves around’. The ‘X’ dictates what the browser does when it detects a moving mouse. Don’t forget to end this statement with a semi-colon!

function(mouse) { Y }

This piece of code replaces the above ‘X’. It translates to: ‘If you see the user moving the mouse, do the action described in Y.’

$(“#cat”).stop().animate( Z )

This piece of code replaces the ‘Y’. It’s what actually moves our cat. The first part — $(“#cat”) — uses jQuery to locate the ‘#cat’ div on the screen. If the cat is running around, the ‘.stop()’ forces it to freeze in its tracks, while ‘.animate( Z )’ tells the cat where to run next.

{left: mouse.pageX, top: mouse.pageY}

This piece of code replaces the ‘Z’. It tells the cat where to find the mouse. The ‘left’ and ‘top’ properties determine the cat’s position. Here, they’re matched up to the mouse’s ‘left’ and ‘top’ — or X and Y — coordinates. The result is that the cat zooms toward the mouse.

5. Run

Hit the ‘Run’ button at the top of the screen.

The bottom right-hand console contains the output of the program. Move your cursor around the square and watch the cat chase your mouse!

Psst! If the cat isn’t moving but the code is correct, you might have forgotten to add jQuery. Go back to step 1 and go through everything carefully.

Learn More

jQuery vs JavaScript

https://learn.onemonth.com/jquery-vs-javascript-4f26b98e3136

Web Design for Kids

https://webdesign.tutsplus.com/tutorials/web-design-for-kids-welcome-to-tuts-town–cms-23680

Web Coding Resources

https://www.kidscodecs.com/html-coding-for-beginners/
https://www.kidscodecs.com/resources/programming/javascript/

CSS Position Property

https://www.w3schools.com/cssref/pr_class_position.asp

jQuery animate

https://www.w3schools.com/jquery/jquery_animate.asp

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.