SHARE
Facebook X Pinterest WhatsApp

Developing Basic 2D Games with HTML5 – Intro

Written By
thumbnail
Kashif Nazir
Kashif Nazir
Jul 8, 2015

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.

html5

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.

Recommended for you...

Best VR Game Development Platforms
Enrique Corrales
Jul 21, 2022
Best Online Courses to Learn HTML
Ronnie Payne
Jul 7, 2022
Working with HTML Images
Octavia Anghel
Jun 30, 2022
Web 3.0 and the Future Of Web Development
Rob Gravelle
Jun 23, 2022
HTML Goodies Logo

The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.

Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.