It All Starts In The Classroom
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.
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.
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.
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!