Kids Code & Computer Science

Code Monster from Crunchzilla is a fun online emulator used to learn JavaScript.

There’s a way to play with JavaScript in a safe indestructible way. It’s an online tutorial called Code Monster, a set of exercises that only requires a web browser and time to play around.

For example, the first lessons let you change the position co-ordinates of boxes, as well as width and height of the boxes. It’s easy to adjust the numbers then watch as the boxes shift right or left, up or down, based upon what numbers you change. It’s also easy to make the connection between the order of numbers and their connection to up/down, left/right, and the width/height of the boxes. It’s also possible to type in new co-ordinates for a new box using the two bits of code provided.

Here’s how you modify JavaScript in Code Monster from Crunchzilla:

1. Go to http://www.crunchzilla.com/code-monster with your web browser. I used the Google Chrome browser. Currently the default lesson is about Getting Started. Click the monster’s green text bubble up top to display instructions and the Back button, on the bottom right, to return to the last lesson.

You’ll see one black rectangle box, as shown below. On the left is an area where you can type code. On the right are the results of your code. The default code, for example, c.fillRect(20, 20, 50, 75); creates the box on the right side of the screen shot below. The 20, 20, 50, 75 corresponds to left, right, width, height as measured in pixels.

2. Use your mouse to highlight one of the numbers in c.fillRect(20, 20, 50, 75); and change the number. For example, change the number 50 to 150. Watch the box expand to the right 100 pixels for a box with a total of 150 pixels of width measured from the left edge (50 = 50 + 100). Here’s what you see on your screen.

3. You also can change other values in c.fillRect(20, 20, 50, 75); Here’s what happens when I add a 100 pixels all four co-ordinates, changing them to 120, 120, 150, and 175. Now the black box is 120 pixels over from the left edge, 120 pixels down from the top edge, and 150 pixels wide and 175 pixels tall (high).

You also can create two boxes using the c.fillRect(20, 20, 50, 75); code then changing the number values for the second instance of c.fillRect(100,100,60,80); code. Here’s the start point with the second box co-ordinates changed to 100, 100 160, and 180.

When you’re done playing with the Getting Started lesson, click the Lesson Sections link below your work area. The list of lessons will appear in a pop-up. Click a lesson link to display that lesson.

Because it is easy to reset Code Monster by clicking the Back button, located bottom right of the work area, this is a great way to get comfortable with the basics of code and adapting code. You can see the connection between numbers and results. And clicking the top green speech bubble leads to the next lessons.

Code Monster is also called an online emulator, for the JavaScript language. The Try Ruby article at the front of this magazine describes an online emulator for Ruby, if you want to try out that language.

Learn More

Code Monster

http://www.crunchzilla.com/code-monster

Crunchzilla

Includes Code Monster and three other online programs for older kids.
http://www.crunchzilla.com/