HTML5 Game Engine | Skillshare Projects

John Doran

Technical Game Designer



HTML5 Game Engine

Here is the engine in its current state. From now on I'll put the most up to date photo here, and then do a chronological log of how I got there. Cheers!

Not too bad for an evening's worth of work. I guess a little background is in order. I'm familiar with programming (mainly C++), but this is my first time working with Javascript, HTML, or CSS (aside from fiddling with my WordPress theme when needed).  Just a warning, this page will probably have a lot of images...

And now we have a good start to our engine, actually having something come up to the screen and printing out to a console. Perfect. This project mainly seemed to me to be a look at the tools that we're working on and making sure that we can follow directions.

One of the things that I had the most trouble with was in getting the libraries to actually load through Modernizr (I was using the modernizr-latest.js file). Once I got the Developer Tools working on Chrome (which I can already tell are going to be a big help)  I saw that I kept getting an error saying  load function talked about in the class notes didn't exist.

So, like with anything involving debugging files,  I decided to jump into the documentation of the libraries we are using, and Thomas is very correct, the documentation is much better here than it was with almost any library I've worked with before. In fact, I found exactly my issue in the header of the modernizr file saying that, of course, it doesn't include the load function by default.

So, I created a custom libary of modernizr just using the default checkmarks. The image above are the libraries that I checked off. It works for this assignment, but I'm sure in the future we may have to do more with it. Aside from that, the assignment was fairly straight forward and I was able to get it up and done quickly.

And there we go! Output. I'm getting some kind of warning from the interpretation of the libaries, but I'm guessing that's just a library that I didn't include in my custom version of modernizr.

After I got the console window working I spent a good chunk of time googling for how to do something in CSS and then pieceing together the different variables and what they do. I found was a good resource for CSS properties. My header is also not a default font, but Google actually has a program ( that they host fonts for others to use freely in which I used a font that I acually used on my website, Yanone Kaffeesatz.

For the color pattern I used, I've been using a pattern of colors that I really liked from ColourLovers ( I'll probably keep using it over the course of the project unless something comes up.

The other problem I faced was that of getting Mongoose working on my computer. For some reason the file did not want to move into my folder unless I restarted my computer. It could be something wrong with Windows 8, or my computer in particular. I'll probably debug it some more before the next part is due.

I don't see any way to actually upload project files here, so I'm gonna put it up on my Dropbox. If you'd like to review my code and provide any feedback, I'd really appreciate it! I probably over commented, but I like to do that when starting out with a language or to remember certain features.(

If you have any questions/comments at all, please let me know! Cheers!

Also for debugging in Chrome I found this as a great resource:

And I also finished up to section 4 with the second assignment. To see that code, I posted it up here:

Okay, so I finally finished watching the JavaScript: The Good Parts video, and I do recommend taking a look at it if you haven't gotten a chance so far. I'll be picking his book up shortly once I get my next paycheck for sure.

Another thing that I'm doing differently than before is now I am using Sublime Text and it is amazing. I could use some pointers on how to get the most out of it though, so if anyone has any resources on that end I would appreciate it.

Of note, with the example code for the first test it uses alerts, which are nice if you want to give a close box to our player, but in reality we just want to log it to the console. Another thing that I used was the toString function to change the bool type into a string so I could concatenate them using the + operator:

Aside from that the assignment was mostly just following directions which were already outlined for us.  I continued to use the buttons that I used previously to trigger the tests being called. 

I am not 100% sure the outputs are exactly as the example project as I was unable to get the example project to actually load on my computer, but going through the logic it seems like it's sound. I posted a question in the answers section of the side but have still not heard anything.

Hopefully this helps someone out and I'm really excited to get some sprites working... hopefully that will come soon, but I think we're creating game objects next which should also be helpful. It's really cool to see these common game functionality being built in JavaScript though I still keep cringing at the placement of {s... I'm a newline kind of guy. :-)

Okay, so had some difficulty with the code of this particular lecture. Namely, the way the component class is currently working doesn't compile on my end.

My solution was to actually call the parent's extend class instead of the original _componentExtend variable. I'm unsure if this is what the teacher wanted to do or not, but I couldn't find a different fix. Aside from that, the assignment was fairly trivial. I'm getting pretty familiar with working on buttons at this point and created some additional test cases to my engine.

Hopefully we will get a chance to build a game in the near future, but I know we must be patient. :-)


Please sign in or sign up to comment.