WebGL Games E-Book Screen Shots

WebGL Globe Game: Twenty Questions

Swipe to Spin the Globe

Example for the E-Book 3D Games with WebGL: Create Two Simple Games


Tap the Play button to begin. Find and select specific countries on the globe. The country to find, spin, zoom in and out buttons appear below the globe. Tap the Spin button to rotate the globe at any time. Tap once to stop rotation. Tap a second time to select a country. Tap a third time to see the next question.

Zoom In Zoom Out Resume Spinning

Find and Select Countries on the Globe

How to Play the Globe Game

Answer 20 questions correctly for a score of 100 points. Each correct answer equals five points. Countries display on the globe with colors rather than names. Questions ask players to select countries by name. Find each country based on the shape of it's border and location on the globe.

Swipe to spin the globe. Tap the globe three times for each question.

  1. Tap once to stop the globe from spinning.
  2. Tap a second time to select a country.
  3. Tap a third time to see the next question.
  4. Tap the spin button at any time to spin the globe or start the selection process over again.

See the Cheat Sheet globe map for country boundaries with names. The Spin, Zoom In, and Zoom Out icons display below the globe. The current question also displays below the globe. The question number with the name of the country players currently seek, appears between the globe and the Spin button.

Tap the Zoom In or Zoom Out buttons for better viewing and precise selection. Center very small countries in the viewport, tap to stop spinning, then zoom in. The Spin button allows players to begin the country selection process again.

Alternate Between Stop and Spin

Select the Spin button below the globe at any time. The Spin button allows the globe to rotate when you swipe. Toggle between stop and spin modes. Tap the globe the first time to stop spinning. Tap the Spin button to start rotating the globe again. Spin restarts selection of a country. If you're not happy with the current rotation of the globe then Spin again.

Windows Phone Selection

Windows Phone responds to touch up events as if the player tapped. For those playing with Windows Phone, swipe then lift your finger to stop the globe from spinning. The game then waits for the selection of a country. The ping sound and text lets players know they triggered the selection process.

Globe Game E-Book

The WebGL 3D Globe Game's part of the e-book 3D Games with WebGL: Create Two Simple Games. The book explains how to make the Globe Game.

3D Games with WebGL: Create Two Simple Games

The e-book 3D Games with WebGL: Create Two Simple Games is coming soon! Book five in the series Online 3D Media with WebGL includes two games. Extend concepts and code to create your own interactive and unique 3D games.

3D Games with WebGL explains how to render multiple game sprites, use transparency, select by color, highlight selections, use sound, time the game, shuffle, zoom in and zoom out.

Devices such as mobile phones benefit from optimization techniques explained with the e-book. 3D Games with WebGL demonstrates an efficient method to display multiple mesh elements with one vertex buffer object (VBO) and one texture map. There's no need to switch textures or attributes during game play.

Globe Game

The first game, Globe Game, shows a globe mapped with countries of the world. However nations on the globe don't display country names. Globe Game asks players to find specific countries. Spin the globe. Find and tap on countries. Zoom in and out for details. Globe Game displays a running score and percentage during game play.

Numbers Game

The second game, Numbers Game, animates a set of digits and mathematical symbols over water. The Numbers Game presents a series of challenges one at a time. The Numbers Game asks you to form an expression which results in a specific number. Select digits and symbols to create the expression. As soon as you form an expression the next challenge displays. Try to form each expression correctly before the timer runs out.

Globe Image Map

The globe texture map was modified from File:Gdp per capita ppp world map.PNG available on commons.wikimedia.org with the GNU Free Documentation License. Seven Thunder Software simplified and modified the image to use with the Globe Game.

Permission is granted to copy, distribute and or modify the globe texture map under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled GNU Free Documentation License.

Globe with Names of Countries

Globe with Country Names
3D Graphics Run with WebGL! Read the E-Book

WebGL Scenes: Responsive Web Design

Copyright © 2015 Seven Thunder Software. All Rights Reserved.