Pong/Breakout – Progress

Not that much to show at the moment for the Pong/Breakout game, as the first milestone I’m aiming for is a black and white version including the web-based editor, with fancier graphics being added in a second step.

The screenshot here is from the editor part, featuring PowerPoint-style alignment lines to help you align bricks with each other.

pongout_editor

PHP

Actually this is my first time programming PHP, but despite my impression that the language was haphazardly built and adapted whenever a need for changes became clear, at least for such a small project I like it and actually prefer it to Ruby, my only other experience of server-side programming so far. I’m running xampp which allows me to quickly test everything locally with minimal time spent for setup. A pretty cool feature of Brackets is the live preview which figured out that I had pages that needed to be served to make use of the PHP bits and automatically loaded them from the local xampp http server.

Actually, really working on the details of the server-client connection and AJAX made me realize that starting out with Ruby is a bit like learning to run before you can walk. It’s a powerful tool, but if you don’t know where it’s coming from you’re left in the dark about the things that Ruby handles for you in the background.

Fancy HTML 5

My rendering code so far isn’t doing that much fancy things with HTML 5, but for the editing code I’ve thought of a nifty way of saving a preview image so you can see your levels when choosing which one to edit or play.

The magic happens in the Canvas.toBlob() function, which saves the content of a HTML 5 canvas to an image file that can be uploaded to a server. Below is the code that does this conversion and upload. With the same system, the relevant parameters of the level are saved and serialized to a JSON file, which is also uploaded as a file.


function blobEncoded(blob) {
var fd = new FormData(document.forms[0]);
var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle the upload
}
}

// Save all relevant variables from the arrays "paddles", "balls" and "bricks"
var level = { "paddles": paddles, "balls": balls, "bricks": bricks };

// Convert it to json
var json = JSON.stringify(level);

// Upload the json as a file
var jsonBlob = new Blob([json], { type: "text/json;charset=" + document.characterSet });

fd.append("levelFile", jsonBlob);
fd.append("preview", blob);
fd.append("id", id);
xhr.open('POST', 'uploadLevel.php', true);
xhr.send(fd);
}

function saveLevel() {
// Initiate the encoding of the canvas to a blob
canvas.toBlob(blobEncoded);
}

Since all of this is still so new not all browsers support it. This is where the development community and the so-called “polyfills” come in, libraries which provide the missing functions in those browsers that have not yet implemented them. In this case, the necessary libraries are canvas-toBlob.js as well as Blob.js. With this, the whole thing runs on the current versions of Chrome and Firefox (with Firefox being seriously slower though – there will be some optimization coming my way I guess. But that is a different topic…)