Developing Basic 2D Games with HTML5 – Intro

By Kashif Nazir

Most people who were born in 90s will remember the Mario Brothers game. It was one of the most popular games of its time and inspired many other popular and subsequent games. It was 2D, or two dimensional games, in which the characters moved horizontally and vertically only. This means they can go back and forth, up and down with the side scrolling screen allowing very limited movement and action. The main drawback of these games is the sheer lack of programmable graphics and are typically built in Java and C++ with very limited options for the developers.


Previously 2D games were developed using Flash, Flash however is not compatible with most modern mobile devices and is not supported at all on iOS. Another drawback is the load time for Flash where games take more time to load. Moreover, the Flash application consumes the battery life more quickly on mobile devices. These are all reasons for the decline in popularity of 2D games that are played through the Flash Player.

In the last few decades HTML was used to display the images, layout, text and content on the web page. But with the evolution of the technology HTML has also evolved from a static display to a total interactive browser. It can perform many functions without any plug-ins and the extensions attached to the browser.

With the advent of Html5, development of 2D games has revolutionized the whole idea of gaming. There is not only a major change in the art and design but also the functionality and advanced features involved. After the introduction of Googles Android OS for mobile phones, the popularity of 2D games in HTML 5 took off in popularity among children, teenagers and adult game players alike with developers trending towards developing games that can be played with one hand.

Animations are also more appealing and convincing while the backgrounds are more natural with depth and a more sensuous experience in 2D games developed in HTML 5.  No longer do characters have to move through the mouse or the arrow because the character of the game runs by itself and the player can jump or shoot with just one touch of the finger ore just one click. These 2D games are called “EndlessRunner”. These types of games like Temple Run, Subway Surfer and many more are the most sought after games for the new generation. Unlike the 2D games in Flash Player, in Html5 game graphics are more captivating that allow the player to enjoy the game at its best.

HTML 5 has taken the world of games to a whole new level for both the developer and the player. If a developer is hoping to achieve and attract a mass audience to his game, then HTML 5 is the best choice to develop that game since unlike Flash which requires a player to run the Flash movie, games developed in HTML5 the browsers themselves have become so smart that a developer can add up all the 2D graphics and 2D animations without using a separate app, player or plug-in for the browser, plus game can now be functional online as well as offline.

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date