book

HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL, 2nd Edition

Name: HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL, 2nd Edition
Author: Jacob Seidelin
ISBN: 9781118855386

by Jacob Seidelin

March 2014

Beginner to intermediate

456 pages

8h 44m

English

Wiley

Read now

Unlock full access

Introduction
Who this book is forWhat this book is about
Part I: Getting Started with HTML5 Games
Chapter 1: Gaming on the Web
Tracing the History of HTML5Using HTML5 for GamesCanvasAudioWebSocketsWeb StorageWebGLHTML5 and FlashCreating Backward CompatibilityUsing feature detectionFilling the gaps with polyfillsBuilding a GameSummary
Chapter 2: Taking the First Steps
Understanding the GameSwapping jewelsMatching threeLevel progressionIdentifying Game StagesSplash screenMain menuPlaying the gameHigh scoreCreating the Application SkeletonSetting up the HTMLAdding a bit of styleLoading the scriptsCreating a DOM helper moduleCreating the Splash ScreenWorking with web fontsStyling the splash screenSummary
Chapter 3: Going Mobile
Developing Mobile Web ApplicationsWrite once, read manyThe challenges of mobile platformsHandling User Input on Mobile DevicesKeyboard inputMouse versus touchAdapting to Small Screen ResolutionsCreating scalable layoutsControlling the viewportDisabling user scalingCreating Different ViewsCreating the main menuAdding screen modulesUsing CSS media queriesDetecting device orientationAdding a landscape style sheetDeveloping for iOS and Android DevicesPlacing web applications on the home screenGetting the browser out of the wayDebugging Mobile Web ApplicationsEnabling the Safari debuggerDebugging on AndroidBuilding Native Web ApplicationsPhoneGapFuture Mobile PlatformsSummary
Part II: Creating the Basic Game
Chapter 4: Building the Game
Creating the Game Board ModuleInitializing the game stateFilling the initial boardImplementing the RulesValidating swapsDetecting chainsRefilling the gridSwapping jewelsSummary
Chapter 5: Delegating Tasks to Web Workers
Working with Web WorkersLimitations in workersWhat workers can doUsing WorkersSending messagesReceiving messagesCatching errorsShared workersA prime exampleUsing Web Workers in GamesCreating the worker moduleKeeping the same interfaceSummary
Chapter 6: Creating Graphics with Canvas
Ways to Display Graphics on the WebBitmap imagesSVG graphicsThe canvas elementWhen to choose canvasDrawing with canvasDrawing shapes and pathsUsing advanced strokes and fill stylesUsing transformationsAdding text, images, and shadowsManaging the state stackDrawing the HTML5 logoCompositingAccessing Image DataRetrieving pixel valuesUpdating pixel valuesExporting image file dataUnderstanding security restrictionsCreating pixel-based effectsSummary
Chapter 7: Creating the Game Display
Tracking Load ProgressAdding a progress barBuilding the Game ScreenDrawing the board with canvasExiting the gamePausing the gameSummary

Chapter 8: Interacting with the Game
Capturing User InputMouse events on touch devicesThe virtual keyboardTouch eventsInput events and canvasUsing gamepads and controllersBuilding the Input ModuleHandling input eventsImplementing game actionsBinding inputs to game functionsSummary
Chapter 9: Animating Game Graphics
Making the Game ReactAnimation timingAnimating the cursorAnimating game actionsAdding Points and TimeCreating the UI elementsCreating the game timerPausing the gameAwarding pointsGame overSummary
Part III: Adding 3D and Sound
Chapter 10: Creating Audio for Games
HTML5 AudioDetecting audio supportUnderstanding the audio format warsFinding sound effectsUsing the audio ElementControlling playbackUsing audio on mobile devicesWorking with Audio DataUsing the Web Audio APIBuilding the Audio ModulePreparing for audio playbackPlaying sound effectsStopping soundsCleaning upAdding Sound Effects to the GamePlaying audio from the game screenSummary
Chapter 11: Creating 3D Graphics with WebGL
3D for the WebWhere you can use WebGLGetting started with WebGLDebugging WebGLCreating a helper moduleUsing ShadersVariables and data typesUsing shaders with WebGLUniform variablesVarying variablesRendering 3D ObjectsUsing vertex buffersUsing index buffersUsing models, views, and projectionsRenderingLoading Collada modelsUsing Textures and LightingAdding lightAdding per-pixel lightingCreating texturesCreating the WebGL displayLoading the WebGL filesCreating the jewel objectsSetting up WebGLRendering jewelsAnimating the jewelsUsing Third-Party WebGL EnginesSummary
Part IV: Local Storage and Multiplayer Games
Chapter 12: Local Storage and Caching
Storing Data with Web StorageUsing the storage interfaceBuilding a storage moduleMaking the Game State PersistentSaving the game dataCreating a High Score ListBuilding the high score screenStoring the high score dataDisplaying the high score dataApplication CacheThe cache manifestSummary
Chapter 13: Going Online with WebSockets
Using WebSocketsConnecting to serversCommunicating with WebSocketsUsing Node on the ServerInstalling NodeCreating an HTTP server with NodeCreating a WebSocket chat roomSummary

Overview

HTML5 Games shows you how to combine HTML5, CSS3 and JavaScript to make games for the web and mobiles - games that were previously only possible with plugin technologies like Flash. Using the latest open web technologies, you are guided through the process of creating a game from scratch using Canvas, HTML5 Audio, WebGL and WebSockets.

Inside, Jacob Seidelin shows you how features available in HTML5 can be used to create games. First, you will build a framework on which you will create your HTML5 game. Then each chapter covers a new aspect of the game including user input, sound, multiplayer functionality, 2D and 3D graphics and more. By the end of the book, you will have created a fully functional game that can be played in any compatible browser, or on any mobile device that supports HTML5.

Topics include:

Dealing with backwards compatibility

Generating level data

Making iOS and Android web apps

Taking your game offline

Using Web Workers

Persistent Game Data

Drawing with Canvas

Capturing player input

Creating 3D graphics with WebGL

Textures and lighting

Sound with HTML5 Audio

And more...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript

Publisher Resources

ISBN: 9781118855454Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills