Hi everybody, It's time for a new Treehouse Forum contest! First, watch this video to learn more: (treehouse-video-10262) After you've watched the video, please read the details below carefully. I'm looking forward to your entries! How to Enter: Create your game using any combination of HTML, CSS, and JavaScript. You can also use frameworks written in these languages. Your game should not require any browser plugins. For example, you cannot use Flash or the Unity web player. Then, host your HTML5 game entry. You can do this on your own web hosting account, or as a "pen" on Codepen.io (http://codepen.io/). When you're ready, you'll need to post two links: The first link should be directly to your working game. It should be immediately playable in modern web browsers. The second link should be to the code for your game. This can be in the form of Codepen's code view, a zip file, a GitHub repository, or any other format, as long as it's easy to immediately read all of your code. You'll need to submit both links to be eligible. Entries with only the game link or only the code link will not be accepted. Due Date: All entries must be submitted by May 11th at 11:45pm ET. Here's a timezone chart (http://everytimezone.com/#2014-5-11,945,6bj) so you can see what time that is for your locale. Prize: The entries will be judged by Treehouse teachers based on both design and code. One winner will receive a free month of Treehouse Pro on us! :) We'll announce the winner on May 12th and reveal the next contest.

Hi @Josh Hicks (https://teamtreehouse.com/joshhicks), Here's a two part Workshop about object oriented JavaScript that uses game programming as an example: Programming Step-by-Step: Object-Oriented JavaScript: Part 1 (https://teamtreehouse.com/library/programming-stepbystep-objectoriented-javascript-part-1) Programming Step-by-Step: Object-Oriented JavaScript: Part 2 (https://teamtreehouse.com/library/programming-stepbystep-objectoriented-javascript-part-2) We also have some game dev lessons for iOS coming soon, and we plan to do more on game dev in the future. :)

If you are a Pro Member you can check out our Coding your first HTML5 game (https://teamtreehouse.com/library/coding-your-first-html5-game) workshop.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Posted May 5, 2014 3:34pm by

Forum Contest: Build an HTML5 Game

Hi everybody,

It's time for a new Treehouse Forum contest! First, watch this video to learn more:

After you've watched the video, please read the details below carefully. I'm looking forward to your entries!

How to Enter: Create your game using any combination of HTML, CSS, and JavaScript. You can also use frameworks written in these languages. Your game should not require any browser plugins. For example, you cannot use Flash or the Unity web player.

Then, host your HTML5 game entry. You can do this on your own web hosting account, or as a "pen" on Codepen.io. When you're ready, you'll need to post two links:

The first link should be directly to your working game. It should be immediately playable in modern web browsers.
The second link should be to the code for your game. This can be in the form of Codepen's code view, a zip file, a GitHub repository, or any other format, as long as it's easy to immediately read all of your code.

You'll need to submit both links to be eligible. Entries with only the game link or only the code link will not be accepted.

Due Date: All entries must be submitted by May 11th at 11:45pm ET. Here's a timezone chart so you can see what time that is for your locale.

Prize: The entries will be judged by Treehouse teachers based on both design and code. One winner will receive a free month of Treehouse Pro on us! :) We'll announce the winner on May 12th and reveal the next contest.

23 Answers

May 11, 2014 5:27pm

All right !! That took forever but i'm finally done, pfew!

I tried to use (= learn) phaser.js which is a really great framework. I had to host it on my personal server because the game includes a lot of assets and i didn't know where to upload them since I dont have a PRO Codepen account :'(

Game

Source

Any asset I used which was not made by me has the source linked in the code comments.

Thanks treehouse for another great contest, good luck to all.

May 11, 2014 5:38pm

Cool.

May 11, 2014 5:41pm

Or you could use github pages: https://pages.github.com/. Nice choice of music, btw. :)

May 11, 2014 5:51pm

I tried to use that, but had some trouble loading some assets.

Thanks for the advice, i knew that something like that existed, just forgot how to find it.... I'll be sure to use it next time ;)

That music drives me crazy, heard it all day long during development !

May 11, 2014 7:00pm

Cute game! I had to delete my background (game over) music after listening to it for two days, I couldn't take it anymore.

May 12, 2014 4:26pm

SONIC!

May 12, 2014 4:57pm

Congrats Rémi.

May 5, 2014 8:40pm

Can Treehouse PLEASE make a course on how to do this??

May 5, 2014 9:07pm

Hi Josh Hicks,

Here's a two part Workshop about object oriented JavaScript that uses game programming as an example:

We also have some game dev lessons for iOS coming soon, and we plan to do more on game dev in the future. :)

May 11, 2014 10:35am

This is my attempt. Had to finish it off in the long trip home from visiting parents this weekend - just managed to scrape the last of it together!

Game: http://williamdahl.com/connectfour/ Code: https://github.com/Will-D/ConnectFour

May 11, 2014 2:15pm

This looks awesome. Good job in the AI. And it works on mobile. Do we have a winner?

May 11, 2014 3:27pm

Wowsa. Thing kicked my butt. Seriously nice.

May 11, 2014 3:45pm

Really good job of the AI!

May 11, 2014 4:13pm

The color and shading is done perfectly.

May 12, 2014 7:57am

I need to credit the source of a main part of the application. It is based on "Align 4" by "Will Boyd". http://codepen.io/lonekorean/pen/Gbwvc

I added some new functionality to allow the choice between single player and multiplayer.

I intended to make more changes, but was short on time.

May 12, 2014 7:57am

Thanks folks. Appreciate the positive feedback!

May 12, 2014 8:40am

Cool!

October 28, 2014 9:22am

I beat the Ai on 5. It was tough at first but it is easy when you figure out the strategy.

May 5, 2014 10:28pm

If you are a Pro Member you can check out our Coding your first HTML5 game workshop.

May 16, 2014 9:09pm

Why must everything be pro :( I cant afford $50 but want awesomeness

May 9, 2014 6:51pm

game: http://codepen.io/mmaynar1/full/fEnbv code: http://codepen.io/mmaynar1/pen/fEnbv

May 10, 2014 4:49pm

Thats really cool man! Well done :)

I do feel like the game would benefit from some instructions through

May 10, 2014 7:54pm

Classic! Works great on my mobile portrait and landscape.

May 11, 2014 12:01am

Thanks for the feedback! I went ahead and added some directions. Now that I think about it, it would have been cool to match the hero to the appropriate villain, but oh well haha

May 11, 2014 4:36pm

My first forum contest :)

