When HTML5 appeared on the programming scene a new trend emerged – computer games running in a browser (and not using Flash). Maybe those games constitute the future of modern entertainment?…

Most of computer games created in HTML5 are two dimensional and they use a new element of HTML introduced in the fifth version – canvas. Canvas is almost like a Paint application running in your browser and your JavaScript code can freely draw on it. It’s enough to draw 25 frames per second to achieve illusion of smooth movement.

An exemplary use of the canvas and the comparison with its alternative – Microsoft Silvelight plugin.

Unfortunately JavaScript is not a very fast programming language and the canvas does provide additional overhead. To achieve smooth movement you frequently need to do many tricks, for example, you can redraw only a part of the screen, create layers such as objects and background where you only modify the first one and many others. It is also necessary to perform periodic profiling of your game to make sure that you haven’t gone beyond browser capabilities.

One of the problems with JavaScript is that it is, by design, only single threaded and asynchronous. This approach works perfectly well with normal text-based websites. However, currently it is a limitation because it doesn’t use modern multicore processors effectively. To bypass this limitation a new “Worker” object was introduced in JavaScript standard. It allows passing some work to another thread (for example a time consuming search for a path on the board can be executed in a worker while the main thread is busy rendering graphics).

Another new HTML5 component used by games is the “audio” tag. It places sounds in the website and later those sounds can be controlled by JavaScript and played when an event takes place (for example a sound of explosion is played when player succeeds in hitting an object with his gun).

An alternative to canvas is the use of a “webgl” library that is unfortunately not yet supported by all browsers. But it allows to make three-dimensional computer games with the quality comparable to commercial games using DirectX.

Examples of great games

This article would be of no worth without some excellent game examples. The following is a short list of HTML5 games in a variety of genres that I personally find amusing.

Command & Conquer

One fan of the classic game Comand & Conquer decided to convert this game from its original DOS environment into browser. To my surprise this project became a huge success and its effect is one of the best computer games ever made available right in your browser.

http://www.adityaravishankar.com/projects/games/command-and-conquer

Entanglement

 

Something for puzzle game fans. Entanglement offers great graphics and an opportunity to sadistically torment our brain cells. It’s perfect for a short 10 minutes break in work.

http://entanglement.gopherwoodstudios.com

Game of Bombs

Game of Bombs is the only multiplayer game on this lists. A player connects to a server where he competes with other players on big boards. Players try to destroy one another by placing bombs and detonating them. And, of course, avoid getting killed by a bomb. Good piece of entertainment.

http://gameofbombs.com

Bananabread

Bananabread is a game created by Mozilla team and its main purpose is to test effectiveness of their Firefox browser. The game is fully three-dimensional with great graphics – effect of using the webgl library.  Bananabread is a great first person shooter where we can compete with other computer controlled players. Unfortunately the game may not work in Internet Explorer because – as usual – this browser is highly delayed when it comes to implementing modern browser standards.

https://developer.cdn.mozilla.net/media/uploads/demos/a/z/azakai/3baf4ad7e600cbda06ec46efec5ec3b8/bananabread_1424465008_demo_package/index.html

Biolab Disaster

Biolab Disaster is a classic two-dimensional platform shooter. You can finish it in 15 minutes.

http://playbiolab.com