Experiments in HTML5: Digital Racing Tracks

Many enterprises were skeptical about the success of HTML5 in the initial years. But within a shorter span of time, the markup language is being used widely to presenting and structuring a variety of content for the web. A number of recent reports have highlighted how a constant increase is noted in the number of mobile apps being implemented by using the updated version of HTML. Many organizations are also carrying out experiments in HTML5 synchronize devices running of different mobile platforms.

Before a few months, a multi-device and multi-player Chrome experiment called Racer created a buzz by allowing the use to play the game simultaneously with five distinct players. The slot car game enabled users to create digital racing tracks by lining up five smartphones or tables. Thus, multiple users can compete with each other side-by-side on the digital racing track at a time. As the game runs completely on Chrome, it becomes easier for users to synchronize multiple mobile devices and build digital racing tracks.

Innovative Technologies Used in Building the Digital Racing Tracks

HTML5 Canvas Elements

The car slot game is developed using HTML5. So it can run on both Android and iOS devices that allow users to install the Chrome browser. After installing mobile Chrome on his device, a user can simply point the mobile web browser to “chrome.com/racer” to setup and play the game. Instead of conventional ASCII-animation, the game uses HTML canvas elements to deliver pixel-perfect and speed animation.

Paper.js

As an open source vector graphics scripting framework, Paper.js runs on top of the HTML5 canvas. It further makes it easier for developers to build vector graphics and bezier curves by using an effective programming interface. The JavaScript vector library provided by Paper.js is used by Racer to create custom tracks, and facilitate the fluid movement of cars. At the same time, Paper.js is also effective in preventing the path math across multiple mobile devices from getting lapped.

Web Audio API

The Web Audio API is used by many applications to process and synthesize audio. The powerful JavaScript API is used by Racer to make the soundtrack react according to the movement of each user. However, the API will work only on the devices that where it is supported. If the device supports the API, users can enjoy dynamic soundtrack while accelerating, colliding, coasting or careening. The dynamic mixing of Giorgio Moroder’s symphony further makes the gaming experience both exciting and realistic.

WebSockets

Many applications, nowadays, use WebSockets to maintain persistent communication between the client and server. The specification further defines an API that can be used to establish and maintain socket connection between a web browser and server. Racer used WebSockets to facilitate uninterrupted communication between different devices. The efficient and persistent communication also results in movement of drivers. Also, the specification further helps in synchronizing the race by facilitating a rapid and multi-way conversation through sharing of data from the server.

Google Cloud Platform

Racer also avails the combined benefits of Google’s App Engine, Cloud Storage, and Compute Engine. Many enterprises use Cloud platform to build, deploy and test a variety of applications on the reliable and highly-scalable infrastructure provided by Google. The scalable Cloud architecture from Google provides a solid base to the slot car game to run on. Along with reliable hosting, the quality infrastructure further enables Racer for speedy computation and quick load balancing.

Despite being a simpler experiment in HTML5, Racer will encourage more enterprises to build mobile applications that deliver multi-user or multi-player experience. The slot game can be further updated to create larger digital racing tracks that spread across more mobile screens. The early experience further highlights how HTML5 and related technologies can be used to build innovative mobile applications. You can get in touch with a custom HTML5 development company who can help you build html5 web apps within allocated budgets and time schedules.

We provide HTML5 web development services. If you would like to speak to one of our expert HTML5 developers, please contact us at Mindfire Solutions.