pongLet’s build the ultimate version of Pong! Each post I’ll give you simple element to add or change, we’ll combine the best to make the ultimate version!

Sometimes work feels like work, today is one of those days. So I need to have some fun. I have a template for building a Windows 8 Pong app with HTML5. I suspect with an hour here or there I can add a few elements and changes and turn it into a fun game and publish it to the store. Over the next couple of weeks I’ll add new posts and we’ll add more customization and twists to the game!

Let’s be clear about something:

I am NOT a game developer.

I am NOT an experienced HTML5 developer. 

I just think it would fun to publish a game

and I suspect I am not alone. So…

Let’s build a crowd sourced ultimate pong game! Maybe I’m crazy and the crowd will just be me and my son, but I can always tell my boss I was doing research on Windows 8 app development. So I’m doing it anyway! Follow along with me and contribute to Ultimate Pong, or make your own version in parallel, but join in, let’s bring back the 70s! without the bell bottom pants and powder blue tuxedos :)

  1. Download the HTML5 Pong template
  2. If you don’t have it yet, download the Windows 8 SDK (which gives you Visual Studio Express)
  3. Unzip the HTML5Pong template and double click on the file HTML5_Template.sln file to open it in Visual Studio
  4. Press F5 to run it and see how it works. (Yup that’s pong)

Okay let’s make it look cooler!

In the assets folder is a file called bg.png I am guessing that is the background, if I double click on it in Visual Studio it opens up and yup, that’s the background image. So…

Change the background image, paddle and ball.

Let’s change the images used for the paddle, background and ball. Basically we just replace the contents of the file ball.png (the ball), bg.png (the background), and paddle.png (the paddle). You can find them in the Assets folder.

 

Assets folder

Post a snapshot of your game after you update the asset files (keep ‘em appropriate for public viewing please!) on Facebook Microsoft Canada Students. Then we’ll move on to kicking it up another notch! You can get snapshots by running your app in the simulator and choosing the Copy Screenshot button from the right hand side

Copy Screenshot

Bonus points if you change the lose.png and win.png files that are displayed when you win or lose :)

I’m going to use Paint.Net  to create my new image files (it’s a free download, but be careful which download button you click on, lots of ads on their site). If you prefer, there are other tools you can use to edit/create images.

Now let’s see if I have a photo that will work as a background…hah! Found one I think works, and now I know exactly what to draw for a paddle and ball to go with it! I’ll post a screenshot on Facebook as soon as I am done so you can check it out. Post yours too! It took me about 20 minutes to change all the assets, test it and take the screenshot. Of course given my artistic talent, you may wonder why it took that long. You’ll have to visit the Facebook page to find out.