Book Image

Learn HTML5 by Creating Fun Games

By : Rodrigo Silveira
Book Image

Learn HTML5 by Creating Fun Games

By: Rodrigo Silveira

Overview of this book

HTML is fast, secure, responsive, interactive, and stunningly beautiful. It lets you target the largest number of devices and browsers with the least amount of effort. Working with the latest technologies is always fun and with a rapidly growing mobile market, it is a new and exciting place to be."Learn HTML5 by Creating Fun Games" takes you through the journey of learning HTML5 right from setting up the environment to creating fully-functional games. It will help you explore the basics while you work through the whole book with the completion of each game."Learn HTML5 by Creating Fun Games" takes a very friendly approach to teaching fun, silly games for the purpose of giving you a thorough grounding in HTML5. The book has only as much theory as it has to, often in tip boxes, with most of the information explaining how to create HTML5 canvas games. You will be assisted with lots of simple steps with screenshots building towards silly but addictive games.The book introduces you to HTML5 by helping you understand the setup and the underlying environment. As you start building your first game that is a typography game, you understand the significance of elements used in game development such as input types, web forms, and so on.We will see how to write a modern browser-compatible code while creating a basic Jelly Wobbling Game. Each game introduces you to an advanced topic such as vector graphics, native audio manipulation, and dragging-and-dropping. In the later section of the book, you will see yourself developing the famous snake game using requestAnimationFrame along with the canvas API, and enhancing it further with web messaging, web storage, and local storage. The last game of this book, a 2D Space shooter game, will then help you understand mobile design considerations.
Table of Contents (14 chapters)

Index

A

  • <address> tag / More semantic document structure
  • <article> tag / More semantic document structure
  • <aside> tag / More semantic document structure
  • <audio> tag / More semantic document structure
  • abort event / Events
  • Adobe Flash
    • about / Animations
  • advanced HTML5 APIs
    • about / Advanced HTML5 APIs
    • WebGL / WebGL
    • web sockets / Web sockets
    • videos / Video
    • Geolocation / Geolocation
  • all keyword / Understanding media queries
  • AND operator / Understanding media queries
  • animations, CSS
    • using / Animations
  • animations API, Typography game
    • about / Animations
  • API usage, Basic Jelly Wobbling Gravity Game
    • about / API usage
    • web audio / Web audio
    • SVG / Scalable Vector Graphics (SVG)
    • drag-and-drop / Drag-and-drop
  • API usage, snake game
    • about / API usage, API usage
    • requestAnimationFrame / API usage
    • requestAnimationFrame, using / How to use it
    • web messaging / Web messaging
    • web storage / Web storage
    • local storage / Local storage
    • session storage / Session storage
  • API usage, Typography game
    • about / API usage
    • web forms / Web forms
    • data attributes / Data attributes
    • query selectors / Query selectors
    • web fonts / Web fonts
    • transitions / Transitions
    • animations API / Animations
    • text shadow interface / The text shadow
    • box shadow interface / The box shadow
    • border radius property / The border radius
  • ArrayBuffer / ArrayBuffer and ArrayBufferView
  • ArrayBufferView / ArrayBuffer and ArrayBufferView
  • aspect ratio attribute / aspect-ratio
  • aspect ratio property / aspect-ratio
  • attributes, media queries
    • width / width
    • height / height
    • device-width / device-width
    • device-height / device-height
    • orientation / orientation
    • aspect-ratio / aspect-ratio
    • device-aspect-ratio / device-aspect-ratio
    • color / color
    • color-index / color-index
    • monochrome / monochrome
    • resolution / resolution
    • scan / scan
    • grid / grid
  • attributes, videos / Attributes
  • audio objects, web audio API
    • play() / How to use it
    • pause() / How to use it
    • paused / How to use it
    • canPlayType / How to use it
    • currentSrc / How to use it
    • currentTime / How to use it
    • duration / How to use it
    • ended / How to use it
    • readyState / How to use it
    • volume / How to use it
  • automatic form validation, browser
    • about / Automatic form validation

