Learn Create Your Own Split Screen

Next Page

That's great, except the ladybug is at the top of the canvas, and we want it at the bottom.

It's because we said:

var bug_y = 0;

In Scratch, you'd just drag the bug down to where you want it. In Javascript, instead of setting bug_y to zero you could just set it equal to 270 or something a bit less than the canvas height. But we want this game to work properly on any type of device with any size screen.

So we'll set it's y-position equal to whatever the canvas height happens to be, minus whatever the height of the bug is.

var bug_y = myCanvas.height - BugImg.height;
This way, even when the canvas is a different size, or if we choose a different image, it will always be exactly at the bottom.

We need to do it after we've set up the BugImg variable and loaded the image, otherwise the image doesn't have its height yet. In fact, because of the multi-threaded nature of web browsers, the image may not finish loading for a short time after our program starts running, so for good measure we do the positioning inside the timer.