HTML5 Game Development [Video]

HTML5 Game Development [Video]

Starting
Makzan

Build two HTML5 games in two hours with these fast-paced beginner-friendly videos
$10.00
RRP $84.99
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

+ Collection
Free Sample

Video Details

ISBN 139781849695886
Course Length1 hour and 58 minutes

About This Video

Who This Video Is For

HTML5 Game Development is ideal for anyone who wants to get started with the fundamentals of game development in HTML5. Some basic knowledge of HTML, JavaScript, and CSS would be useful.

Table of Contents

Planning Your First Game
Planning Your Game
Setting Up Your File Structure
Setting Up HTML and JS
Drawing Basic Shapes with EaselJS
Implementing Your First Game Object
Creating the Core Game Logic
Displaying Multiple Objects on Stage
Adding Click Input Events
Adding the Game Logic
Adding the Game Over Logic
Restarting the Game
Adding Graphics to Your Game
Preparing Your Graphics
Adding Graphics to the Game
Preloading Graphics
Adding Custom Web Fonts
Making Your Game Mobile-friendly
Planning Your Second Game
Planning the Rush Game
Defining the Game Object Class
Creating a Platform Class
Creating Movable Game Objects
Adding Platforms to Your Stage
Game Objects and Collisions
Handling Platforms and Hero Collisions
Implementing the Obstacle Game Objects
Handling Obstacle and Hero Collisions
Handling Collisions with Generic Methods
Implementing the Detection Score Counter
Character Movement and Input Handling
Adding Gravity to the Level
Applying Gravity to the Hero
Making the Hero Run
Making the Hero Jump
Handling Hero-Obstacle Collisions
Adding Graphics and Animations
Creating the Rush Game's Graphics
Integrating Static Graphics in Rush
Using EaselJS Sprite Sheet Animations
Creating the Dynamic Platform Width Logic
Preloading Graphics and the Progress Bar
Polishing Your Final Game
Creating a Main Menu Scene
Create a Game Over Scene
Displaying Scores
Displaying a Scoreboard
Finalizing Your Game's Web Page

What You Will Learn

  • Create interactive games with gravity and collisions
  • Modularize game components and create easily maintainable code
  • Convert and embed custom fonts into your game and web pages
  • Develop sprite and sprite sheet animations
  • Preload graphic files and optimize your startup performance
  • Control scene transitions such as main menu and game over scenes
  • Understand core concepts that can be applied to developing other rich media and interfaces for your websites
  • Test and optimize your game's performance

In Detail

HTML5 (as a platform) is a collection of technologies, such as JavaScript and CSS3, that allows the delivery of new and exciting multimedia using the native features of new and more capable web browsers. It allows game developers to create fun, exciting, and immersive games, as well as other interactive content that can enhance your web portals.

HTML5 Game Development will teach you all that you need to know to get started with creating your first game in HTML5 so you can start building captivating games from scratch.

This course is packed with step-by-step instructions to help you build modular code, optimize your game for deployment, and easily modify and reuse game logic to extend your game.

With this course, you’ll build two incrementally complex 2D games that run on both desktop and mobile browsers. This course will explain game programming best practices, complete with simplified game logic, physics and collision handling, as well as custom graphics and fonts.

Your first exercise is a simple counting game that lays the foundations for creating clean, customizable, and modular code. We’ll then move on to building a “rush” game with moving backgrounds, basic physics, and dynamic scoreboards.

We’ll cover essentials such as handling mobile touch events, controlling scene transitions, custom fonts and graphics, optimizing your game's load time, a loading progress bar, collision detection, keeping score, and creating a deployable game.

HTML5 Game Development will be your guide as you create two complete games that are compatible with multiple desktop and mobile web browsers.

Style and Approach

Packt video courses are designed to cover the breadth of the topic in short, hands-on, task-based videos. Each course is divided into short manageable sections, so you can watch the whole thing or jump to the bit you need. The focus is on practical instructions and screencasts showing you how to get the job done.

The examples in this video course are built using a simple canvas with modularized JavaScript game logic. You'll use basic object-oriented programming concepts to create game components and test your game using a simulator - optimizing it for real-world situations before deployment.

Authors

Screenshots

Table of Contents

Planning Your First Game
Planning Your Game
Setting Up Your File Structure
Setting Up HTML and JS
Drawing Basic Shapes with EaselJS
Implementing Your First Game Object
Creating the Core Game Logic
Displaying Multiple Objects on Stage
Adding Click Input Events
Adding the Game Logic
Adding the Game Over Logic
Restarting the Game
Adding Graphics to Your Game
Preparing Your Graphics
Adding Graphics to the Game
Preloading Graphics
Adding Custom Web Fonts
Making Your Game Mobile-friendly
Planning Your Second Game
Planning the Rush Game
Defining the Game Object Class
Creating a Platform Class
Creating Movable Game Objects
Adding Platforms to Your Stage
Game Objects and Collisions
Handling Platforms and Hero Collisions
Implementing the Obstacle Game Objects
Handling Obstacle and Hero Collisions
Handling Collisions with Generic Methods
Implementing the Detection Score Counter
Character Movement and Input Handling
Adding Gravity to the Level
Applying Gravity to the Hero
Making the Hero Run
Making the Hero Jump
Handling Hero-Obstacle Collisions
Adding Graphics and Animations
Creating the Rush Game's Graphics
Integrating Static Graphics in Rush
Using EaselJS Sprite Sheet Animations
Creating the Dynamic Platform Width Logic
Preloading Graphics and the Progress Bar
Polishing Your Final Game
Creating a Main Menu Scene
Create a Game Over Scene
Displaying Scores
Displaying a Scoreboard
Finalizing Your Game's Web Page

Video Details

ISBN 139781849695886
Course Length1 hour and 58 minutes
Read More