Home Page Icon
Home Page
Table of Contents for
Table of Contents
Close
Table of Contents
by Rodrigo Silveira
Learn HTML5 by Creating Fun Games
Learn HTML5 by Creating Fun Games
Table of Contents
Learn HTML5 by Creating Fun Games
Credits
About the Author
About the Reviewer
www.PacktPub.com
Support files, eBooks, discount offers and more
Why Subscribe?
Free Access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. An Overview of HTML5
What is HTML?
A brief history of HTML
The evolution of the World Wide Web
What is HTML5?
HTML5 – the next step in the evolution
HTML5 is not a single feature
More semantic document structure
A warning about performance
Native features of the browser
Automatic form validation
New input types
Telephone-friendly hyperlinks
CSS-based DOM selectors
Text-to-speech
CSS3
Separation of concerns
Reusability of visual design
Ease of maintenance
Scalability
The evolution of CSS
Experimental features and vendor prefixes
CSS preprocessors
CSS3 modules
Style attributes
Selectors
Colors
Media queries
JavaScript APIs
New JavaScript APIs
The Web as a platform
The Open Web
HTML5 – a game changer
Learning HTML5 through game development
Summary
2. HTML5 Typography
The game
Game elements
The options widget
The game title
Boat
Sky
Waves
Tracks
Players
The main container
Words to write
Words written
The message container
The message title
The new champion form
Leaderboard
Game controls
HTML
The web form
Range input
Email input
Data attributes
CSS
Web fonts
Transitions
Animations
The text shadows
The box shadows
The border radius
JavaScript
Query selectors
API usage
Web forms
New input types
Date
Month
Week
Time
Datetime
Datetime-local
Color
Email
Number
Range
Search
Tel
Url
Form validation
Validity state object
Custom validation
Used in the game
Data attributes
Used in the game
Query selectors
Used in the game
Web fonts
Transitions
Animations
The text shadow
The box shadow
The border radius
The code
The HTML structure
JavaScript and logic
Summary
3. Understanding the Gravity of HTML5
Browser compatibility
Supporting different browsers
HTML5 libraries and frameworks
jQuery
Google Web Toolkit
Supporting browsers with limited HTML5 features
Gracefully degrade
Polyfills
Modernizr
The game
Code structure
API usage
Web audio
Scalable Vector Graphics (SVG)
Drag-and-drop
Web audio
How to use it
SVG
How to use it
Drag-and-drop
How to use it
Summary
4. Using HTML5 to Catch a Snake
The game
API usage
How to use it
Typed arrays
How to use it
ArrayBuffer and ArrayBufferView
Typed array view types
Canvas
How to use it
clearRect
Fill and stroke
Lines
Shapes
Text
Transformations
Drawing images
Manipulating pixels
Web workers
How to use it
Offline application cache
How to use it
The code
Summary
5. Improving the Snake Game
The game
API usage
Web messaging
How to use it
Web storage
Local storage
Session storage
IndexedDB
IDBFactory
IDBOpenDBRequest
IDBTransaction
readwrite
readonly
versionchange
Getting elements
Deleting elements
The code
Saving the high score
Taking screenshots of the game
Summary
6. Adding Features to Your Game
Advanced HTML5 APIs
WebGL
Hello, World!
Web sockets
The connection
The server-side code
The client-side code
Video
Attributes
Events
Geolocation
A Google Maps example
Upcoming CSS features
Programming in the bleeding edge
CSS shaders
Using custom filters
CSS columns
The column rule
Column breaks
CSS regions and exclusions
Regions
Exclusions
Defining shapes
Summary
7. HTML5 and Mobile Game Development
Desktop versus mobile
Major implementation considerations
Screen size and orientation
Computing power
Battery life
Browser differences
Best practices
Degrade gracefully and enhance progressively
Finger-friendly design
Save battery life
Plan for offline
Offering a desktop version
Understanding media queries
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid
Understanding touch events
touchstart
touches
changedTouches
targetTouches
touchend
touchmove
The touch object
identifier
screenX
screenY
clientX
clientY
pageX
pageY
radiusX
radiusY
rotationAngle
force
target
The game
Code structure
/css
/img
/js
/components
/entities
/widgets
Canvas.js
EnemyManager.js
GameLoop.js
PhysicsManager.js
Vec2.js
main.js
index.html
Mobile optimizations
Combine resources
Track touches by IDs
Use CSS animations with caution
Use separate canvases for each game layer
Use image atlases
Summary
Index
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Prev
Previous Chapter
Cover
Next
Next Chapter
Learn HTML5 by Creating Fun Games
Table of Contents
Learn HTML5 by Creating Fun Games
Credits
About the Author
About the Reviewer
www.PacktPub.com
Support files, eBooks, discount offers and more
Why Subscribe?
Free Access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. An Overview of HTML5
What is HTML?
A brief history of HTML
The evolution of the World Wide Web
What is HTML5?
HTML5 – the next step in the evolution
HTML5 is not a single feature
More semantic document structure
A warning about performance
Native features of the browser
Automatic form validation
New input types
Telephone-friendly hyperlinks
CSS-based DOM selectors
Text-to-speech
CSS3
Separation of concerns
Reusability of visual design
Ease of maintenance
Scalability
The evolution of CSS
Experimental features and vendor prefixes
CSS preprocessors
CSS3 modules
Style attributes
Selectors
Colors
Media queries
JavaScript APIs
New JavaScript APIs
The Web as a platform
The Open Web
HTML5 – a game changer
Learning HTML5 through game development
Summary
2. HTML5 Typography
The game
Game elements
The options widget
The game title
Boat
Sky
Waves
Tracks
Players
The main container
Words to write
Words written
The message container
The message title
The new champion form
Leaderboard
Game controls
HTML
The web form
Range input
Email input
Data attributes
CSS
Web fonts
Transitions
Animations
The text shadows
The box shadows
The border radius
JavaScript
Query selectors
API usage
Web forms
New input types
Date
Month
Week
Time
Datetime
Datetime-local
Color
Email
Number
Range
Search
Tel
Url
Form validation
Validity state object
Custom validation
Used in the game
Data attributes
Used in the game
Query selectors
Used in the game
Web fonts
Transitions
Animations
The text shadow
The box shadow
The border radius
The code
The HTML structure
JavaScript and logic
Summary
3. Understanding the Gravity of HTML5
Browser compatibility
Supporting different browsers
HTML5 libraries and frameworks
jQuery
Google Web Toolkit
Supporting browsers with limited HTML5 features
Gracefully degrade
Polyfills
Modernizr
The game
Code structure
API usage
Web audio
Scalable Vector Graphics (SVG)
Drag-and-drop
Web audio
How to use it
SVG
How to use it
Drag-and-drop
How to use it
Summary
4. Using HTML5 to Catch a Snake
The game
API usage
How to use it
Typed arrays
How to use it
ArrayBuffer and ArrayBufferView
Typed array view types
Canvas
How to use it
clearRect
Fill and stroke
Lines
Shapes
Text
Transformations
Drawing images
Manipulating pixels
Web workers
How to use it
Offline application cache
How to use it
The code
Summary
5. Improving the Snake Game
The game
API usage
Web messaging
How to use it
Web storage
Local storage
Session storage
IndexedDB
IDBFactory
IDBOpenDBRequest
IDBTransaction
readwrite
readonly
versionchange
Getting elements
Deleting elements
The code
Saving the high score
Taking screenshots of the game
Summary
6. Adding Features to Your Game
Advanced HTML5 APIs
WebGL
Hello, World!
Web sockets
The connection
The server-side code
The client-side code
Video
Attributes
Events
Geolocation
A Google Maps example
Upcoming CSS features
Programming in the bleeding edge
CSS shaders
Using custom filters
CSS columns
The column rule
Column breaks
CSS regions and exclusions
Regions
Exclusions
Defining shapes
Summary
7. HTML5 and Mobile Game Development
Desktop versus mobile
Major implementation considerations
Screen size and orientation
Computing power
Battery life
Browser differences
Best practices
Degrade gracefully and enhance progressively
Finger-friendly design
Save battery life
Plan for offline
Offering a desktop version
Understanding media queries
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid
Understanding touch events
touchstart
touches
changedTouches
targetTouches
touchend
touchmove
The touch object
identifier
screenX
screenY
clientX
clientY
pageX
pageY
radiusX
radiusY
rotationAngle
force
target
The game
Code structure
/css
/img
/js
/components
/entities
/widgets
Canvas.js
EnemyManager.js
GameLoop.js
PhysicsManager.js
Vec2.js
main.js
index.html
Mobile optimizations
Combine resources
Track touches by IDs
Use CSS animations with caution
Use separate canvases for each game layer
Use image atlases
Summary
Index
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset
