Creating a Physics-Based Web Game in JavaScript and HTML5

In this JavaScript and HTML5 tutorial we'll go through the entire process from concept, design and animation through to final development of a dynamic HTML5 game. Software required: HTML5, JavaScript, jQuery, Photoshop CC, Google Chrome, Texture Packer 3.3.4, Sublime Text 2.
Course info
Rating
(28)
Level
Advanced
Updated
Dec 26, 2014
Duration
5h 52m
Table of contents
Description
Course info
Rating
(28)
Level
Advanced
Updated
Dec 26, 2014
Duration
5h 52m
Description

In this JavaScript and HTML5 tutorial we'll go through the entire process from concept, design and animation through to final development of a dynamic HTML5 game. A few things we'll be covering include sprite exportation and animation, physics engine integration, HiDPI device handling, as well as structuring our game code, separating our UI from our game logic and implementing back-end scoring systems. By the end of this JavaScript and HTML5 training, you'll be more knowledgeable of the concepting, animating and development workflow of creating a game from start to finish. Software required: HTML5, JavaScript, jQuery, Photoshop CC, Google Chrome, Texture Packer 3.3.4, Sublime Text 2.

About the author
About the author

Japhia Olson has worked over 10 years in the creative design industry and operates Mint Design Company LLC where she specializes in highly interactive and award winning web/game development, illustrative design work and comprehensive UX strategies.

Section Introduction Transcripts
Section Introduction Transcripts

Introduction and Project Overview
(guitar music) Hello, everyone, my name is Japhia Olson. As the founder of Mint Design Company, I'm a full-stack developer and designer, specializing in HTML5 game development, responsive web design, and animation. My latest projects have included comprehensive UX strategy and wireframe development for South Carolina Tourism, a series of dynamic HTML5 physics-based games, Ajax site development for the Sheryl Crow and Chateau St. Jean partnership, and my own company rebrand and site development. Some of the key takeaways from watching this course include learning how to, one, outline and concept a game, two, create and implement sprites into your game play, three, work with a popular Box2D library to come up with creative and engaging physics-based game play, four, come up with ideas and ways to structure more complex game code, and five, implement the Pixi. js renderer and work with GSAP to create smoothly animated graphics and UI elements. By the end of training, you'll have learned how to concept, design, code, and animate an entire desktop HTML5 game from scratch. I'm excited to work with Digital-Tutors and share these techniques with you. So let's get started with the first lesson.