beanz Magazine

Code Monster

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.

projects-code-monster-screen-1
Screen 1

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.

projects-code-monster-screen-2
Screen 2

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

projects-code-monster-screen-3
Screen 3

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.

projects-code-monster-screen-4
Screen 4

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/

Also In The April 2016 Issue

The iDTech summer camp recently posted 102 questions. Here are a few with links to the full list.

The choice of a first programming language can be overwhelming, from simple drag and drop to full languages.

REST is a standard way for software applications to work with each other to do things.

Blockchain software technology works as a distributed ledger to record what was done and when.

Believe it or not, computers and keyboards were not invented together.

Learn the basics of Go plus neat math details about Go and AlphaGo, the computer that beat a human playing Go.

If you were a wizard, wouldn't you want to know how to scale your spells for maximum effect?

— John Johnson

A phone and tablet app exposes the invisible world of radio, phone, and satellite waves that connect our computers.

ASCII is a set of letters, numbers, and characters computers use to communicate accurately.

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

Computing at School (CAS) provides resources and support for computer science teachers and parents.

Interesting stories about computer science, software programming, and technology for April 2016.