PongOut

The normal playing screen for PongOut.

The normal playing screen for PongOut. This level follows the idea that you have a safety net of BreakOut-bricks behind your paddle.

After blogging about the BreakOut/Pong-Crossover before (see blog posts one and two), this post marks the release of the game.

PongOut is a crossover between BreakOut and Pong for two players – the two players play pong, but first they have to break down a barrier in the middle of the playing field. For me, this game was an experiment in writing a web-based game from scratch, i.e. without using frameworks for either the backend or the frontend. Accordingly, many aspects could be improved, but since the source code is available, this might still happen ;-)

I finally got around to pushing this one to a presentable state. In the middle of the project, I was severely stalled as I fell ill to feature creep, and one change seemingly led to another change. I finally decided to cut some things and get it finished.

Frontend

PongOut is realized as a HTML 5 game. I started pretty much from scratch, which is why the game doesn’t really have what you would call a game engine, but it has some parts that could be used to build one. As much of the javascript-code as possible is realized object-oriented and is moved outside of the main file into reasonable sub-files.

PongOut’s editor view.

PongOut has a “play” mode and an “editor” mode. In the play mode, the chosen theme is used to determine which graphics are loaded, and the normal playing logic is used. In the edit mode, the elements are drawn in a very basic style, and you can add new elements and move and arrange them along each other. For example, the bricks are drawn using the following function. Here you can see the case distinction between the modes in the source code.


Brick.prototype.draw = function(ctx) {
  if (this.isSelected) {
    ctx.fillStyle = "red";
  } else {
    ctx.fillStyle = "white";
  }

  ctx.strokeStyle = "black";
  if (mode == "play") {
    ctx.drawImage(imgBrick, this.pos.x, this.pos.y, this.width, this.height);
  } else {
    drawRect(ctx, this.pos.x,this.pos.y,this.width,this.height);
  }
  ctx.fillStyle = "purple";
}

One more aspect that is handled as HTML 5 is saving the preview image of the level and saving the level data. The preview image is generated using canvas.toBlob. Since this is not implemented in all browsers, I used the method by Eli Grey which you can find here. I also made use of Eli Gray’s BlobBuilder.

The level data is serialized to a json-file which is then uploaded to the server. During loading of the game, this file is loaded and parsed.

There are many libraries used. For the look & feel, Twitter’s Bootstrap is used. Furthermore, jQuery and jQuery-UI as well as jQuery-fileupload have been used.

Backend

PongOut’s backend view of the available levels.

The backend is realized using PHP and MySQL. For installing, there is an install.php which will initialize the database and help you set up the server. The workflow of pretty much every php page is setting up the connection to the database server, making one or more queries (for example, for getting the list of all levels to show them in the list view) and then displaying the results. Pretty straightforward. I’m sure that the code could be improved by encapsulating often-reused code, but that is left for another project ;-)

Lessons learned

It was definitely a good learning experience making PongOut. It’s interesting for me to see how I got some basic functionality up quickly, and then got into the feature creep-mode where the project was stalled. In future projects in my free time, I will strive even more towards focusing on the important aspects of the project and keeping it in a state where I might just release it.

Also, writing pretty much most of the game and backend from hand was a nice experience. However, it’s very cumbersome this way, and invites a lot of code re-use and spaghetti code. The next time, I would probably choose a language such as Haxe for the frontend (and compile it to JavaScript) and a frameworks such as CakePHP for the backend.

Try it for yourself!

PongOut was started as an experiment. I implemented some functionality that would be required for a complete solution, but, the project is not intended to be production-stable. Especially, I have taken pretty much no regard to security ;-) So, instead of setting up a complete and insecure server, I have exported three levels as static web pages so you can try them out. If you are really interested in how the server works, feel free to clone the source code from github and set one up.

You can find three levels and also toy around with the editor using the following links:

Level 1: Play Edit
Level 2: Play Edit
Level 3: Play Edit

The assets for level 1 were used from OpenGameArt, “Breakout Graphics” by Scribe and “Breakout Graphics” by Marcus.

Source code

Source code for everything (server, editor, management) is available on github.

One thought on “PongOut

  1. November 5, 2015 at 1:45 am

    Oh my goodness! Impressive article dude! Many thanks, However I am going through issues with your
    RSS. I don’t know why I can’t subscribe to it. Is there anybody getting similar RSS issues?

    Anybody who knows the answer will you kindly respond?
    Thanks!!

Leave a Reply

Your email address will not be published.