Please update your browser
Your browser version is not supported by this site. CS First may not work properly.
In this video, you’ll use the arrow keys to make the hero move through the world.
Right now, the hero’s walking, but it’s just walking in place; nothing else is moving.
If you’ve ever played Mario, Sonic the Hedgehog, or another side scrolling game, you know that
when you walk forward, the character on screen doesn’t actually move forward.
Instead, the background moves backward.
You’ll use this trick with your game today.
If you click on the “Ground” sprite, you’ll see a good bit of code is already in there.
This code uses the block you see in the sprite preview to create the ground all the way across
It even places random gaps in the blocks that the hero has to jump over.
The “Ground” sprite contains three event blocks – “when flag clicked,” “when
I receive forward,” and “when I start as a clone.”
click the “when I start as a clone” stack, you’ll see a little block peek out, but
it doesn’t go anywhere.
click the “when I receive forward” block stack.
The block moves a little!
The “forward” message is the key to making the background move.
Broadcast this “forward” message each time the hero moves forward.
In the “Hero” sprite, you’ll build out your motion loop!
The motion loop will control all of the hero’s movements – jumping up, going forward, and
Drag out another “forever” block.
Add a comment to this one also by right clicking and clicking “add comment.”
Type “motion loop.”
Start simple: Inside this loop, you’ll check whether the right arrow key is pressed, then,
each time it is, tell the ground to move backwards.
This will make it look like the hero is moving forwards, which is the trick to making side
scrolling games work.
Add an “if” block to the loop.
Then, add a “key pressed” sensing block as the condition.
Pick “right arrow” from the dropdown.
Finally, add a “broadcast” block to the “if” block.
Make sure “forward” is selected, and test it out!
Click the block stack, then press the right arrow key.
Did the ground start moving?
Your character now walks forward.
One final step: Give the hero a little runway to start the game.
Back in the hero sprite, drag out a “repeat” loop, and snap a “broadcast forward” block
If this stack runs after the flag is clicked, it’ll move the ground forward!
Now, snap the stack just above the motion loop, and cap it off with a “when flag clicked,”
so the hero is assured there’s some ground to land on.
Make sure to test, and tinker with the value in the “repeat” loop to control how much
the ground moves forward at the start.
In the next video, you’ll add gravity and jumping.
Now, it’s your turn:
Place an “if” block inside a “forever” loop to check if the arrow key is pressed.
If it is, broadcast the forward message.