eBook - ePub
HTML5 Game Development by Example: Beginner's Guide - Second Edition
Makzan
This is a test
Share book
- 354 pages
- English
- ePUB (mobile friendly)
- Available on iOS & Android
eBook - ePub
HTML5 Game Development by Example: Beginner's Guide - Second Edition
Makzan
Book details
Book preview
Table of contents
Citations
About This Book
About This Book
- Get to grips with the latest HTML5, Canvas, CSS, and JavaScript techniques
- Learn to create exciting puzzle games, action games, multiplayer, and Box2D physics
- A task-based approach to achieve practical skills required for game development
Who This Book Is For
This book is for web designers who have a basic knowledge of HTML, CSS, and JavaScript and want to create Canvas or DOM-based games that run on browsers.
Frequently asked questions
How do I cancel my subscription?
Can/how do I download books?
At the moment all of our mobile-responsive ePub books are available to download via the app. Most of our PDFs are also available to download and we're working on making the final remaining ones downloadable now. Learn more here.
What is the difference between the pricing plans?
Both plans give you full access to the library and all of Perlego’s features. The only differences are the price and subscription period: With the annual plan you’ll save around 30% compared to 12 months on the monthly plan.
What is Perlego?
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, we’ve got you covered! Learn more here.
Do you support text-to-speech?
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Is HTML5 Game Development by Example: Beginner's Guide - Second Edition an online PDF/ePUB?
Yes, you can access HTML5 Game Development by Example: Beginner's Guide - Second Edition by Makzan in PDF and/or ePUB format, as well as other popular books in Computer Science & Programming in HTML. We have over one million books available in our catalogue for you to explore.
Information
HTML5 Game Development by Example Beginner's Guide Second Edition
Table of Contents
HTML5 Game Development by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
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
Sections
Time for action – heading
What just happened?
Pop quiz – heading
Have a go hero – heading
Conventions
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata
Piracy
Questions
1. Introducing HTML5 Games
Discovering new features in HTML5
Canvas
Audio
Touch Events
GeoLocation
WebGL
WebSocket
Local storage
Offline applications
Discovering new features in CSS3
CSS3 transition
CSS3 transform
CSS3 animation
The benefit of creating HTML5 games
Free and open standards
Support for multiple platforms
Native app-rendering performance in particular scenarios
Breaking the boundary of usual browser games
Building HTML5 games
What others are playing with HTML5
Coca-Cola's Ahh campaign
Asteroid-styled bookmarklet
X-Type
Cursors.io
What we are going to create in this book
Preparing the development environment
Summary
2. Getting Started with DOM-based Game Development
Preparing the HTML documents for a DOM-based game
Time for action – installing the jQuery library
What just happened?
New HTML5 doctype
Header and footer
The best practice to place the JavaScript code
Choosing the jQuery file
Running jQuery inside a scope
Running our code after the page is ready
Pop quiz
Downloading the image assets
Setting up the Ping Pong game elements
Time for action – placing Ping Pong game elements in the DOM
What just happened?
Using jQuery
Understanding basic jQuery selectors
Understanding the jQuery CSS function
Manipulating game elements in DOM with jQuery
Understanding the behavior of absolute position
Declaring global variables in a better way
Pop quiz
Getting mouse input
Time for action – moving DOM objects by mouse input
What just happened?
Getting the mouse event
RequestAnimationFrame
Checking the console window
Moving a DOM object with JavaScript Interval
Time for action – Moving the ball with JavaScript Interval
What just happened?
Creating a JavaScript timer with the setInterval function
Understanding the game loop
Separating the data and the view logic
Beginning collision detection
Time for action – hitting the ball with the paddles
What just happened?
Have a go hero
Controlling the left paddle movement
Time for action – auto moving the left paddle
What just happened?
Showing text dynamically in HTML
Time for action – Showing the score of both players
What just happened?
Have a go hero – winning the game
Summary
3. Building a Card-matching Game in CSS3
Moving game objects with CSS3 transition
Time for action – moving a playing card around
What just happened?
2D transform functions
3D transform functions
Tweening the styles using CSS3 transition
Have a go hero
Creating a card-flipping effect
Time for action – flipping a card with CSS3
What just happened?
Toggling a class with jQuery's toggleClass function
Introducing CSS' perspective property
Have a go hero
Introducing backface-visibility
Creating a card-matching memory game
Downloading the sprite sheet of playing cards
Setting up the game environment
Time for action – preparing the card-matching game
What just happened?
Cloning DOM elements with jQuery
Selecting the first child of an element in jQuery using child filters
Vertically aligning a DOM element
Using CSS sprite with a background position
Adding game logic to the matching game
Time for action – adding game logic to the matching game
What just happened?
Executing code after the CSS transition has ended
Delaying code execution on flipping cards
Randomizing an array in JavaScript
Storing internal custom data with an HTML5 custom data attribute
Pop quiz
Accessing custom data attribute with jQuery
Pop quiz
Have a go hero
Making other playing card games
Have a go hero
Embedding web fonts into our game
Time for action – embedding a font from the Google Fonts directory
What just happened?
Choosing different font delivery services
Summary
4. Building the Untangle Game with Canvas and the Drawing API
Introducing the HTML5 canvas element
Drawing a circle in the Canvas
Time for action – drawing color circles in the Canvas
What just happened?
Putting in fallback content when the web browser does not support the Canvas
The Canvas context
Drawing circles and shapes with the Canvas arc function
Converting degrees to radians
Executing the path drawing in the Canvas
Beginning a path for each style
Have a go hero
Closing a path
Pop quiz
Wrapping the circle drawing in a function
Time for action – putting the circle drawing code into a function
What just happened?
Dividing code into files
Generating random numbers in JavaScript
Saving ...