Today you are working in MakeCode Arcade on a new project from scratch.

You will craft your own pixel character, make it move with the arrow keys, run it in the simulator, and take a first look at how the same project reads in the JavaScript text view.

Before you build, think: what do you expect to see when a sprite is created and the controller is told to move it?

Start by creating a new project on MakeCode Arcade. You can do this by going to the MakeCode Arcade website here and clicking on 'New Project'.

Build it in blocks first. A new project opens in the Blocks view, and that is where you start. From Sprites, drag in set mySprite to sprite of kind Player and draw your character in the pixel editor that opens when you click the grey square.

Now look at what you just made. At the top of the editor click the JavaScript toggle. Your block has not gone anywhere, it is the same program written as text:

let mySprite = sprites.create(img`...`, SpriteKind.Player)

Read it against your block and match the pieces up: set mySprite to became let mySprite =, sprite became sprites.create, your drawing became the img`...` part, and of kind Player became SpriteKind.Player. Nothing new has happened. The same instruction is just written a second way.

Flip back to Blocks. Still there. You can move between the two views as often as you like.

Back in the Blocks view, add move mySprite with buttons from Controller. Run it, and your character moves with the arrow keys.

Flip to JavaScript again and find the line your new block became:

controller.moveSprite(mySprite)

Same pattern as before. The block's name became controller.moveSprite, and the sprite you chose in the dropdown became the mySprite in the brackets. Predict before you look: if you had two sprites, what would you expect to change in that line?