eBook - ePub
HTML5 Game Development by Example: Beginner's Guide - Second Edition
Makzan
This is a test
Condividi libro
- 354 pagine
- English
- ePUB (disponibile sull'app)
- Disponibile su iOS e Android
eBook - ePub
HTML5 Game Development by Example: Beginner's Guide - Second Edition
Makzan
Dettagli del libro
Anteprima del libro
Indice dei contenuti
Citazioni
Informazioni sul libro
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.
Domande frequenti
Come faccio ad annullare l'abbonamento?
È semplicissimo: basta accedere alla sezione Account nelle Impostazioni e cliccare su "Annulla abbonamento". Dopo la cancellazione, l'abbonamento rimarrà attivo per il periodo rimanente già pagato. Per maggiori informazioni, clicca qui
È possibile scaricare libri? Se sì, come?
Al momento è possibile scaricare tramite l'app tutti i nostri libri ePub mobile-friendly. Anche la maggior parte dei nostri PDF è scaricabile e stiamo lavorando per rendere disponibile quanto prima il download di tutti gli altri file. Per maggiori informazioni, clicca qui
Che differenza c'è tra i piani?
Entrambi i piani ti danno accesso illimitato alla libreria e a tutte le funzionalità di Perlego. Le uniche differenze sono il prezzo e il periodo di abbonamento: con il piano annuale risparmierai circa il 30% rispetto a 12 rate con quello mensile.
Cos'è Perlego?
Perlego è un servizio di abbonamento a testi accademici, che ti permette di accedere a un'intera libreria online a un prezzo inferiore rispetto a quello che pagheresti per acquistare un singolo libro al mese. Con oltre 1 milione di testi suddivisi in più di 1.000 categorie, troverai sicuramente ciò che fa per te! Per maggiori informazioni, clicca qui.
Perlego supporta la sintesi vocale?
Cerca l'icona Sintesi vocale nel prossimo libro che leggerai per verificare se è possibile riprodurre l'audio. Questo strumento permette di leggere il testo a voce alta, evidenziandolo man mano che la lettura procede. Puoi aumentare o diminuire la velocità della sintesi vocale, oppure sospendere la riproduzione. Per maggiori informazioni, clicca qui.
HTML5 Game Development by Example: Beginner's Guide - Second Edition è disponibile online in formato PDF/ePub?
Sì, puoi accedere a HTML5 Game Development by Example: Beginner's Guide - Second Edition di Makzan in formato PDF e/o ePub, così come ad altri libri molto apprezzati nelle sezioni relative a Computer Science e Programming in HTML. Scopri oltre 1 milione di libri disponibili nel nostro catalogo.
Informazioni
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 ...