Here is fun HTML5 version of the classic retro computer game Breakout. Use the paddle to direct the ball to hit all the yellow bricks, using either the left/right arrow keys or the mouse.

If you are not aware, HTML5 is a terms usually used to describe the combination of the 5th official standard of HTML, or Hyper Text Markup Language, along with JavaScript and CSS to create visually stunning dynamic and interactive web-pages and applications.

It might be a bold statement, but I would say that

knowing JavaScript is as important for people wanting to work in software development as speaking English is for international business and communication.

Anther bold claim I would make is that WordPress is such a significant technology that it really should be included in school computing courses. I say this because it is the platform behind nearly a third of the entire internet (including this website!). It can be studied at many different levels and with many different angles, such as as a business tool, or a blogging platform or as a code base for developers to bend to their will.

Python is an awesome programming language and is the primary focus of this blog. However in the name of providing a more rounded perspective of the kinds of skills and technologies you will need to master for a successful career in computing, I will occasionally branch out into other topics, such as in this post.

In terms of WordPress, all I want to point out here is the there is a very easy way to add JavaScript and CSS code to a blog post using a plugin called Scripts n Styles. There are other ways to do this, for example enqueuing scripts and stylesheets through your theme’s functions.php file or via a plugin, but there are many situations where that is unnecessarily complex and the Scripts n Styles solution works just fine. One point to mention is that unless you want to wrap your JavaScript code in some kind of document.ready function, then it should be placed at the end of the <body> element – an option provided by the plugin.

OK so, it’s a bit of a hotchpotch of different themes in this article, but hopefully there is something in it that you will find useful or interesting. I have provided the HTML5 code for the Breakout game below. This is not an actual tutorial on how to build the game, but there are some comments to help you understand what is going on. You can run it yourself locally by copy/pasting the code into your favourite text editor, saving as something like game.html and navigating to that file in your browser.

Complete code listing for HTML5 Retro Breakout Game

Happy computing!

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Join our mailing list

Join our mailing list to receive awesome articles about learning Python and Computer Science in a fun and accessible way, straight to your inbox.

 Take your Python skills to the next level!

with our free email course on object oriented programming with Python