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.
What you'll learn
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.
Table of contents
- Concepting the Game 12m
- Illustrating the Game Icons 17m
- Animating Sprites 11m
- Exporting Sprites for Game Development 11m
- Setting up Our Initial HTML5 Tools, Libraries and Frameworks 13m
- Implementing the pixi.js Library 8m
- Making Our Game Responsive 10m
- Integrating Box2dweb with pixi.js 13m
- Implementing the Box2d Debugger 6m
- Implementing Our Primary Game Logic 15m
- Implementing Pineapple Bomb Functionality 10m
- Understanding Bitmask Collisions 10m
- Handling Box2d Mouse Interaction 11m
- Implementing the UI 14m
- Implementing Visuals and UI with Box2d Physics 9m
- Implementing Visuals and Taking a First Look at Tweenmax 11m
- Reviewing the Live Game 11m
- Delving into Our Interface Functionality 7m
- Adding Buttons and Placing UI Elements 10m
- Building a Countdown Timer 9m
- Building a Score System 13m
- Building a Lives Lost System 7m
- Implementing Movieclip Animation 14m
- Consolidating the Game Code 13m
- Implement Sound Effects 6m
- Accounting for Unique Dprs and Adding Animation Flourishes 11m
- Animating the Random Drips and Swirls Flourishing 4m
- Building a Highscore System 11m
- Creating a Highscore Submit PHP Script 7m
- Laying out a Simple Highscore UI 9m
- Handling Keyboard Input 14m
- Using Ajax to Submit and View Scores 14m
- Finalizing Development and Optimizing in Chrome 9m