Game: http://www.chrisdawson.me/iesweeper/ Code: https://github.com/chrisdawsondev/iesweeper

I found it very challenging to get it working like the original Minesweeper game but feeling very proud of myself right now for doing it!

May 11, 2014 4:40pm

You should be proud. This is really a solid implementation.

PS Nice touch with the IE icons as mines.

May 11, 2014 4:45pm

Thank you :)

May 11, 2014 4:47pm

Wow, this is very impressive well done!

The only criticism I can say about this, upon hitting a mine it is not visually apparent how the user is to restart the game. Can I recommend solving this problem by perhaps adding in a refresh button.

May 11, 2014 4:53pm

Thanks for the feedback :) You can press the face icon to reset the game but maybe I need to make this more obvious somehow.

May 11, 2014 6:27pm

Just added a win/lose message with reset button :)

May 11, 2014 10:29am

ios7is

Game: http://davbik.github.io/ios7is/

Properly(no, not really) commented code: https://github.com/davbik/davbik.github.io

May 11, 2014 10:35am

Love it! Modern twist on a classic.

May 11, 2014 2:37pm

I love the fact that the game is on an iPhone. Clever compartmentalization.

May 11, 2014 5:50pm

Now that I have had a chance to play, I love it even better. I also love the iPhone icons.

A suggestion: The text "Click to Start" is really hard to read. I'm not sure what the right answer is, but you need more contrast. It may be as simple as black text, but you'll need to try and see.

May 11, 2014 5:56pm

Really nice ! Forgot how bad I am at tetris... died 3 times without being able to delete one single line...

May 11, 2014 6:56pm

Thank you for the feedback, John. I updated the game.

