Inspiring Ingenuity

Alteryx, Bicycles and Teaching Kids Programming.

Teaching Kids to Program: Pong

1 Comment

image

Last time I introduced the concept of teaching kids to program.  Can kids really program?  Let start by skipping to the end.  Click on the game on the left and play it for a bit…  I can wait.

Its fun, right?  Very simple but fun.  Our 8 year old was at the keyboard to make this game.  I was there for coaching and support, but all the design and behaviors came from the kids together and was “coded” by an 8 year old.

Programming with kids is no different that programming for a living.  You need to start with a plan.  It is OK, and even encouraged to diverge from the plan from the beginning, but you have to have an idea of where you want to go and you have to know where to start.  In this case we set out to write the classic Pong game.  We had no idea if we could do it in one session or how long it would take, but every journey begins with a step.

So lets think about Pong for a second…  It has some basic elements.  Probably the most important is a ball. It has a paddle (or two).  Maybe it has a playing surface that looks like a tennis court or a soccer field.  But backing up, Pong doesn’t exist without the ball, so the Ball is where we started.

Step 1 – The Ball

Scratch makes this super easy.  Charley knew just what to do, after all he had a week of summer camp learning scratch.  He added a new sprite image with the little paintbrush and drew a ball.  Done.  The next step is getting it to move and bounce.  With my programming background, that sounded like a bunch of geometry and math.  Again, Charley knew just what to do.image  You click on the new sprite and then you can start dragging out commands.  In Scratch, pretty much everything starts with the When [Flag] Clicked block.  Blocks under that will start running as soon as the player clicks to start.  You can see on the right that it’s super simple after this.  Set an initial direction, add a loop, in this case forever and then move.  Scratch even handles the bouncing with a single block.  We were off to a pretty good start – you can see and play around with where we got to.  Go to Pong Step 1 and either click the flag or better yet, click “See Inside” and see the code.

Step 2 – The Paddle

The next step is to add a paddle.  We started with one paddle, we figured we could copy and paste later (although we never got to that.)  At this point, the kids are all getting in to it.  Again Charley knew just what to do.  He created a sprite and added some code.  imageScratch provides an helpful [When Key Pressed] event.  We hooked it up – once for up and once for down and we could easily move the paddle up and down.  There was a problem though – the movement wasn’t smooth.  It made it hard to get near the ball.  Finally my experience came into play and I got to teach the kids something!  The key press works the same way it does while typing an email (or a blog post) – You press a key and it happens once, then there is a little delay and then it repeats.  We needed a smoother paddle.  Fortunately Scratch provides a different way to check the keyboard: image.  It requires starting with a wait control and then adding a key pressed condition (in Scratch terms, sensing).  The advantage of this is that it is just sensing the key being down, not waiting for a system keyboard press.  Since this isn’t an event, we just wrapped it in a forever loop, so it is always there waiting for the keys to be pressed.  Paddle movement solved.

At this point the kids all decided that we needed some decoration, so the clicked on the backdrop and created a playing field.

Go ahead and check out Pong Step 2 and look around.

Step 3 – The Paddle Doesn’t Work!

imageI think that in a kids eye, if the paddle is there and the ball is there, it should just all work!  Charley was still at the keyboard with the other kids kibitzing, but this is where they needed more coaching.  Not that it was too hard, but it has to be done.  The code on the right looks pretty simple, but it took us a few tries to get right.  Just bouncing on touching proved a little buggy, because if it touched the end of the paddle, it sometimes would end up bouncing around “inside” the paddle for a bit.  That is what we added the extra direction < 0 – it only bounces if it is heading towards the paddle.  The other issue is that the math for determining the new direction (in degrees) of the ball is a little tricky and I wasn’t ready to teach them trigonometry, we we just has the ball bounce in a random direction.  It actually helped because it made the game a little more interesting.

imageAnd finally we need to detect if the ball passed the paddle.  This is just a matter of checking the ball’s X coordinate and seeing if it has passed the passed the paddle’s X.  A quick message and stop all.  At this point, the game is almost playable!  You can see our progress so far:  Pong Step 3.

Step 4:  Adding Lives.

At this point we had a little feature creep.  The kids wanted to add lives, so that you got more than 1 chance.  Once again, Charley knew just what to do.  He created a new variable named Player1Lives, set it to 5 (I thought 3 was enough – the kids were sure 5 was the right answer): image (inside the paddle sprite).  We then added a little logic after the passed ball test to decrement the # of lives and check if you lost.  It was now time for some serious play testing:  Pong Step 4.

Step 5:  A Little Bit of Polish.

Play testing taught us one thing.  Dad could keep the ball in play forever and the kids never get a turn.  That was clearly unacceptable.  We decided to speed the ball up, but then it was too hard for the kids.  We finally settled on adding some acceleration.  We turned the speed into a variable and every time the ball moved, we sped it up: image.  Even Dad can only last so long once the ball started moving.  The next thing they wanted to add was points – you get 1 point for every time you successfully hit the ball.  Again, just create a variable and increment it in the right spot.  Like C++ that Dad works in though, you do need to make sure to initialize your variables – otherwise they save from play to play.  Go ahead and play a little bit:  Pong 1 Player.  Again my high score was 135 – can you beat it.  Drop a comment below!

Wrapping Up

We never did get to adding a second paddle and making it 2 player.  Maybe that will be next week, but I think the kids are happy with 1 player, so we might go in a different direction. Don’t be put off by the length of the blog post, I spent considerably more time writing it than the kids spent programming the game.  At no point did they think that they were learning programming – we were just “playing” Scratch.

Thanks for listening,

ned.

One thought on “Teaching Kids to Program: Pong

  1. Pingback: Teaching Kids to Program: How Young? | Ned Harding