Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Learn Game Development with JavaScript
Rating: 4.4 out of 5(382 ratings)
11,685 students

Learn Game Development with JavaScript

Make your own animated 2D games
Created byFrank Dvorak
Last updated 10/2024
English

What you'll 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

Course content

1 section • 38 lectures • 2h 53m total length

  • HTML & CSS setup1:36
  • Basic JavaScript setup2:17
  • Object Oriented Programming with JavaScript2:26
  • Creating Player & Game objects5:53
  • Animation loop3:17
  • Keyboard inputs9:39
  • Creating projectiles7:06
  • Periodic events5:08
  • Draw game UI2:49
  • Base enemy class7:58
  • Collision detection between rectangles5:17
  • Drawing game score3:14

    Define a ten-point winning score and end the game when surpassed, while rendering the score on the UI canvas with styled text and canvas shadows scoped by save and restore.

  • Win and lose condition2:02
  • Counting game time3:14
  • Animated parallax backgrounds10:13
  • Sprite animation with JavaScript3:42
  • Creating a debug mode1:36
  • Animating enemy sprite sheets6:37
  • Night Angler enemy class2:23
  • Lucky Fish enemy class1:21
  • Collecting power ups7:48
  • Drawing projectiles as images1:11
  • Custom fonts and game text2:41
  • Cleaning up2:08
  • Particle effects and physics12:12
  • Particle rotation3:43
  • Tweaks and fixes2:59
  • Hive Whale enemy class2:59
  • Drone enemy class4:43
  • Dust effect animation15:06
  • Fire effect animation1:28
  • Tuning game difficulty3:22
  • Bulb Whale enemy class1:57
  • Moon Fish enemy type2:40
  • Sounds6:41

    Create a JavaScript sound controller to rewind and play audio clips such as power, explosion, shot, hit, shield, and power down, linked via index.html.

  • Animated shield7:34
  • Animated projectiles4:09
  • What's next?2:01

Requirements

  • Basic knowledge of HTML, CSS & JavaScript is needed to follow this course
  • Access to code editor and internet browser

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:

  • 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. )

Who this course is for:

  • Beginner front end web developers curious about animation and 2D games
  • Coding students

Report abuse