From Scratch to Javascript: WoofJS – 30 STEM Links a Week

We’ve talked a lot about programming in Scratch, but have you wanted to try something different? Maybe you’ve found yourself thinking that you want to learn a more general purpose programming language, or you’ve wondered what the next step beyond Scratch is for being a programmer?

In this article, we’ll talk about a relatively new site called http://woofjs.com. WoofJS is the name of their framework, dog themed in reference to the cat mascot of Scratch, and it was written by educators who wanted to help students easily transition out of Scratch and into JavaScript as their first general purpose programming language!

If you go to the site and click on the Start Coding button you should see something like this:

which, if you have experience with Scratch might have a few parts that look familiar!

If you click on all of the blocks under “Documentation”, like “Motion” or “Control”, you’ll see that they go into a lot of detail in how Scratch blocks, such as move 10 steps or set pen color to, are done in JavaScript with their library. An awful lot of Scratch blocks translate directly to a single line of JavaScript code in WoofJS! There are some things that don’t translate directly though, like the color _ is touching _? block.

One of the biggest conceptual differences is that there’s no message passing in JavaScript. The way different pieces of a JavaScript program communicate with each other is through function calls, which exist in Scratch but are greatly de-emphasized from their place in most programming languages.

There’s also a number of tutorial games with step-by-step instructions to help you learn the system.

Since this is JavaScript instead of Scratch it’ll feel pretty different than what you’ve experienced before, so let’s look a little bit at the differences between JavaScript and Scratch.

Variables: In Scratch, you make a variable from the variable menu and choose whether it can be seen by everyone or just by a particular sprite.

In JavaScript, you make a variable by saying var level = 10 or var name = Bert. Most variables can be seen by everyone! The difference is where you make them. If you make them inside a function, they can only be seen inside a function. This is like making a variable visible only to a particular sprite.

Loops: At first glance, loops don’t look super different in JavaScript than in Scratch! In Scratch you can do something n times with the repeat block. In JavaScript, it’s for loop. In Scratch you can repeat an action until something changes with the repeat-until block & do something forever with the forever block. In JavaScript, these both become while loops.

There’s a big, giant difference though! In Scratch, each sprite can have multiple forever blocks happening at the same time. You can have a forever that’s handling your sprite moving, another loop that’s counting up how many times the character has gotten hit and yet another that’s handling key presses.

JavaScript code runs very differently. You can think of JavaScript code as one giant Scratch block that is running from the top of the code down to the bottom of the code. If you write a while loop in JavaScript that runs forever, none of the code that comes after it will ever see the light of day!

Functions and messages: In Scratch, you probably rely on messages a lot in order to make things happen in your code. After all, you need to get your sprites to communicate with each other as things happen! There really isn’t anything like messages in JavaScript for the same reason why you can’t run multiple while loops in JavaScript: all your code is running linearly from the top of the code down. Unlike Scratch, you don’t have multiple agents, or multiple blocks of code, running at the same time so there’s no one to send a message to!

The way you control how code runs, rather than messages, is with functions. Functions in JavaScript are basically custom blocks from Scratch, but while you can do an awful lot in Scratch without making custom blocks functions are absolutely one of the key building blocks in JavaScript!

So that was our look at woof.js and a mini-introduction on how to move from Scratch to JavaScript when making games. Happy hacking!

Learn More

Learn More

WoofJS Teacher Guide

WoofJS Game Design Tutorial

Introduction to JavaScript