Creating a Physics-Based Web Game in JavaScript and HTML5
Pluralsight
Course Summary
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 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.
-
+
Course Syllabus
Introduction and Project Overview- 1m 8s
—Introduction and Project Overview 1m 8sCreating a Physics-Based Web Game in JavaScript and HTML5- 5h 51m
—Concepting the Game 11m 46s
—Illustrating the Game Icons 16m 38s
—Animating Sprites 11m 26s
—Exporting Sprites for Game Development 10m 53s
—Setting up Our Initial HTML5 Tools, Libraries and Frameworks 13m 13s
—Implementing the pixi.js Library 7m 46s
—Making Our Game Responsive 10m 4s
—Integrating Box2dweb with pixi.js 13m 23s
—Implementing the Box2d Debugger 6m 17s
—Implementing Our Primary Game Logic 15m 21s
—Implementing Pineapple Bomb Functionality 10m 14s
—Understanding Bitmask Collisions 10m 22s
—Handling Box2d Mouse Interaction 11m 17s
—Implementing the UI 13m 39s
—Implementing Visuals and UI with Box2d Physics 8m 31s
—Implementing Visuals and Taking a First Look at Tweenmax 10m 53s
—Reviewing the Live Game 10m 31s
—Delving into Our Interface Functionality 7m 0s
—Adding Buttons and Placing UI Elements 9m 47s
—Building a Countdown Timer 8m 59s
—Building a Score System 12m 39s
—Building a Lives Lost System 6m 49s
—Implementing Movieclip Animation 14m 15s
—Consolidating the Game Code 13m 29s
—Implement Sound Effects 6m 2s
—Accounting for Unique Dprs and Adding Animation Flourishes 11m 22s
—Animating the Random Drips and Swirls Flourishing 3m 57s
—Building a Highscore System 11m 24s
—Creating a Highscore Submit PHP Script 7m 15s
—Laying out a Simple Highscore UI 9m 14s
—Handling Keyboard Input 13m 36s
—Using Ajax to Submit and View Scores 13m 53s
—Finalizing Development and Optimizing in Chrome 9m 8s