B

  • <bdi> tag / More semantic document structure
  • <bdo> tag / More semantic document structure
  • Basic Jelly Wobbling Gravity Game
    • browser compatibility / Browser compatibility
    • about / The game
    • code structure / Code structure
  • border radius, CSS
    • about / The border radius
  • border radius property
    • about / The border radius
  • border radius property, Typography game
    • about / The border radius
  • box shadow effect, CSS
    • about / The box shadows
  • box shadow interface, Typography game
    • about / The box shadow
  • browser compatibility, Basic Jelly Wobbling Gravity Game
    • about / Browser compatibility
    • different browsers, supporting / Supporting different browsers
    • HTML5 libraries / HTML5 libraries and frameworks
    • HTML5 frameworks / HTML5 libraries and frameworks
    • browsers, supporting with limited HTML5 / Supporting browsers with limited HTML5 features
  • browser features, HTML5
    • automatic form validation / Automatic form validation
    • new input types / New input types
    • telephone-friendly hyperlinks / Telephone-friendly hyperlinks
    • CSS-based DOM selectors / CSS-based DOM selectors
    • text-to-speech / Text-to-speech
  • browsers, supporting with limited HTML5
    • about / Supporting browsers with limited HTML5 features
    • graceful degradation / Gracefully degrade
    • polyfill, using / Gracefully degrade
    • polyfill / Polyfills
    • Modernizr / Modernizr

C

  • <canvas> tag / More semantic document structure
  • <command> tag / More semantic document structure
  • canplay event / Events
  • canplaythrough event / Events
  • canvas, snake game
    • about / Canvas
    • using / How to use it
    • clearRect function / clearRect
    • fill and stroke / Fill and stroke
    • lines, drawing / Lines
    • shapes, drawing / Shapes
    • text, drawing / Text
    • transformations / Transformations
    • images, drawing / Drawing images
    • pixels, manipulating / Manipulating pixels
  • Canvas API
    • about / New JavaScript APIs
  • canvas graphic
    • and SVG graphic, differentiating / Canvas
  • CanvasRenderingContext2D / How to use it
  • Cascading Style Sheets (CSS) / HTML5 is not a single feature, How to use it
  • changedTouches instance / changedTouches
  • clear() / Web storage
  • clearEvent() / Taking screenshots of the game
  • clearRect function / clearRect
  • clientX coordinate, touch object / clientX
  • clientY coordinate, touch object / clientY
  • code structure, Basic Jelly Wobbling Gravity Game / Code structure
  • code structure, two-dimensional space shooter game
    • about / Code structure
    • /css stylesheet / /css
    • /img / /img
    • /js / /js
    • /components / /components
    • /entities / /entities
    • /widgets / /widgets
    • Canvas.js file / Canvas.js
    • EnemyManager.js file / EnemyManager.js
    • GameLoop.js file / GameLoop.js
    • PhysicsManager.js file / PhysicsManager.js
    • Vec2.js file / Vec2.js
    • main.js file / main.js
    • index.html file / index.html
  • color-index attribute / color-index
  • color attribute / color
  • color input type, web forms
    • about / Color
    • attributes / Color
  • colors module, CSS3
    • about / Colors
  • column-break-inside property / Column breaks
  • column breaks / Column breaks
  • column rule / The column rule
  • contentWindow property / How to use it
  • context object / clearRect
  • CSS-based DOM selectors, browser
    • about / CSS-based DOM selectors
  • CSS3
    • about / Animations
  • CSS 3
    • about / CSS3
    • separation of concerns / Separation of concerns
    • visual design reusability / Reusability of visual design
    • maintenance / Ease of maintenance
    • scalability / Scalability
    • CSS evolution / The evolution of CSS
    • vendor prefixes / Experimental features and vendor prefixes
    • CSS preprocessors / CSS preprocessors
    • modules / CSS3 modules
  • CSS 3 modules
    • style attributes / CSS3 modules, Style attributes
    • about / CSS3 modules
    • selectors / CSS3 modules, Selectors
    • colors / CSS3 modules, Colors
    • media queries / CSS3 modules, Media queries
  • CSS animation generator
    • URL / Animations
  • CSS columns
    • about / CSS columns
    • column rule / The column rule
    • column breaks / Column breaks
    • regions / CSS regions and exclusions, Regions
    • exclusions / CSS regions and exclusions, Exclusions
    • shapes, defining / Defining shapes
  • CSS elements, Typography game
    • about / CSS
    • web fonts / Web fonts
    • transitions / Transitions
    • animations / Animations
    • text shadows / The text shadows
    • box shadows / The box shadows
    • border radius / The border radius
  • CSS exclusions / Exclusions
  • CSS features
    • about / Upcoming CSS features
    • CSS shaders / CSS shaders
    • CSS columns / CSS columns
  • CSS filters
    • about / CSS shaders
    • blur / CSS shaders
    • brightness / CSS shaders
    • contrast / CSS shaders
    • drop-shadow / CSS shaders
    • grayscale / CSS shaders
    • hue-rotate / CSS shaders
    • invert / CSS shaders
    • opacity / CSS shaders
    • saturate / CSS shaders
    • sepia / CSS shaders
  • CSS media query API / Screen size and orientation
  • CSS media types
    • braille / Understanding media queries
    • handheld / Understanding media queries
    • print / Understanding media queries
    • projection / Understanding media queries
    • screen / Understanding media queries
    • tty / Understanding media queries
    • tv / Understanding media queries
    • embossed / Understanding media queries
    • speech / Understanding media queries
  • CSS preprocessors
    • about / CSS preprocessors
    • LESS / CSS preprocessors
    • SASS / CSS preprocessors
  • CSS regions / CSS regions and exclusions, Regions
  • CSS shaders
    • about / Upcoming CSS features, CSS shaders
    • custom filters, using / Using custom filters
  • CSS transition
    • about / Transitions
  • cursor.primaryKey property / Deleting elements
  • custom CSS filters
    • about / CSS shaders
  • custom filters
    • using / Using custom filters

