Build Animated Physics Game With Javascript

What you'll learn
Use HTML5, CSS3 & JavaScript to build a browser game from start to finish
Learn how to apply collision detection to simulate 2D physics
Animate character sprite sheets and make them interact with each other
Learn how to implement 10 important techniques, useful in any game development project
Apply object oriented programming principles in an interactive animation codebase
Create animated particle systems to enhance interactivity
Requirements
This course is beginner friendly, basic knowledge of HTML, CSS and JavaScript is needed to get the maximum value
Description
What makes a great game? Is it about beautiful, polished visuals or about gameplay that feels good and responsive? Is it about unique ideas, or maybe it's the little details, special secrets and Easter eggs? What are the ingredients in a perfect game development recipe?In this class we will dive deep into sprite animation, interactivity and 2D physics. We will learn 10 important techniques every game developer needs to know and we will apply them in a real project.Students of this class will get a lot of 2D professional high resolution game art for free. I provide environmental and character art assets in the form of ready to use sprite sheets, as well as source files with separate pieces for those of you who want to edit the colors, piece together your own mushrooms and creatures or to rig your own animations.Today we will learn:- How to implement a very simple AI to make the creatures feel alive- How to control the FPS of our game and how to measure time to trigger periodic events- How to restart the game by pressing a button- How to apply collision detection, resolve collisions and use that to simulate physics- How to use the built-in drawImage method to draw randomised game environments and animated characters from a sprite sheet- How to capture mouse position and animate an 8 directional sprite sheet based on the relative position between the mouse and the player character- How to use HTML5, CSS3 and plain vanilla JavaScript to build a game from scratch. We will write and understand every line of code, we will not rely on any external frameworks or libraries... and much moreThe pace and techniques in this course are beginner friendly. Existing knowledge of HTML, CSS & JavaScript is needed to follow the course. If you understand JavaScript basics and know what functions, for loops and arrays are, you will be able to get the maximum value out of this class.Have fun!
Overview
Section 1: Introduction
Lecture 1 Introduction
Section 2: Project
Lecture 2 Basic setup
Lecture 3 Object Oriented Programming in JavaScript
Lecture 4 Drawing the player
Lecture 5 Mouse controls
Lecture 6 Making the player move
Lecture 7 Creating obstacles
Lecture 8 Non-overlapping obstacles
Lecture 9 Randomized images from a sprite sheet
Lecture 10 Positioning rules
Lecture 11 Physics
Lecture 12 Reusable collision detection method
Lecture 13 8 directional sprite animation
Lecture 14 Animation angles
Lecture 15 Debug mode
Lecture 16 Player movement boundaries
Lecture 17 FPS
Lecture 18 Egg class
Lecture 19 Periodically adding new eggs
Lecture 20 Egg physics
Lecture 21 Draw order
Lecture 22 Enemy class
Lecture 23 Larva class
Lecture 24 Egg hatching
Lecture 25 Larva sprites and collisions
Lecture 26 Gaining score points
Lecture 27 Particle effects
Lecture 28 Particle motion
Lecture 29 Randomised enemy skins
Lecture 30 Win and lose condition
Lecture 31 Restart game
Lecture 32 Extending enemy class
Lecture 33 Simple fullscreen mode
Lecture 34 Player sprite sheet full animation
Lecture 35 Larva sprite sheet full animation
Lecture 36 Enemies sprite sheet full animation
Beginner JavaScript developers with an interest in web animation and creative coding


Homepage