Getting Started

This documentation currently only covers using Scratch-JS on Mac and Linux (with python installed):

 

Getting started with Scratch-JS is very simple. Just download the index.html, and open a terminal. Then, type the following:

 

ADD STUFF HERE

Sprite Creation

    In Scratch-JS there are two types of sprites. But for the sake of simplicity only one type of sprite is covered in this section. Please refer to the advanced section of the documentation for more information about creating HTML tag sprites.

 

Here we will be explaining how to use image sprites, which are powerful enough for most beginners. As its name implies, image sprites use an image as the sprite. The image for the sprite can be any image file type including png, jpg and even gif, which allows for animating the sprites.

 

The basic syntax for a sprite is simple:

 

whenPageLoads {

var mySpriteName = new Sprite(x,y,”myImageFileName.jpg”);

}

 

To create a sprite all you have to do is replace the values that are highlighted in yellow.

 

Let’s breakdown what the values should be in the order they appear:

 

• mySpriteName, is the name of your sprite. You can change this to whatever name you want, but the name cannot have spaces. Most coders use upper case letters to denote new words. Here are some examples of spite names that you can use:
• dog
• myPetDog
• cat
• myPetCat
• mypetdog
• This is technically ok, but is hard to read since there are no capitals
• MYPETDOG
• Also technically ok, by very hard to read so it is not recommended
• The next values that you need to change are x and y. These represent the x and y value that your sprite should start at.
• Lastly you must specify the name of the file where the image for your sprite is located. You must include the file extension (jpg, png, gif…) together with the file name.
• For example “myImage.jpg” is valid. But “myImage” will cause an error.
• Also the file name needs to be in quotes “ “
• The image file should be saved in the same folder as the code file

 

And that’s it you now created your own sprite. Here is an example of what you code should look like:

 

whenPageLoads = function(){

var myDog = new Sprite(20,90,”doggy.png”);

}

 

This will create a sprite using the picture of the dog that I provided and add it 20 pixels to the left and 90 pixels to the right from the center of the screen.

 

For those of you wondering what the “whenPageLoads” does. It is essentially the equivalent of the “when green flag is pressed” block in Scratch.

 

Note

The rest of this document will use the sprite name mySpriteName in all examples.

 

Scratch-JS “blocks”

Below are all of the Scratch blocks that have been implemented into Scratch-JS

• Move
• The move block is one of the most fundamental blocks in Scratch. It moves the sprite forward by an amount.
• Here is the syntax:
• mySpriteName.move(amountInPixals);
• Go to:
• Goes to a specific x, y coordinate
• Syntax:
• mySpriteName.goTo(x,y);
• Set X To
• Sets the x to a specific value
• Syntax:
• mySpriteName.setXTo(newXValue);
• Set Y To
• Sets the y to a specific value
• Syntax:
• mySpriteName.setYTo(newYValue);
• Change X By
• Changes the x by an amount
• Syntax:
• mySpriteName.changeXBy(xChangeAmount);
• Change Y By
• Changes the y by an amount
• Syntax:
• mySpriteName.changeYBy(yChangeAmount);
• Turn
• Turns the sprite a certain amount of degrees counter clockwise, a negative value turns it clockwise
• Syntax:
• mySpriteName.turn(degrees);
• Point In Direction
• Points the sprite in a direction
• 0 degrees: right
• 90 degrees: up
• 180 degrees: left
• 270 or -90: down
• Any value in between
• Syntax:
• mySpriteName.pointInDirection(degrees);
• Ask
• Asks the user a question and returns the answer
• Syntax:
• var answer = ask(“Question”);
• Distance To
• Finds the distance between a sprite and an x,y coordinate or another sprite
• Syntax - x,y coordinate:
• mySpriteName.distanceTo(x,y);
• Syntax - sprite:
• mySpriteName.distanceTo(anotherSpritesName);
• Hide
• Hides a sprite
• Syntax
• mySpriteName.hide();
• Show
• Shows a hidden sprite
• Syntax:
• mySpriteName.show();
• Glide To
• Glides to a sprite or to a set of x,y coordinates
• Syntax -  Sprite
• mySpriteName.glideTo(anotherSpritesName, milliseconds);
• Syntax - x, y coordinates:
• mySpriteName.glideTo(x,y);
• Change Costume
• Changes the costume to an image (or any valid HTML tag for advanced users)
• Syntax - Image:
• mySpriteName.changeCostume(myImage.jpg);
• Syntax - HTML
• mySpriteName.changeCostume(“<b>hello world</b>”);
• Repeat
• Repeats a block of code a specified amount of times