D

  • <details> tag / More semantic document structure
  • data attributes, Typography game
    • about / Data attributes
    • using, in game / Used in the game
  • date input type, web forms
    • about / Date
    • attributes / Date
  • datetime-local input type, web forms
    • about / Datetime-local
    • attributes / Datetime-local
  • datetime input type, web forms
    • about / Datetime
    • attributes / Datetime
  • desktop machine
    • versus mobile device / Desktop versus mobile
  • device-aspect-ratio attribute / device-aspect-ratio
  • device-height attribute / device-height
  • device-width attribute / device-width
  • Document Object Model (DOM) element / How to use it
  • drag-and-drop, Basic Jelly Wobbling Gravity Game
    • about / Drag-and-drop, Drag-and-drop
    • creating / Drag-and-drop
    • using / How to use it
  • Drag and Drop API
    • about / New JavaScript APIs
  • drawScene function / Hello, World!
  • durationchange event / Events

E

  • elements, snake game
    • getting / Getting elements
    • deleting / Deleting elements
  • email input type, web forms
    • about / Email
    • attributes / Email
  • emptied event / Events
  • ended event / Events
  • EnemyManager class
    • about / EnemyManager.js, PhysicsManager.js
  • EnergyBar widget
    • about / /widgets
  • entities
    • about / /entities
  • error event / Events
  • event.data / How to use it
  • event.lastEventId / How to use it
  • event.origin / How to use it
  • event.portsReturns / How to use it
  • event.preventDefault() method
    • about / touchmove
  • event.sourceReturns / How to use it
  • event.target.result property / Getting elements
  • events, videos
    • loadstart / Events
    • progress / Events
    • suspend / Events
    • abort / Events
    • error / Events
    • emptied / Events
    • stalled / Events
    • loadedmetadata / Events
    • loadeddata / Events
    • canplay / Events
    • canplaythrough / Events
    • playing / Events
    • waiting / Events
    • seeking / Events
    • seeked / Events
    • ended / Events
    • durationchange / Events
    • timeupdate / Events
    • play / Events
    • pause / Events
    • ratechange / Events
    • volumechange / Events
  • exclusions
    • about / The border radius