May 12, 2014 11:48am

Here is my epic game, dragoontail, i did it for a assessment, it is not finished though i still have to make the dragon animate, add sound, and make the game end on impact with the birds, and do better graphics

http://codepen.io/LadyEpic/pen/vaKrp

May 12, 2014 11:53am

was i too late ? :S i hope not

May 12, 2014 2:08pm

I hope not. This is really cool.

May 6, 2014 5:55pm

For those who aren't pro, can you suggest an eligible framework? The ones I've looked at aren't written in JS.

May 6, 2014 6:51pm

I've heard good things about Phaser: http://phaser.io/

You can also check out this list, which should include lots of JS frameworks: http://html5gameengine.com/

May 7, 2014 7:56am

In all fairness Nick Pettit I think most students myself included will need more than a week to pick up phaser.io and put together a game from it!

The deadlines seem a bit skewed to me one week to create a toggle, one week to create a form - ok great those are isolated features that's realistic. One week to create a game seems like a stretch to me, especially as Monday was a holiday so in effect it's a 6 day week here in the UK.

Just my 2 cents :)

May 7, 2014 2:21pm

Richard Duncan,

I totally agree that it's a pretty intense deadline, but we also received over 100 entries for the contact form contest. Upcoming contests are a bit easier, but we wanted to present a pretty intense challenge to see what kind of response we get. Another way to look at it is less competition. So far there are zero entries, so if you create a super simple clone of Pacman, Pong, Snake, Space Invaders, or whatever, odds of winning are pretty good.

May 8, 2014 12:03pm

Any chance of an extension on this deadline if there are say less than 10 entries? I'm away tomorrow for two days and would really have liked to submit an entry I've just not had the time!

May 7, 2014 3:18pm

I finnished a simple game, but it doesn't work in codepen, doesn't look nearly as good either in codepen as it does in firefox or chrome.

May 7, 2014 3:25pm

I imagine it would be alright to create a Workspace of your submission and post the link to the rendered page. Then post your code via one of the methods that Nick Pettit mentioned in the op.

May 7, 2014 5:06pm

Ok here it goes, with all the newbie skills I could muster. 100% origional work. 1. gameLink

codeLink

May 7, 2014 9:55pm

I just checked this out, looks cool!

Workspaces only last for about 15 minutes right now, so eventually this link will go down. You should try to host this someplace else on the web.

May 7, 2014 10:13pm

Did not know that about Workspaces.

May 7, 2014 11:07pm

Got it to work in CodePen!! happy dance! http://codepen.io/Leebus/full/jopbw/

May 8, 2014 4:24am

And they said that it could not be done. This is awesome!

May 10, 2014 7:42pm

Work on mobile too.

May 10, 2014 9:24pm

Yeah, works on tablets, didn't try it on mobile. My plan was to add levels like defuse the bomb at lvl 2 and make it a spy adventure.

May 11, 2014 3:52am

Good idea to keep it simple for a one week deadline. You can add stuff later.

May 8, 2014 5:41pm

Happy Kitty Game: http://www.ashlynnpai.com/games/happykitty/

Please use Chrome or Firefox. Audio is enabled. Requires a keyboard.

I found an amazing tutorial online. I just decided to follow it and try to tweak the code. This was only possible for me because Steven explained every line of his code. Thank you Steven! Before this the longest thing I ever coded or debugged was around 30 lines of Python for a Coursera class a month ago.

http://blog.sklambert.com/html5-canvas-game-panning-a-background/.

The changes I made are listed in https://github.com/ashlynnpai/kittygame/blob/master/readme.rtf. If not listed here assume the code is Steven's unmodified.

Code at https://github.com/ashlynnpai/kittygame.

Please let me know of additional bugs not already listed in the README.

May 10, 2014 7:46pm

I'll have to try this later when I have a keyboard. Look cool.

May 10, 2014 9:20pm

Awesome!!

May 8, 2014 7:12pm

