# Scratch to JavaScript I: Arena Game
###### tags: `code club`

Scratch is a great way to learn programming and with it you can learn the four basics that are fundamental to all programming: variables, iteration (loops), flow-control (if-else), and funtions (new blocks). There are many things it makes easier: You can have spaces in the names of blocks and variables, you don't need to remember the name of anything and you can't get the spelling or capitalization wrong, and all the things you can do are right there in the block menu.

Scratch also has some pretty hard limits. You can't access the internet or use databases. String and array manipulation is very limited. You cannot create new types of data, write to files, or make movies, just as a short list of examples. Moving to a text-based language can open up new worlds of things you can do, but also requires you to keep a lot more in mind. You have to learn or look up (and learn where to look up) what functions are available, rather than having all the blocks in a menu. You have to pay attention to spelling: `is_jumping`, `IS_JUMPING`, `isJumping`, `is jumping`, and `iSjUmPiNg` are all different names, and one of them is illegal as a name in most languages (in JavaScript names have to start with a letter or underscore and can only have letters, underscores, or numbers, but not spaces).

Some things are easier in text languages. The math equations in this block (taken from my [Polygon](https://scratch.mit.edu/projects/267387647/) project) can be entered more simply in JavaScript (using the P5 library). Anything following `//` on a line in JavaScript is a comment and won't be run as code.


// assumes oldangle, oldx, oldy as global variables
function moveToPoint(iteration, theta, radius){
  let x = cos(iteration * theta + oldangle) * radius + oldx;
  let y = sin(iteration * theta + oldangle) * radius + oldy;
  // draw line to new x,y point
}

The only difference in JavaScript if we were not using the P5 library, in this case, is that we'd have to use `Math.cos` and `Math.sin` instead of `sin` and `cos`. We'll get more benefit this library later though!

Some of the blocks in Scratch can be mapped easily to JavaScript (especially with the P5 library we will be using), others don't have a built-in or easy way to do the same thing and we'll have to write some code to compensate. In some cases (like collisions) the JavaScript way takes more code, but can be a LOT more efficient than Scratch, so our code can run faster and we can have more sprites on screen at once.

We could go through each block in Scratch, showing the JavaScript equivalent code for each one, but that would be pretty boring to read. Instead, we're going to look at a game written in Scratch, then the same game written in JavaScript, paying attention to which parts are very similar and which parts are different, and especially to where we have to fill in things that Scratch does for us but we have to handle ourselves in JavaScript.

We'll do this with games of increasing complexity, but this first one is pretty simple. Two characters are in an arena, the player and a wolf. The player has 3 lives and each time the wolf catches them they lose one life. The audience throws coins into the arena and if the player collects 10 coins they win their freedom and win the game.

The Scratch version of this game can be found here: [Scratch Arena](https://scratch.mit.edu/projects/276003551/) and the JavaScript version can be found here: [JavaScript Arena](https://p5-arena-game.glitch.me/).