F

  • <figure> tag / More semantic document structure
  • <footer> tag / More semantic document structure
  • factory method / How to use it
  • fillRect() / Taking screenshots of the game
  • fillText function / Text
  • Float32Array, view type / Typed array view types
  • Float64Array, view type / Typed array view types
  • force attribute, touch object / force
  • form validation
    • about / Form validation
    • validity state object / Validity state object
    • custom validation / Custom validation
  • frames per second (fps) / How to use it
  • fruit class / The code

G

  • Geolocation
    • about / Geolocation
    • Google maps example / A Google Maps example
  • Geolocation API
    • about / New JavaScript APIs
  • Geoposition object
    • about / Geolocation
    • properties / Geolocation
  • getItem(key) / Web storage
  • GL-Matrix
    • about / Hello, World!
  • GLSL (OpenGL Shading Language) / Hello, World!
  • Google Chrome
    • about / Advanced HTML5 APIs
  • Google Chrome Canary / Programming in the bleeding edge
  • Google maps / A Google Maps example
  • grid attribute / grid
  • GWT
    • about / Google Web Toolkit
    • URL / Google Web Toolkit

H

  • <header> tag / More semantic document structure
  • <hgroup> tag / More semantic document structure
  • height attributes / height
  • HTML
    • about / What is HTML?
    • history / A brief history of HTML
  • HTML5
    • about / What is HTML5?, HTML5 – the next step in the evolution, HTML5 – a game changer
    • semantic document structure / More semantic document structure
    • browser features / Native features of the browser
    • wide adoption / HTML5 – a game changer
    • powerful capabilities / HTML5 – a game changer
    • no plug-ins / HTML5 – a game changer
    • game development / Learning HTML5 through game development
  • HTML5 web forms API
    • about / Web forms
    • new input types / New input types
    • form validation / Form validation
    • using, in game / Used in the game
  • HTML elements, Typography game
    • about / HTML
    • web form / The web form
    • range input, web form / Range input
    • email input, web form / Email input
    • data attributes / Data attributes

I

  • IDBFactory
    • about / IDBFactory
  • IDBOpenDBRequest
    • about / IDBOpenDBRequest
  • IDBTransaction
    • about / IDBTransaction
    • readwrite transaction mode / readwrite
    • readonly transaction mode / readonly
    • versionchange transaction mode / versionchange
  • identifier, touch object / identifier
  • iframe / Web messaging
  • images
    • drawing / Drawing images
  • implementation considerations, mobile game
    • about / Major implementation considerations
    • screen size and orientation / Screen size and orientation
    • computing power / Computing power
    • battery life / Battery life
    • browser differences / Browser differences
    • best practices / Best practices
    • graceful degradation / Degrade gracefully and enhance progressively
    • progressive enhancement / Degrade gracefully and enhance progressively
    • finger-friendly design / Finger-friendly design
    • battery life, saving / Save battery life
    • planning, for offline / Plan for offline
    • desktop version, offering / Offering a desktop version
  • Indexed Database API
    • about / New JavaScript APIs
  • IndexedDB, snake game
    • about / IndexedDB
    • IDBFactory / IDBFactory
    • IDBOpenDBRequest / IDBOpenDBRequest
    • IDBTransaction / IDBTransaction
    • elements, getting / Getting elements
    • elements, deleting / Deleting elements
  • indexedDB.open method / IDBFactory
  • Int8Array, view type / Typed array view types
  • Int16Array, view type / Typed array view types
  • Int32Array, view type / Typed array view types
  • integer argument / How to use it
  • isFinished() function / JavaScript and logic

J

  • JavaScript
    • about / JavaScript
    • query selectors / Query selectors
  • JavaScript APIs
    • about / JavaScript APIs
    • Canvas API / New JavaScript APIs
    • Web Audio API / New JavaScript APIs
    • Web Video API / New JavaScript APIs
    • Geolocation API / New JavaScript APIs
    • Web Socket API / New JavaScript APIs
    • Web Workers API / New JavaScript APIs
    • Messaging API / New JavaScript APIs
    • Web Storage API / New JavaScript APIs
    • Indexed Database API / New JavaScript APIs
    • Drag and Drop API / New JavaScript APIs
    • Selector API / New JavaScript APIs
  • jQuery
    • about / jQuery
    • using / jQuery
    • URL / jQuery
  • JSON.parse function / Local storage
  • JSON.stringify function / Local storage
  • JSON data format / Local storage

