HTML5-Pong

I finally managed to finish my Pong game on GitHub! There were some tumbling in the implementation as JavaScript is not my preferred language of choice and I was also not familiar with the HTML5 canvas 2D drawing API. The major idea behind of using those beasts with the implementation was to study them… And well… Let’s just say that during this journey, I managed to learn some quite interesting points about those little beasts. I’ll try to cover the most of them in this post. Let the adventure begin!

At the beginning…

When I started this project, I was already quite familiar how I want to implement this game. I wanted to created a version where both paddles would be controlled by players, so I would not need to create any AI to control either paddle. Event though the complexity of building a simple AI would not be a huge task, it would still additional code complexity in the implementation. I also wanted to keep ball directional rotations simple by only allowing four static directions for the ball. This seems to be quite typical way to implement a simplified version of the ball movement in different kinds of Pong implementations.

The mentioned features would be in contrast with my previous Pong implementation that I made for my Master’s Thesis evaluation. That implementation was far from simple, as it contained AI, complex ball directions changes on paddle hits and it also contained online features with four different kinds of consistency-responsiveness maintenance techniques. Perhaps it was time to create a simple version of the game this time.

Game structure

When I started, I knew that I want to divide the game into three separate scenes. One scene for the welcoming message and game instructions, another scene for the game court where the match would be played and the third scene for the overall results. It was quite easy to figure out that each of scene has only a couple entities and they would be quite easily separated from each other. It was also quite easy to deduce that my game states could be easily used as game states as well. See the following illustration about how the main game state/scene structure was built.

states
Game scenes/states and the related transitions.

I first implemented the scenes as plain JavaScript objects, but then somehow and out of somewhere I found the Revealing Module Pattern that seemed to be a great way to make JavaScript objects to act more like regular classes like in many other languages based on their variable and function visibility. This was a new and quite interesting pattern for me, so I decided to change my game base structure to use it.

I decided to use enter, exit, update and draw functions for each scene. The enter function of the upcoming scene and the exit function of the previous scene would be automatically called with the function that acts as the state changer. I think that this state machine kind of structure worked quite well, as state transitions were quite smooth. Draw and update functions are being called only to currently bound scene, which makes it easy and efficient to change the active scene on-the-fly.

Game entities

Game entities and especially their logical update function took me the most of the time. It was quite easy to start with the welcome scene, as it only contained a couple text entities that were required to instruct the players how the play the game. I was quite satisfied how easy it is to draw and handle text on the canvas by using the canvas 2D API. Couple lines of code and the welcome scene was finished. Not a bad journey on that one at all.

Court scene was the biggest scene, which is not a surprise as it would contain the major of the game logical structures. I decided to split scene entities as the court background, score indicators, paddles, goals, walls and the ball. Drawing the entities was quite trivial to implement as all visible entities were formed from rectangles and luckily the canvas 2D API provides an easy way to draw these by using the fillRect(x, y, width, height) call. I also implemented score indicators to be rendered with the fillRect as I wanted them to be visualized in a old fashioned way i.e. with numbers formed with rectangles.

I added and used a simple AABB structure to detect collisions in the court scene. This may be a bit overkill as the collisions could be detected also via some number limits. But well, it was a nice addition to this journey as I was already familiar with the concept of AABBs. I also actually considered that perhaps I could write a blog post about AABBs and their different kinds of implementations. It would be nice to deep dive into the AABB implementation details as well and write something about them.

The court implementation did contain some JavaScript features that I was not familiar with. It was interesting to see interesting things happen on the court scene when the JavaScript passed arrays as references that were stored as namespace variables. There were times when I did see the court moving like a monster along with the ball, or times when my paddles and their AABBs were moving in completely different directions. We could say that… it added a set of good laugh moments to the journey.

Lastly, but not the most meaninglessly I added the end game scene. It was also quite trivial to implement as it only contained a couple of text entities and a simple button listener to wait for the user to press the enter key.

Summary

 

pong
An in-game screenshot from the court scene.

I could say that I’m quite satisfied with the results. I managed to get the game to work and also figured out new things about the JavaScript and the HTML5 2D canvas API. I think that this game was a good journey to start this blog. Now I’m planning on which game to implement next, or perhaps I could concentrate to some specific game feature and write a post about that?

Thanks for reading!

Gameplay video in YouTube: https://www.youtube.com/watch?v=McVMjHzR6uw

Game source code in GitHub: https://github.com/toivjon/html5-pong

Advertisements

3 thoughts on “HTML5-Pong

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s