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