K

  • key(n) / Web storage
  • keyPath attribute / Deleting elements
  • keyPath object / IDBOpenDBRequest

L

  • LaserGun component / /components
  • length / Web storage
  • LESS
    • URL / CSS preprocessors
  • lineTo function / Lines
  • loadeddata event / Events
  • loadedmetadata event / Events
  • loadstart event / Events
  • local storage, snake game
    • about / Local storage

M

  • <mark> tag / More semantic document structure
  • <meter> tag / More semantic document structure
  • media queries
    • about / Understanding media queries
  • media queries, CSS3
    • about / Media queries
  • media query expressions
    • about / Understanding media queries
  • media types, CSS
    • about / Understanding media queries
    • braille / Understanding media queries
    • handheld / Understanding media queries
    • print / Understanding media queries
    • projection / Understanding media queries
    • screen / Understanding media queries
    • tty / Understanding media queries
    • tv / Understanding media queries
    • embossed / Understanding media queries
    • speech / Understanding media queries
  • MessageEvent object / How to use it
  • Messaging API
    • about / New JavaScript APIs
  • mix() function / Using custom filters
  • mobile device
    • versus desktop machine / Desktop versus mobile
  • mobile game
    • implementation considerations / Major implementation considerations
  • mobile optimizations
    • about / Mobile optimizations
    • resources, combining / Combine resources
    • touches, tracking by ID / Track touches by IDs
    • CSS animations, using / Use CSS animations with caution
    • separate canvases, using for game layer / Use separate canvases for each game layer
    • image atlases, using / Use image atlases
  • model-view-projection matrices / Hello, World!
  • Modernizr
    • about / Modernizr
    • URL / Modernizr
  • monochrome attribute / monochrome
  • month input type, web forms
    • about / Month
    • attributes / Month
  • Move component / /components
  • MVP matrix
    • about / Hello, World!

N

  • <nav> tag / More semantic document structure
  • new input types, web forms
    • about / New input types
    • date input type / Date
    • month input type / Month
    • week input type / Week
    • time input type / Time
    • datetime input type / Datetime
    • datetime-local input type / Datetime-local
    • color input type / Color
    • email input type / Email
    • number input type / Number
    • range input type / Range
    • search input type / Search
    • tel input type / Tel
    • url input type / Url
  • NOT operator / Understanding media queries
  • number input type, web forms
    • about / Number
    • attributes / Number
  • nums array / Typed arrays

O

  • Offline application cache, snake game
    • about / Offline application cache
    • using / How to use it
  • onClose event / Web sockets
  • onError event / Web sockets
  • onMessage event / Web sockets
  • onOpen event / Web sockets
  • onsuccess callback / Getting elements
  • onupgradeneeded / IDBOpenDBRequest
  • onupgradeneeded callback / Getting elements
  • OpenGL ES 2 / WebGL
  • Open Web
    • about / The Open Web
  • orientation attribute / orientation
  • OR operator / Understanding media queries

P

  • <progress> tag / More semantic document structure
  • pageX coordinate, touch object / pageX
  • pageY coordinate, touch object / pageY
  • pause event / Events
  • physics component / /components
  • PhysicsManager class
    • about / PhysicsManager.js
  • pixelData array / Taking screenshots of the game
  • pixels
    • manipulating / Manipulating pixels
  • placeholder
    • about / Native features of the browser
  • play event / Events
  • playing event / Events
  • polyfills
    • about / Polyfills
  • postMessage function / How to use it, Web sockets
  • progress event / Events

Q

  • query selectors, Typography game
    • about / Query selectors
    • using, in game / Used in the game

