• Post category:StudyBullet-9
  • Reading time:5 mins read


Make your own animated 2D games

What you will learn

Build 2d games with HTML, CSS & JavaScript, no frameworks and no libraries

Explore web animation techniques with HTML canvas element

Practice Object Oriented Programming

Discover and learn 5 fundamental techniques of 2D game development and use them in a real project

Description

Games should be exciting, full of secrets and special features! Let me take you step by step though my creative process and show you how I build unique game worlds for players to have adventures in. I will explain every line of code as we write it. Let’s practise object oriented programming and use HTML, CSS and plain vanilla JavaScript to build a game. There will be no frameworks and no libraries, because we want deep understanding of how things work under the hood.

Let’s explore an alien planet and it’s mechanical life forms in a steampunk themed 2D side scroller. We will learn how to implement:


Get Instant Notification of New Courses on our Telegram channel.


  • Sprite animation
  • Parallax backgrounds
  • Collision detection
  • Power ups
  • Different enemy types that alter the gameplay
  • and many other features of 2D game development

If you are a beginner front end web developer curious about game development, creative coding & web animation, come join me and learn how to create beautiful visuals for your games, and how to implement unique game features that will make your project stand out. Have fun!

(In this class I am giving away a lot of free game art assets for characters, environments and props. These were created by me or artists I hired, there is no copyright. Feel free to use them for any of your personal projects if you want. )

English
language

Content

Coding

HTML & CSS setup
Basic JavaScript setup
Object Oriented Programming with JavaScript
Creating Player & Game objects
Animation loop
Keyboard inputs
Creating projectiles
Periodic events
Draw game UI
Base enemy class
Collision detection between rectangles
Drawing game score
Win and lose condition
Counting game time
Animated parallax backgrounds
Sprite animation with JavaScript
Creating a debug mode
Animating enemy sprite sheets
Night Angler enemy class
Lucky Fish enemy class
Collecting power ups
Drawing projectiles as images
Custom fonts and game text
Cleaning up
Particle effects and physics
Particle rotation
Tweaks and fixes
Hive Whale enemy class
Drone enemy class
Dust effect animation
Fire effect animation
Tuning game difficulty
Bulb Whale enemy class
Moon Fish enemy type
Sounds
Animated shield
Animated projectiles
What’s next?