I've been working on a game for a couple of months now. The game was first designed in the middle of 2013, and after a couple months, due to school work, I have not worked on it for awhile. A few months later, during the year of 2014, ideas such as online multiplayer have risen, and soon enough I went back to work on my game. Last week I incorporated Node JS and Socket IO as an add-on to my game. My question is, due to the fact that I worked real hard, may I be able to not present my source code? I know judges will look at neatness of the code, and the gameplay mechanics, but I the project was made with hard work and patience, and I feel that showing my source code, as educational as it is to show people how it was made, really, to me at least, obstructs the fact that I worked hard on it. Can there be any exceptions? I recently logged in, and I had just noticed this contest was posted 3 days ago, while my game was released just a day ago.

If exceptions can be made, I will post my game. If not I will just make a new one. I am happy with either decision. This is a fun contest after all.

Regards, Guled

May 8, 2014 7:37pm

Hi Guled,

I understand your predicament, but to be fair to other entries, you'll need to share your code here. Sorry!

Nick

May 8, 2014 8:09pm

No worries. Thank you for making this contest. Also here is the game I was working on. I still have to make it quite responsive for mobile use, but for desktop/laptop usage it proves to be fine (I hope, for all screen resolution cases).

May 10, 2014 7:50pm

This looks really slick. It is obvious that a lot of time and thinking has gone into this.

May 11, 2014 3:17pm

Thank you. I appreciate your comment.

May 10, 2014 6:49pm

Here's my entry:

code / full

This was supposed to be my revenge for last week, but as I post, the project is still "missing a little polish." No matter. Next week will be better.

May 10, 2014 7:29pm

I think I need instructions. I think it matters less that its polished. Just starting a game and coding it is miles ahead of people who didn't even bother.

May 10, 2014 8:32pm

I agree. Thanks for the feedback.

May 10, 2014 8:33pm

Oops. Maybe I could give instructions here (seeing as the game doesn't include any).

The goal is to beat the clock in a boxing match. Hover the mouse on the left or right side to block his punches. Click to punch. Each punch reduces the health to zero.

Sorry, but there isn't any "you won" screen. In fact, the game never ends, and the clock keeps on punching. A little polish is all, right?

May 10, 2014 10:41pm

John, will you connect with me on LinkedIn?

May 11, 2014 2:28pm

I would be honoured. Alas, your LinkedIn profile requires an email address, so I cannot sent a request. My LinkedIn profile is included in my Treehouse profile.

May 11, 2014 3:25pm

Lol that is kinda fun! It's so fast though it does feel a bit like a seizure in the works.

May 11, 2014 3:57pm

Thanks. As I said ... it works, but it is still a bit rough on the edges.

May 11, 2014 5:57pm

Took me a while to figure it out, but its great and original ! Good job

May 12, 2014 2:15pm

This is not finished and it certainly is not to replace my entry; this is where I was going with the feedback:

code / full

I redid it from scratch and actually learned a bit. A lot of my problems are in the basics, so I spent a lot of time watching old videos. I was doing GREAT until I reached the point where I wanted to add the boxing gloves. Same problem with responsive design that I always have.

I was then going do do several images of boxing gloves in different positions (I think that there is 8 for each). At any time, only one of 8 images would be visible. Neat, huh? The idea was to load each of them with their own z-index, center them, and let the browser worry about sizing them. I figure that if they are all the same height and all scaled to height, it should work out.

But I ran out of time ....

May 11, 2014 12:39am

That's the first time I enter a contest here at treehouse. It's a pretty simple game, but it's all I am capable of so far Code: http://codepen.io/offline_blogger/pen/Kedtr | Full: http://cdpn.io/Kedtr

May 11, 2014 3:55am

It is well executed all around. Good choice of font.

May 11, 2014 5:02pm

Oh thank you! :)

May 11, 2014 6:00am

This was not an easy one, but I feel like a winner for just attempting it. I let it irritate me to the point where I wouldn't quit until I got it done. Game | Code

May 11, 2014 8:51am

Looks good man well done! reminds me of continuum!

May 11, 2014 10:32am

Nice work! I agree about not an easy competition, but you have done well!

May 11, 2014 2:34pm

If I could have a team of you -- people who would not quit -- there is nothing that team could not do. If I were an employer, I'd hire you.

