Make the most of HTML5 techniques to create exciting games from scratch. Learn HTML5 game development with this collection of 6 game development projects, and start creating your own fun games for the browser. HTML5 Web Application Development By Example you know that Packt offers eBook versions of every book published, with PDF and ePub . Ending the game .. In this first chapter we will learn the basics of creating an HTML5 application.
|Language:||English, Spanish, German|
|Distribution:||Free* [*Registration Required]|
HTML5 Game Development by Example Beginner's Guide . Did you know that Packt offers eBook versions of every book published, with PDF and ePub. HTML5 Games Development by. Example. Beginner's Guide. Create six fun Did you know that Packt offers eBook versions of every book published, with PDF . HTML5 Game Development by Example Beginner's Guide Second Edition is a step-by-step tutorial that will help you create several games from scratch, with.
It discusses the audio format capability among web browsers and creates a keyboard-driven music game by the end of the chapter.
This allows multiple players to play the game together in real time. A draw-and-guess game is created at the end of the chapter. It discusses how to create physics bodies, apply force, connect them together, associate graphics with the physics, and finally create a platform car game. It discusses wrapping the web into a native app for Apple's App Store. Appendix, Pop Quiz Answers, gives the answers to the pop quiz questions in each of the chapters.
It defines how content is structured in the Web and the linkage between related pages.
There are modern web browsers in most desktop and mobile devices. These latest web techniques bring us the new game marketthe HTML5 games. In this chapter, we will cover the following topics:. Before getting our hands dirty by creating the games, let's take an overview of the new features and see how we can use them to create games.
It is one of our main focus areas in this book. Audio Background music and sound eects are essential elements in game design. HTML5 comes with native audio support from the audio tag. However, there have been some restrictions on using Web Audio on the Web. Touch Events Besides the traditional keyboard and mouse events, there are touch events that we can use to handle single and multi-touch events. We can design a game that works on mobile devices with touches. We can also handle gestures by observing the touch patterns.
GeoLocation GeoLocation lets the web page retrieve the latitude and longitude of the user's computer. For example, Google's Ingress game makes use of GeoLocation to let players play the game in their real city.
This feature may not have been so useful years ago when everyone was using the Internet with their desktop. There are not many things for which we need the accurate location of the road of the user. We can get the rough location by analyzing the IP address. These days, more and more users are going on the Internet with their powerful smartphones. Webkit and other modern mobile browsers are in everyone's pocket. GeoLocation lets us design mobile applications and games to play with the inputs of a location.
The techniques used to create games with WebGL are quite dierent than using Canvas. Therefore, we will not discuss WebGL game development in this book. It provides us with a persistent connection between the browser and server. This means that the client does not need to poll the server for new data within short periods.
The server will push updates to the browsers whenever there is any data to update. One benefit of this feature is that game players can interact with each other in almost real time. When one player does something and sends data to the server, we can send the individual player the update to create one-on-one real-time page play, or we can iterate all the connections in the server to send an event to every other connected browser to acknowledge what the player just did.
This creates the possibility of building multiplayer HTML5 games. Local storage HTML5 provides a persistent data storage solution to web browsers. Local Storage stores key-value pair data persistently. The data is still there after the browser terminates. Moreover, the data is not limited to be accessible only to the browsers that created it. It is available to all browser instances with the same domain.
Thanks to Local Storage, we can easily save a game's status, such as progress and earned achievements, locally in web browsers.
Another database on web browser is IndexedDB. It's key-value pair too, but it allows storing objects and querying data with condition.
Offline applications Normally, we need an Internet connection to browse web pages. Sometimes, we can browse cached oine web pages. These cached oine web pages usually expire quickly. With the next oine application introduced by HTML5, we can declare our cache manifest. This is a list of files that will be stored for later access when there is no Internet connection. We can also pack our HTML5 games as oine games on the desktop or mobile devices. Players can play the games even in the airplane mode.
CSS3 transition renders in-between styles during the style changes of the target elements over duration. For example, here, we have a blue box and want to change it to dark blue when we do a mouseover. We can do this by using the following code snippets: The box changes to dark blue immediately when we do a mouseover.
Since some CSS3 specifications are still in the draft stage and not yet fixed, implementation from dierent browser vendors may have some minor dierences to the W3C spec. Therefore, browser vendors tend to implement their CSS3 properties with a vendor prefix to prevent conflict.
Safari uses the -webkit- prefix. Opera uses the -o- prefix. Firefox uses the -moz- prefix and IE uses the -ms- prefix. Chrome used to use -webkit-, but now it doesn't use any prefix after switching its engine to Blink.
It is a little complex now to declare a CSS3 property, such as flex, with several lines of the same rule for several browsers.
The prefix-free library http: Alternatively, if you are using preprocessors, the compilation process may also add the necessary vendor prefix for you. CSS3 transform is divided into 2D and 3D. By combining the transform origin and 3D rotation and translation, we can animate 2D graphics in a 3D space. It declares the tweening animation between two styles of the elements. CSS3 animation is one step further in animation. We can define key frames of an animation.
Each key frame contains a set of properties that should change at any particular moment. It is like a set of CSS3 transitions that are applied in sequence to the target element.
This is shown in the following diagram:. With these features, we can create HTML5 games on browsers. But why do we need to do that? What is the benefit of creating HTML5 games?
Free and open standards The web standards are open and free for use. In contrast, third-party tools are usually proprietary and they cost money. With proprietary technologies, the support from them may drop because of changes to the company's focus. The standardization and openness of HTML5 ensures that we will have browsers that support it. Support for multiple platforms With the built-in support of all the HTML5 features in modern browsers, we do not require the users to preinstall any third-party plugin in order to play any file.
These plugins are not standard. They usually require an extra plugin installation that you may not be able to install. For instance, millions of Apple iOS devices around the world do not support third-party plugins, such as Flash Player, in their mobile Safari.
Despite whatever the reason might be, Apple does not allow Flash Player to run on their Mobile Safaris, instead, HTML5 and the related web standard are what they get in their browsers. We can reach this user base by creating HTML5 games that are optimized for mobiles. Native app-rendering performance in particular scenarios When we code the game in a Canvas, there are some rendering engines that can translate our Canvas drawing code into OpenGL, thus rendering in native mobile device.
This means that while we are still coding the game for a web browser, our game can gain benefits in mobile devices by the native app OpenGL rendering. Ejecta http: Breaking the boundary of usual browser games In traditional game designing, we build games within a boundary box. We play video games on a television. We play Flash games in web browsers with a rectangle boundary.
Using creativity, we are not bound in a rectangle game stage any more. We can have fun with all the page elements.
Twitch http: It is a collection of mini games where the player has to carry the ball from the starting point to the end point. The fun part is that each mini game is a small browser window.
When the ball reaches the destination point of that mini game, it is transferred into the newly created mini game browser to continue the journey. The following screenshot shows the whole map of Twitch with the individual web browsers:. We can control every element in the DOM.
We can animate each document object with CSS3. Packt Hub Technology news, analysis, and tutorials from Packt. Insights Tutorials. News Become a contributor. Categories Web development Programming Data Security.
Subscription Go to Subscription. Subtotal 0. Title added to cart. Subscription About Subscription Pricing Login. Features Free Trial. Search for eBooks and Videos. Beginner's Guide - Second Edition. Make the most of HTML5 techniques to create exciting games from scratch. Are you sure you want to claim this product using a token? Makzan June Quick links: What do I get with a Packt subscription?
What do I get with an eBook?
Chapter 3: Time for action — adding game logic to the matching game. Time for action — embedding a font from the Google Fonts directory. Chapter 4: Time for action — putting the circle drawing code into a function. Time for action — drawing straight lines between each circle.
Using mouse events to interact with objects drawn in the Canvas. Time for action — distinguishing the intersected lines. Chapter 5: Building a Canvas Game's Masterclass. Time for action — making the Untangle puzzle game in Canvas. Time for action — displaying the progress level text inside the canvas element. Time for action — embedding a Google web font into the canvas element.
Time for action — adding CSS styles and image decoration to the game. Chapter 6: Adding Sound Effects to Your Games. Time for action — adding sound effects to the Play button. Time for action — creating a basic background for the music game.
Time for action — creating the playback visualization in the music game. Time for action — adding functionalities to record the music level data. Time for action — indicating a game over event in the console. Chapter 7: Saving the Game's Progress. Time for action — creating a game over dialog with the elapsed played time. Notifying players when they break a new record with a nice ribbon effect. Time for action — saving all essential game data in the local storage. Time for action — resuming a game from the local storage.
Chapter 8: Time for action — showing the connection count in a WebSocket application. Time for action — sending a message to the server through WebSockets. Sending every received message on the server side to create a chat room. Time for action — sending messages to all connected browsers. Making a shared drawing whiteboard with Canvas and WebSockets. Time for action — making a local drawing whiteboard with the Canvas. Time for action — sending the drawing through WebSockets.
Chapter 9: Time for action — installing the Box2D physics library. Time for action — drawing the physics world into the Canvas. Time for action — connecting the box and two circles with a revolute joint.
Time for action — checking a collision between the car and the destination body. Time for action — restarting the game while pressing the R key. Time for action — adding a flag graphic and a car graphic to the game.