Learn Create Your Own Split Screen

Next Page

We're going to use a timer to make a rectangle fall down the screen. But whereas Scratch uses sprites, Javascript has no formal concept of a sprite -- instead you just draw what you want.

We start by making a variable that will keep track of where the top of the rectangle is, and we start it at zero because the HTML canvas has x=0 and y=0 at the top-left. I'm calling the variable y_pos but the name doesn't matter.

var y_pos = 0;
Then inside my timer function, I'm going to change the y_pos by a small amount (increasing because y-values increase going down the canvas.

And I'm also going to draw the outline of a rectangle, positioned at my y_pos.

y_pos = y_pos + 2; strokeRect(130, y_pos, 60, 60);