Great looking game. Alas I do not have a keyboard just now, so I'll have to try this later.

May 11, 2014 2:46pm

Thanks guys. I really wish I had more time to develop it. I had hopes of introducing enemy ships (Reavers), but I ran out of time. The ship picking up the Space Mikes is Serenity from Firefly. I had to make it even more nerdy!

May 11, 2014 5:42pm

The physics/handling of the Firefly is great. I also like the background ALOT.

May 12, 2014 3:53pm

Hi everyone,

These games are absolutely amazing! This was a much more difficult contest than usual, so I'm very impressed at the number of high quality entries. You should all feel really good about the work you've done.

After much deliberation, we chose Rémi BRUGUIER's game Panda Panic as the winning entry. Congratulations, Rémi! The game uses Phaser.js and, while the artwork is not original, it has all been cleverly combined from many different sources to create something new. The code itself is pretty fascinating and provides lots of good examples for aspiring game developers.

Again, I want to emphasize how tough this decision was to make. All of the entries are pretty amazing and should be considered a nice addition to your personal portfolios. If you didn't win this time around, don't give up! We do these every week and they're meant to provide you with practice. :)

May 12, 2014 5:22pm

Nice! Congrats :) Psst: there is a tiny bug. Sometimes the panda falls through the floor as he drops down lol

You did a great job though. I built one in limejs but couldn't push it because lime wouldn't work on my home comps and was getting confused on my work comp :/

I appreciate how much had to go into this :)

May 12, 2014 6:31pm

Will there be a new contest this week?

May 12, 2014 8:59pm

Well thanks treehouse and everybody for the kind comments !

See you at the next contest :)

May 12, 2014 10:15pm

Yep! There will be a contest this week. We had some trouble encoding the video today, but it's ready now and should go up tomorrow. :)

May 13, 2014 8:16am

Well done Rémi!

May 5, 2014 10:12pm

Perfect! Thanks

May 6, 2014 2:37pm

PHP?

May 6, 2014 6:35pm

No, sorry. We'd really like these to be in HTML, CSS, and JavaScript.

May 7, 2014 4:29pm

Anybody having trouble with the simple game walkthrough in the video before lime.js? I can't get my code to work. I think it has to do something with the imgFrog.addEventListener("load",init,false); I tried to add an alert to the init() function and still nothing.

May 8, 2014 2:08pm

If we are just grabbing html from a PHP script, is that alright?

May 10, 2014 7:56pm

Nothing.

May 10, 2014 8:29pm

Nothing 2

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Nick Pettit

Nick Pettit

Forum Contest: Build an HTML5 Game

23 Answers

Rémi BRUGUIER

Rémi BRUGUIER

John Coffin

John Coffin

Oleg Drobin

Oleg Drobin

Rémi BRUGUIER

Rémi BRUGUIER

Ashlynn Pai

Ashlynn Pai

Andrew Chalkley

Andrew Chalkley

John Coffin

John Coffin

Josh Hicks

Josh Hicks

Nick Pettit

Nick Pettit

William Dahl

William Dahl

John Coffin

John Coffin

Samuel Nord

Samuel Nord

Richard Duncan

Richard Duncan

John Coffin

John Coffin

William Dahl

William Dahl

William Dahl

William Dahl

Cherie Burgett

Cherie Burgett

Ryan Hellerud

Ryan Hellerud

Dave McFarland

Dave McFarland

Brandon Stewart

Brandon Stewart

Mitch Maynard

Mitch Maynard

James Nelson

James Nelson

John Coffin

John Coffin

Mitch Maynard

Mitch Maynard

Christine Dawson

Christine Dawson

John Coffin

John Coffin

Christine Dawson

Christine Dawson

James Nelson

James Nelson

Christine Dawson

Christine Dawson

Christine Dawson

Christine Dawson

Oleg Drobin

Oleg Drobin

Richard Duncan

Richard Duncan

John Coffin

John Coffin

John Coffin

John Coffin

Rémi BRUGUIER

Rémi BRUGUIER

Oleg Drobin

Oleg Drobin

Ariel Beninca

Ariel Beninca