• Search results
November 12th, 2015

Project Three Recap - Classic Arcade Game

So this was a fun one! This was the first project of the Nanodegree program that I was genuinely excited about (and also very scared). We were finally getting out of the beginner level stuff and going to create something fun, new, and exciting! I had never taken on a coding project of this nature before. To date, everything had been very simple and I had never even begun to think of anything with gaming, I had only been focused on web apps. In this project, you create a simple version of a knock off Frogger game. The artwork and game engine is provided to you, along with a few basic hints in the JavaScript file you will be working on.

Arcade Game Project


It All Starts In The Classroom

There are two video courses provided for this project, Object Oriented Javascript and HTML5 Canvas. Both are used (to a degree) in the project. I found the OOJS course to be very thorough and well taught. It was a bit on the fast side, but you could tell the teacher knew his stuff. Marcus Phillips from Hack Reactor taught this one. This was the first guest teacher course in the Nanodegree program so far and the content and how it was conveyed to the student was very good. Not to knock Udacity’s teachers in the other courses, they do a great job! But it just seems like more time and effort go into the courses taught by the guest instructors from other tech companies.

I found myself watching this one twice and I am planning on going through it one more time to take some more detailed notes now that I have a better understanding of the content. It’s quite overwhelming on your first run-through of the videos. Once you begin to understand and you get a little practice with the project, then it begins to click and you want to go back for more!

The other course for this project featuring HTML5 Canvas was just the opposite unfortunately. I’ve dealt with Canvas a bit with some other tutorials in the past so I had a pretty good idea of how it works and what it can do. I just didn’t find the content very useful…I feel like they could have done some more interesting stuff in the videos. To give you an idea of where I’m coming from with this, I read Head First: HTML5 Programming awhile back and it had a section on Canvas where we built a simple app that would print some shapes and a saying onto a “T-Shirt” on the page. Useless, I know, but I grasped the concept a whole lot better through that one. But I got more out of the book than I did this video course. To make matters worse, you really don’t even use Canvas in the project for the arcade game. That part of the project is already completed for you so you are only focusing on the code to make the game work. Don’t get me wrong, the project was a good one and quite challenging, but we didn’t actually use Canvas ourselves to complete it. At the end of the project, I guess I just felt like I wasted my time watching the Canvas course because I didn’t actually use any of the info provided to complete the project.

Coding Frogger!

Despite the small issues I had with one of the courses, I will say that the actual project was the most enjoyable to date in the Nanodegree. It was by far the most challenging but also the most rewarding. I remember finishing up the courses and reading over the instructions just thinking to myself “how in the world am I going to do this??”. This was a great project for me because it allowed me to grasp so much more understanding of just how powerful some lines of code can be. I always knew what JavaScript could do, but I just didn’t know how to make it do those things. Like most things though, a little research and actually getting started were the keys to success.


This project is all about object oriented JS, using classes and inheritance. Nearly all of your coding will be done in the app.js file, there are two others - engine.js and resources.js - that are basically finished for you. Engine.js is the game engine that provides all of the rendering, game updates, and all that fun stuff that you will be tying into. Resources.js includes the graphic files and hooks all that up for you. So it’s your job to go through app.js and fill in the player and enemy classes and all of their methods.

Object.prototype is incredibly useful in this project and is basically the answer to everything. Udacity provides you with a start to the Enemy class and provides useful code comment hints throughout the file. It’s your job to create the subclasses for Enemy by using object.prototype and then create a Player class using the same model.

Bugger Code Example

Random Tangent On The Math Object

After getting the two main classes setup, you need to focus on implementing Player movement, Player boundaries, restarting the game upon completion or failure, Enemy movement, Enemy speed, and collision detection. I found the Player functionality easier than the Enemy because the Enemy speed calculations involved some Math.random fun. I have a love/hate relationship with the Math object…See, I originally chose not to major in Computer Science in college because I had it in my head that I hate math and I’m no good at it. I do hate math, but I’m not quite as bad as I think I am…So I always amaze myself and find it fascinating the things you can do with the Math object to come up with real world uses. My problem is, I can’t think of these on my own…But when I see an example of one and it clicks, I love it!

Back To Your Original Programming

Anyways, back to the project at hand…So with the Enemy class you will need to write functions their placement on the canvas, their movement, and the speed at which they move. There are 3 enemies and they all need to move at a different speed to make the game challenging so that’s where the Math object comes into play.

Bugger Math Object

Collision detection was the other difficult part of the project. It basically involved a very complicated if statement that compared the locations of the Enemy objects on screen and the Player objects on screen, added the appropriate number of padding to each set of coordinates to match the artwork, and reset the game if they matched.

Overall this was a very challenging project that definitely gave me the greatest sense of accomplishment. On the surface, it’s just a really silly looking simple version of frogger than no one in their right might would waste time playing. But it’s actually the core of the frogger game. All that needs to be added is scoring, a wider map, more enemies, etc…A lot of work for sure - but nothing that can’t be done without skills we’ve already learned. If I had the time and was really interested in creating games, I would definitely spend some more time on this one to make a fully fledged game. Unfortunately, I was never that big of a Frogger fan and I’m eager to move on to bigger and better things!


Philip Bowles