"HTML5 Hidden Object Games" explains how to turn images into simple games. Make responsive background graphics with JavaScript, HTML5, and CSS. Players swipe to pan a background image. Selected areas within the image respond to tap events. For example, ask the player to find an animal within a landscape. The player swipes to view the environment, and taps to select the animal.
Responsive background graphics offer opportunities to display educational presentations, and data visualization, as well as games. For example, background images might include planets, forests, molecules, photographic panoramas, creepy dungeons, interactive charts, DNA, graphs, or game scenery. The source code provided is simple enough to apply to a range of presentations.
"HTML5 Hidden Object Games" demonstrates how to locate objects in a graphic. We focus on HTML5 development with JavaScript. However, we also explain how to layout images for best performance. We don't discuss graphic design. We demonstrate the organization of graphical elements.
The final project describes how to make a simple game. The game asks the player to find specific items, then keeps score based on the number of correct selections. We don't cover game engines. However, readers can modify source code, background graphics and textual output, to display information about almost any topic. The goal is to provide a versatile simple technique, useful for a range of projects. This short book offers an easy solution for online presentations.
We assume the reader understands basic HTML markup and JavaScript. The book includes the full source code. The source code with graphics are available for download, as well.
Background graphics provide a sense of location and atmosphere. Images often improve the ability to remember details. Interactive features engage our curiosity.
We use the terms "panorama" and "background graphics" to describe images representing scenery. "Panorama" refers to a wide angle view of a scene or environment."Background graphics" often apply to games or animation. For example a background graphic might provide the scene and location for a game, with game characters placed over the background. This short book provides a method to implement interactive panoramic or background graphics on the Web, for mobile devices and full computers.We don't discuss foreground characters or sprites.
HTML5 interactive backgrounds provide the opportunity to post almost any imaginable environment, online. A wide range of computers and mobile devices now support HTML5. Androids, iPhones, iPads, BlackBerry devices, Windows Phones, Windows PCs, and Macintosh computers, with HTML5 enabled Web browsers can display interactive graphics.
Supported Devices:
The book's example projects were tested with default browsers on the following list of devices.
* iPhone 6
* Windows PC with Windows Vista and Windows 8.1 operating systems
* Android Phones
* Windows Phone with Windows 8.1
Responsive background graphics offer opportunities to display educational presentations, and data visualization, as well as games. For example, background images might include planets, forests, molecules, photographic panoramas, creepy dungeons, interactive charts, DNA, graphs, or game scenery. The source code provided is simple enough to apply to a range of presentations.
"HTML5 Hidden Object Games" demonstrates how to locate objects in a graphic. We focus on HTML5 development with JavaScript. However, we also explain how to layout images for best performance. We don't discuss graphic design. We demonstrate the organization of graphical elements.
The final project describes how to make a simple game. The game asks the player to find specific items, then keeps score based on the number of correct selections. We don't cover game engines. However, readers can modify source code, background graphics and textual output, to display information about almost any topic. The goal is to provide a versatile simple technique, useful for a range of projects. This short book offers an easy solution for online presentations.
We assume the reader understands basic HTML markup and JavaScript. The book includes the full source code. The source code with graphics are available for download, as well.
Background graphics provide a sense of location and atmosphere. Images often improve the ability to remember details. Interactive features engage our curiosity.
We use the terms "panorama" and "background graphics" to describe images representing scenery. "Panorama" refers to a wide angle view of a scene or environment."Background graphics" often apply to games or animation. For example a background graphic might provide the scene and location for a game, with game characters placed over the background. This short book provides a method to implement interactive panoramic or background graphics on the Web, for mobile devices and full computers.We don't discuss foreground characters or sprites.
HTML5 interactive backgrounds provide the opportunity to post almost any imaginable environment, online. A wide range of computers and mobile devices now support HTML5. Androids, iPhones, iPads, BlackBerry devices, Windows Phones, Windows PCs, and Macintosh computers, with HTML5 enabled Web browsers can display interactive graphics.
Supported Devices:
The book's example projects were tested with default browsers on the following list of devices.
* iPhone 6
* Windows PC with Windows Vista and Windows 8.1 operating systems
* Android Phones
* Windows Phone with Windows 8.1