R

  • <rp> tag / More semantic document structure
  • <rt> tag / More semantic document structure
  • radiusX attribute, touch object / radiusX
  • radiusY attribute, touch object / radiusY
  • range input type, web forms
    • about / Range
    • attributes / Range
  • ratechange event / Events
  • readonly transaction mode / readonly
  • readwrite transaction mode / readwrite
  • rect function / Shapes
  • reflow / A warning about performance
  • regions
    • about / The border radius
  • removeChild method
    • about / Browser compatibility
  • removeItem(key) / Web storage
  • requestAnimationFrame function / API usage, How to use it, Degrade gracefully and enhance progressively
  • resolution attribute / resolution
  • responsive design / Screen size and orientation
  • rotationAngle attribute, touch object / rotationAngle
  • rotation function / Transformations

S

  • <section> tag / More semantic document structure
  • <summary> tag / More semantic document structure
  • SASS
    • URL / CSS preprocessors
  • scale function / Transformations
  • scan attribute / scan
  • screenX coordinate, touch object / screenX
  • screenY coordinate, touch object / screenY
  • search input type, web forms
    • about / Search
    • attributes / Search
  • seeked event / Events
  • seeking event / Events
  • Selector API
    • about / New JavaScript APIs
  • selectors API / JavaScript
  • selectors module, CSS 3
    • about / Selectors
  • session storage, snake game
    • about / Session storage
  • sessionStorage.key function / Session storage
  • setCustomValidity() method / Custom validation
  • setItem(key, value) / Web storage
  • SGML
    • about / A brief history of HTML
  • shader programs
    • about / WebGL
  • shouldDraw flag / How to use it
  • Snake class / The code
  • snake game
    • about / The game, The game
    • API, usage / API usage
    • Typed arrays / Typed arrays
    • canvas API / Canvas
    • web workers / Web workers
    • offline application cache / Offline application cache
    • code / The code, The code
    • toDataURL function / The game
    • API usage / API usage
    • URL / Web messaging
    • high score, saving / Saving the high score
    • screen shots, taking / Taking screenshots of the game
  • Snooty McSnootington / The game
  • source code, snake game
    • about / The code, The code
    • Snake class / The code
    • fruit class / The code
    • setup task / The code
  • source code, Typography game
    • HTML structure / The HTML structure
    • logic / JavaScript and logic
    • Player class / JavaScript and logic
    • global functions / JavaScript and logic
  • sprite component / /components
  • stalled event / Events
  • storage class / Web storage
  • Strength component / /components
  • strokeStyle property / Fill and stroke
  • style attributes module, CSS 3
    • about / Style attributes
  • suspend event / Events
  • SVG, Basic Jelly Wobbling Gravity Game
    • about / Scalable Vector Graphics (SVG), SVG
    • code snippet / SVG
    • using / How to use it

