HTML5 Game Development HOTSHOT

HTML5 Game Development HOTSHOT

Makzan

Language: English

Pages: 366

ISBN: B019TM2FUW

Format: PDF / Kindle (mobi) / ePub


Build interactive games with HTML, DOM, and the CreateJS Game library.

About This Book

Create eight different games using HTML5
Learn essential games development techniques, such as game loop, animations, and browser storage
Follow the project-based approach to build games from start to finish with in-depth explanations on game management

Who This Book Is For

Whether you are familiar with the basics of object-oriented programming concepts, are new to HTML game development, or are familiar with just web design, this project-based book will get you up and running in no time. It will teach and inspire you to create great interactive content on the Web.

What You Will Learn

Create DOM-based HTML5 games
Use the CreateJS library to build a canvas-based game
Create different types of animations that are spritesheet-based, tween-based, and Flash vector-based
Modularize game components in JavaScript with object inheritance
Store and load persistent game progress in browsers
Convert coordinates between the screen and isometric perspective
Maintain a hierarchy for game elements to keep the extensibility of the game
Learn essential workflows and tools to create game assets easier

In Detail

This book will show you how to create stunning cross-browser games without the need for Flash or other plugins. Learn about Box2D, DOM elements, the EaselJS framework, and more, all providing a foundation of knowledge to expand your game-creating skills. With in-depth explanations and step-by-step instructions, you will finish this book feeling confident about building great games with HTML. Whether you are familiar with the basics of object-oriented programming concepts, are new to HTML game development, or are familiar with just web design, this project-based book will get you up and running in no time. It will teach and inspire you to create great interactive content on the Web.

[url]https://www.packtpub.com/game-development/html5-game-development-hotshot[/url]

RESTful Web APIs

A Practical Guide to Managing Web Projects

Building E-Commerce Solutions with WooCommerce (2nd Edition)

Developing Web Applications with Oracle ADF Essentials

OpenLayers 3: Beginner's Guide

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

having the same element setting for the out and in class will immediately cause unusual troubles, for example, the out styles are ignored. Having a delay before adding the in class makes both the out and in styles and the animation being executed. 63 Card Battle! Classified intel There are several ways to place the game elements inside a parent HTML element. In this example, we used the absolute position. It works because our game dimension is fixed by the #game element. The other approach is

are more complex. We will learn how to create a logical hierarchy using inheritance in JavaScript. Inheritance allows us to reuse similar code and still have variation among our game elements. This is an essential technique especially when our game becomes more complex. The following screenshot shows what we are going to achieve in this project: Your Hotshot objectives We are going to divide our mission into eight objectives, which are as follows: ff Setting up the canvas and EaselJS ff

this task. Create the following two JS files inside the scripts folder: scripts/view-sprites.js scripts/helpers.js For newly created files, we need to include them inside our index.html file before loading the game.js file: The view-sprites.js file defines individual game sprites, such as Tile and Buildings. The helper.js file provides useful utilities. In this task, we need to create a 2D array and add

put it inside the game.start function. Note that it also binds the game.uiLayer object as the context of the tick function: cjs.Ticker.addEventListener('tick' , game.uiLayer.tick.bind(game.uiLayer)); Engage thrusters In the following steps, we will create a building panel: 1. The data file defines the buildings and their parameters. Insert the following code inside the data.js file: ;(function(game){ game.BuildingsData = {}; game.BuildingsData['CoinsGenerator'] = { className: 'CoinsGenerator',

specifically used as the question for player to give the answer. // so it comes with comparing logic. var Quest = game.Quest = (function(){ function Quest(level){ var questData = questLevels[level]; this.data = questData; } Quest.prototype = new game.Composition(); // extends the Quest prototype from Composition. return Quest; })(); })(); 6. Since we have removed the dummy gameover and have finished with the link of the game scene, now, from the scenes.js file, we will also remove the onclick

Download sample

Download