From Scratch to Javascript: WoofJS

The perfect language to help you transition into a new way of coding.

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

WoofJS Teacher Guide

WoofJS Game Design Tutorial

Introduction to JavaScript


  • Clarissa Littler

    Clarissa has worked in mathematics, physics, and computer science research but spends much of her time now trying to make computer science education accessible to a broader audience.

Also In The February 2018 Issue

In an era before telephones, a clever code was created to send messages by telegraph.

A simple coding activity that creates a virtual tic-tac-toe board with pieces.

Seven days to design, code, and debug a program with PyGame. What could go wrong?

Play with your friends or connect to Minecraft servers all around the world.

Turning scientific data into music can lead to new insights and new solutions.

Tools to help you design and print your own jewelry. Who says geeks can’t be fashionable?

Say hello to your new favorite robot: spherical, programmable, and durable. It can even swim!

The perfect language to help you transition into a new way of coding.

Create a new and improved variation of the classic 1960s board game with micro:bit.

Learn about the origin of Unix time, the calendar system used by digital devices.

Could a human brain be simulated by a computer? Would it think and feel like we do?

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

Interesting stories about computer science, software programming, and technology for February 2018.

Interested but not ready to subscribe? Sign-up for our free monthly email newsletter with curated site content and a new issue email announcement that we send every two months.

No, thanks!