T

  • <time> tag / More semantic document structure
  • target attribute, touch object / target
  • targetTouches instance / targetTouches
  • telephone-friendly hyperlinks, browser
    • about / Telephone-friendly hyperlinks
  • tel input type, web forms
    • about / Tel
    • attributes / Tel
  • text-to-speech, browser
    • about / Text-to-speech
  • text shadow effect, CSS
    • about / The text shadows
  • text shadow interface, Typography game
    • about / The text shadow
  • time input type, web forms
    • about / Time
    • attributes / Time
  • timeupdate event / Events
  • toDataURL function / The game
  • touch
    • about / Understanding touch events
  • touchend event
    • about / touchend
  • touches instance / touches
  • TouchEvent class
    • about / touchstart
  • touch events
    • about / Understanding touch events
    • touchstart / touchstart
    • touchend / touchend
    • touchmove / touchmove
  • TouchList class / touches, changedTouches
  • TouchList object / identifier
  • touchmove event
    • about / touchmove
  • touch object
    • about / The touch object
    • identifier / identifier
    • screenX coordinate / screenX
    • screenY coordinate / screenY
    • clientX coordinate / clientX
    • clientY coordinate / clientY
    • pageX coordinate / pageX
    • pageY coordinate / pageY
    • radiusX attribute / radiusX
    • radiusY attribute / radiusY
    • rotationAngle attribute / rotationAngle
    • force attribute / force
    • target attribute / target
  • touchstart event
    • about / touchstart
    • touches instance / touches
    • changedTouches instance / changedTouches
    • targetTouches instance / targetTouches
  • transitions API, Typography game
    • adding / Transitions
  • truthy media query expression / Understanding media queries
  • two-dimensional space shooter game
    • about / The game
    • code structure / Code structure
  • Typed arrays, snake game
    • about / Typed arrays
    • uses / Typed arrays
    • using / How to use it
    • ArrayBuffer / ArrayBuffer and ArrayBufferView
    • ArrayBufferView / ArrayBuffer and ArrayBufferView
    • view types / Typed array view types
    • Int8Array, view type / Typed array view types
    • Uint8Array, view type / Typed array view types
    • Uint8ClampedArray, view type / Typed array view types
    • Int16Array, view type / Typed array view types
    • Uint16Array, view type / Typed array view types
    • Int32Array, view type / Typed array view types
    • Uint32Array, view type / Typed array view types
    • Float32Array, view type / Typed array view types
    • Float64Array, view type / Typed array view types
  • Typography game
    • about / The game
    • code / The code
  • Typography game elements
    • about / Game elements
    • options widget / The options widget
    • game title / The game title
    • boat / Boat
    • sky / Sky
    • waves / Waves
    • tracks / Tracks
    • players / Players
    • main container / The main container
    • words, displaying / Words to write
    • words, writing / Words written
    • message container / The message container
    • message title / The message title
    • new champion form / The new champion form
    • leaderboard / Leaderboard
    • game controls / Game controls
    • HTML elements / HTML
    • CSS elements / CSS
    • JavaScript elements / JavaScript

U

  • Uint8Array, view type / Typed array view types
  • Uint8ClampedArray, view type / Typed array view types
  • Uint16Array, view type / Typed array view types
  • Uint32Array, view type / Typed array view types
  • url() function / Using custom filters
  • url input type, web forms
    • about / Url
    • attributes / Url

V

  • <video> tag / More semantic document structure
  • ValidityState / Validity state object
  • ValidState / Custom validation
  • versionchange transaction mode / versionchange
  • videos
    • about / Video
    • attributes / Attributes
    • events / Events
  • volumechange event / Events

W

  • <wbr> tag / More semantic document structure
  • waiting event / Events
  • warning, performance / A warning about performance
  • Web
    • about / The Web as a platform
  • Web Audio API
    • about / New JavaScript APIs
  • web audio API, Basic Jelly Wobbling Gravity Game
    • about / Web audio, Web audio, How to use it
    • using / How to use it
    • attributes / How to use it
    • autoplay attribute / How to use it
    • controls attribute / How to use it
    • loop attribute / How to use it
    • muted attribute / How to use it
    • preload attribute / How to use it
    • audio objects / How to use it
  • web fonts, Typography game
    • about / Web fonts
    • custom fonts, using / Web fonts
  • WebGL / Typed arrays, How to use it
    • about / WebGL
  • WebGL application
    • about / Hello, World!
  • WebGLRenderingContext / How to use it
  • web messaging, snake game
    • about / Web messaging
    • using / How to use it
  • Web Socket API
    • about / New JavaScript APIs
  • web sockets
    • about / Web sockets
    • connection / The connection
    • server side code / The server-side code
    • client side code / The client-side code
  • web storage, snake game
    • about / Web storage
  • Web Storage API
    • about / New JavaScript APIs
  • Web Storage W3C Candidate Recommendation
    • URL / Web storage
  • Web Video API
    • about / New JavaScript APIs
  • web workers, snake game
    • about / Web workers
    • using / How to use it
    • messae, posting to / How to use it
    • object, creating / How to use it
  • Web Workers API
    • about / New JavaScript APIs
  • week input type, web forms
    • about / Week
    • attributes / Week
  • width attribute / width
  • window.indexedDB object / IDBFactory
  • window.localStorage / Local storage
  • World Wide Web evolution
    • about / The evolution of the World Wide Web

X

  • XHR
    • about / jQuery