Building a Game With a 6-Year-Old

Free Summer HTML5 Car GameI just open sourced a game I’ve been working on with my 6-year-old son Jack over Thanksgiving weekend.

Click Here to Play

Want to work with your kids to make your own custom version? All the files you need are on Github.

A few years ago, I made a game called Match the Letter to help Jack learn his ABCs (still available for FREE on Google Play – no annoying ads either).

A couple years later, he asked me to teach him to make a game. I told him he’d need to know how to code and to do that, he needed to learn to read.

Fast forward to 1st grade, and he reads pretty well. The day before Thanksgiving, I was working at home (because my job is cool like that) and Jack brought it up again.

I started asking him questions and taking notes from what he said. He likes the Blocky Roads game (available on iOS and Android) which seems to be his inspiration.

Buttons for the gameWe’ve made some progress and I want to share it out with my fellow devs who might want to do the same thing with their kids. Play it here and check out the project on Github. Shoot, all you have to do is replace the png graphics with your kid’s own drawings and you will be all set. If you don’t want to make a car game, check out the Phaser Framework for building browser games and you can probably find an example or tutorial for the game your kid wants to make.

The look on my son’s face when he could play the game he thought of, using his own hand drawn graphics, was UNBELIEVABLE! It is so much fun!

Jack is providing all the drawings and direction on the game design. I just do what he tells me, while trying to teach him what it takes to implement his vision along the way. We even have his 2-year-old brother in on the action, play-testing on his own tablet.

Tutorial - Create a car with PhaserBig thanks to Photon Storm, the folks behind the Phaser HTML5 Mobile and Desktop game framework without whom this would not be possible. And super big thanks to Markus T who published a fantastic tutorial that gave me a huge jumpstart and is responsible for most of the code that is behind the game thus far.

I will keep working on it as long as he stays interested. No promises on how far we will get, but so far it is a blast!

Development Log

Game graphics by Jack11-26-14

My notes from Jack’s description of what he wanted his game to be (verbatim)

Car

  • You can decorate it
  • Drive around farmyard
  • Press a button to make it go
  • Only go straight.
  • The car is named Syndro

Obstacles

  • Hills
  • Hot lava
  • Ramps
  • Parachutes if the car explodes
  • Other cars that are damaged

Buildings

  • You can click on a building to park on it
  • Find stuff thats moving then unlock them in your farmyard

Scenery

  • people walking by

When we finished the intro screen, Jack asked me “Are we finished??”

I told him we were done with the first step. He asked how many steps there were. I said about a thousand. He was unfazed by this and excited to start the next step. Here are the steps we have so far:

  • Step 1 – Intro Screen (Jack picked the font)
  • Step 2 – Draw the car
  • Step 3 – Animate the car
  • Step 4 – Pick a Physics Engine – Phaser
  • Step 5 – Create game page with hello world example
  • Step 6 – Find car game example to use (found this great tutorial!

Worked on animating the car and separating it into pieces in Photoshop.

11-27-14

  • Step 7 – Bring Jack’s car drawing into the game
  • Step 8 – Jack draw preview and control buttons
  • Step 9 – Add preview button to intro screen

11-28-14

  • Step 10 – Add button controls for touch devices
  • Step 11 – Publish open source for testing and sharing
  • Step 12 – Jack and Grant (little bro) test on mobile devices
  • Step 13 – Jack draw more game elements
  • Step 14 – Draw home screen icon

11-29-14

How to Get Open Source Project Ideas and Execute Them

A common question people ask me is how I come up with open source project ideas. It is a pretty simple process:

1. Have A Problem
If you are a developer, when you are building stuff you will have to solve problems. On top of those, as a human being you will have problems every day. How can I share responsive web design examples to educate my clients? How can I make a more flexible grid system for responsive web design? How can I help my kid learn his ABC’s? Are my passwords manly enough?

The first thing most of us do is see if that problem has been solved before, and how. It may be that the problem has been solved effectively, and there is no need for you to solve it again. Many times, there are different approaches to solving the problem, but none that work quite the way you’d like. On rare occasions, you have encountered a problem that doesn’t have any good solutions yet, which can be quite exciting.

1a. Come Up With a Cool Name
This is probably the most fun part of the process, haha. Cool names are cool!

2. Solve The Problem
Get on it. Solve that problem. It could be that solving a particular problem is too large and ambitious to pull off. Either find some friends to collaborate with, or break the problem into smaller components then go after them one at a time.

3. Abstractize Your Solution
When possible, craft your solution in such a way that it can be applied more generally, for people who encounter the same problem.

4. Publish
Throw it on Github, of course, but if you want your project to stand out, go the extra mile. Make a great demo page to showcase your project with some clear, easy-to-follow documentation.

5. Don’t Be Shy
If you release a Github project in the woods, does anyone notice it? To get your project noticed, you need to publicize it. Tweet it out and share it up. Send it off to newsletter publications (e.g. JavaScript Weekly, HTML5 Weekly, etc.) Even better, create a tutorial and try to get it published online somewhere like Codrops, Tuts+ or Smashing Magazine.

6. Repeat
The more you projects you publish, the more ideas you will have. I recommend maintaining a list of your project ideas on Google Drive or Trello.

Chicago Tech Events

chicagotechevents-logo-180Throughout the past year, I have been keeping a running list of cool local Chicago tech events and sharing it with friends and the people at work. I’ve decided to make it into a thing and put it out there. So I present to you… chicagotechevents.com

I managed to have some fun building it too. It was my first time using Twig templates, and really liked it. I expect I’m going to be using that on a lot of things in the future. Also, I am trying out a couple AWS products. I built the backend on DynamoDB because why not. I made a simple admin page for adding the events to DynamoDB. Every day, a CRON job runs that goes through the events and makes a JSON file with all the data, and puts it onto S3. When you go to chicagotechevents.com, it is loading that JSON file and smushing it together with a Twig template. Nice and simple.

I am also using Amazon SES for the first time for sending out the email newsletter, because the price was right and integration was easy (so far).

HTML5 Gotchas

I love new web technology. I love shiny new elements, api’s and css styles. I anxiously wait for them to reach enough browser support so that I can use them on client work.

Nevertheless, even when a web technology seems to have reached maturity, I frequently seem to run into gotchas. HTML5 video and audio are ripe with these. Even when I try to avoid them by using a great third party service like Vimeo, you still run into issues with certain old Android browsers.

Take icon fonts for example. I love icon fonts and IcoMoon is an amazing web app that lets you create your own. Everyone seems to be using them. They even work in old IE. So you’d think it would be safe to use them across the board. GOTCHA!

Icon fonts require @font-face support of course, and there’s still a few browsers that lack that feature. I still want to use icon fonts though! They work great delivering crisp single color icons that have a small filesize footprint. So, I went ahead and quickly made a simple iconfont fallback polyfill using Modernizr to test for @font-face support. I asked a developer I work with to check it out on his phone which was still running Android 2.1. GOTCHA! Modernizr gave a false positive for his phone.

So, instead of using Modernizr, I went with Paul Irish’s previous @font-face detection solution, and that did the trick. I’ve posted this little project on Github. I guess could call it Make IconFonts Work On Tim Svensen’s Phone.js, but I just went with iconfont-fallback.