HTML5 game development by example beginner's guide make the most of HTML5 techniques to create exciting games from scratch
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.
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham, England ; Mumbai, [India] :
Packt Publishing
2015.
|
| Edición: | 2nd ed |
| Colección: | Learn by doing: less theory, more results
|
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009629954706719 |
Tabla de Contenidos:
- Cover; Copyright; Credits; About the Author; About the Reviewers; www.PacktPub.com; Table of Contents; Preface; Chapter 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 HTML5Coca-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; Chapter 2: Getting Started with DOM-based Game Development; Preparing the HTML documents for a DOM-based game; Time for action - installing the jQuery library; 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; Downloading the image assets
- Setting up the Ping Pong game elementsTime for action - placing Ping Pong game elements in the DOM; 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; Getting mouse input; Time for action - moving DOM objects by mouse input; 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
- Creating a JavaScript timer with setInterval functionUnderstanding the Game Loop; Separating the data and the view logic; Beginning collision detection; Time for action - hitting the ball with the paddles; 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?; Summary; Chapter 3: Building a Card Matching Game in CSS3; Moving game objects with CSS3 transition; Time for action - moving a playing card around; 2D transform functions
- 3D transform functionsTweening the styles by using CSS3 transition; Creating a card-flipping effect; Time for action - flipping a card with CSS3; Toggling a class with jQuery's toggleClass function; Introducing CSS' perspective property; 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; Cloning DOM elements with jQuery; Selecting the first child of an element in jQuery by using child filters; Vertically aligning a DOM element
- Using CSS sprite with a background position
