JavaScript Game Development for Beginners: Sprite Animation

Learn how to animate any sprite sheet and practice vanilla JavaScript at the same time.
English
English [Auto]
How to use vanilla JavaScript to animate any sprite sheet for interactive web games and animation projects.

Requirements

  • Basic knowledge of HTML, CSS and JavaScript

Description

Do you want to build polished, beautiful JavaScript games and bring your game characters to life? Let me show you 2 of my favourite techniques you can use to get complete control over any sprite sheet. This is advanced vanilla JavaScript sprite animation, explained for beginners! Have fun :)


Adding animated sprite sheets to your JavaScript games is one of the fastest and the most impactful ways to bring your games to the next level and to add that professional look and polish you want. Games with sprites are great at pulling your audience into the fantasy you are trying to create and they are also really fun to make. Today I will show you everything you need to know about sprite animation with vanilla JavaScript and by the end of this course, you will be able to have complete control over any sprite sheet you choose.


I will show the easiest beginner friendly sprite animation technique first and then we will go a bit deeper and learn how to properly set up different player animations, so we can swap between them by changing just one variable and use it in our game. Do you want to learn more about 2D game development? Have you been learning HTML, CSS and JavaScript for a while and want to bring your front end web development projects to the next level? Then this course is for you. Let's dive deep into JavaScript game development and learn about sprite animation together. This course is for beginners.

Who this course is for:

  • Beginner JavaScript developers who want to practice their skills on fun interactive projects.

Course content

1 section8 lectures45m total length
  • Introduction, project preview, HTML CSS setup
    02:03
  • Basic JavaScript setup
    03:03
  • How to create animation loop
    02:36
  • Built-in drawImage() method explained
    04:44
  • How to navigate within sprite sheet with JavaScript
    04:09
  • Simple sprite animation technique for beginners
    06:40
  • Advanced sprite animation technique
    19:13
  • Sprite animation practice project
    03:03

Instructor

Front End Web Developer & Instructor at Frank's Laboratory
Frank Dvorak
  • 4.6 Instructor Rating
  • 59 Reviews
  • 2,282 Students
  • 2 Courses

Hi, I'm Frank! I'm a self taught front end web developer, owner of Frank's laboratory, a web development YouTube channel that specializes in creative coding with vanilla JavaScript and HTML canvas. In my courses we focus on building visual projects while explaining how things work and learning about HTML, CSS, JavaScript and front-end web development in the process.