Javascript 2D Game Development w/ HTML5 Canvas – Snake Game

Javascript for Front End Web App Development – HTML5 Canvas & CSS3 – 2D game development – create the game from scratch

Practice makes perfect. Start your journey into becoming a professional front end web developer here!

What you’ll learn

  • How to create a completely dynamic Snake game app with Javascript, HTML5 canvas and css.
  • How to design the game logic for the game and implement it as code.
  • How to improve your web app development, web game development & javascript skills.
  • How to improve your logical problem solving skills.
  • How to improve your front end design and development skills.
  • How to take your theoretical knowledge of Javascript to the next level by using it to build real world things..
  • How to get into real world web development and programming, in general..
  • The ins and outs of 2D web game development – create this game, and you’ll equip yourself with the tools to create any other 2D web game you want..
  • HTML5 canvas and how to use it to create 2D graphics for your games, websites and more..
  • How to manipulate your 2D graphics using Javascript, HTML5 canvas methods and Javascript DOM..
  • How to make things move in your game using Javascript..
  • How to create sophisticated mobile-friendly (responsive) designs using CSS3..
  • How to check for collision check in 2D web game development.
  • How to make scores and buttons work..

Course Content

  • Introduction –> 1 lecture • 8min.
  • Create the skeleton of the game – HTML5 –> 3 lectures • 25min.
  • [OPTIONAL] Javascript & HTML5 Canvas Basic Concepts (related to this project) –> 20 lectures • 2hr 37min.
  • Make the game playable – Javascript and HTML5 canvas! –> 9 lectures • 1hr 25min.

Javascript 2D Game Development w/ HTML5 Canvas - Snake Game

Requirements

  • You can come to this course with absolutely no coding knowledge. I explain everything you need to create your very first web app..
  • A PC or laptop to practice what I teach.

Practice makes perfect. Start your journey into becoming a professional front end web developer here!

At DigiFisk, we like making learning fun. Our courses are interactive and fun with a ton of practical elements to it. We’ve decided to take it a step further with our Web app development practice series.

Once you learn the syntax of a programming language, the next logical step is to start creating software and apps. But that’s where most students get stuck. Problem solving isn’t as easy as learning a bunch of syntaxes.

But we aim to make it easy for you.

In this course, you’ll learn how to build your own Snake Game App from the ground up with just HTML5 canvas, Javascript and CSS  in just a couple of hours.

You can be a complete beginner to HTML, CSS and Javascript, and you’ll learn the basics of everything, and create a portfolio-worthy Snake game at the end, to boot!

This is the perfect course for web development beginners, but if you know the basics, then this practical course would be the next step in your web development journey. If you’re a seasoned programmer who wants to create a new project to add to your portfolio, then this course is perfect for you. So, there’s something for everyone in this course.

 

What will you learn in this course? 

 

You’ll learn:

1. How to create a completely dynamic Snake game app with Javascript, HTML5 canvas and css

2. How to create the HTML5 structures of this game.

3. How to make the game pretty with CSS & CSS3 (design, design, design!)

4. How to make the game playable (solve problems) with logic and algorithm, i.e Javascript 

5. How to improve your front end design and development skills

6. How to improve your logical problem solving skills

7. How to take your theoretical knowledge of Javascript to the next level by using it to build real world things.

8. How to get into real world web development and programming, in general.

9. The ins and outs of 2D web game development – create this game, and you’ll equip yourself with the tools to create any other 2D web game you want.

10. HTML5 canvas and how to use it to create 2D graphics for your games, websites and more.

11. How to manipulate your 2D graphics using Javascript, HTML5 canvas methods and Javascript DOM.

12. How to make things move in your game using Javascript.

13. How to create sophisticated mobile-friendly (responsive) designs using CSS3.

14. How to check for collision check in 2D web game development

15. How to make scores and buttons work.

and so much more!

By the end of the course, you’ll be know how to create 2d web games like a pro. You could even try creating other web apps and games to test your knowledge.

 

Who is this game for?

This game is for you if:

1. You want to learn web development/web app development the fun way

2. You know the basics of web development and want to move to the practical applications of it.

3. You’re a web designer who wants to get into web development and Javascript fast.

4. You love learning by creating, and don’t like to listen to hours of theory, this course is for you

5. You’re completely new to programming and you want to get started by creating a fun project

6. You’d like to start creating your portfolio of web projects

 

How is this course designed? 

I’ve made this course as easy to understand as possible. I’ve structured it in such a way that each section will handle one of the 3 languages covered here.

Introduction: Every professional developer writes algorithms before creating a software or game. We’ll be writing the a step by step algorithm for our game, and I’ll be explaining what we’ll do in every step.

Module 1: I’ll also be teaching you how to create the bare bones of the app with HTML5. The result will be a page with all the elements we need in our game, devoid any colors or design elements.

Module 2: In this 3 hour module, you’ll learn the basics of Javascript, everything from variables to objects. Then, we’ll delve into the basics of HTML5 canvas and how to use it in your games.

Module 3: This would be the meat of the course. We’ll be delving into Javascript & HTML5 canvas code of our game in this module, and I’ll teach you how to make the game playable (let the user draw on the canvas and display the game results) in here.

Module 4: In this module, let’s make our game pretty with CSS and CSS3! You’ll learn a lot about responsive web development, aligning elements the right way to make them look good, and so much more.

 

This course is for you if:

1. If you like learning by doing rather than hours of boring theoretical lectures.

2. If you’re a complete newbie to the world of web development, or just programming in general, and would like to start creating software with the help of a beginner-friendly course. You’ll learn the basics of everything used in this project (HTM5, CSS3, Javascript, HTML canvas).  I’ll be explaining every single line of code I’ll be using in this course, so you won’t feel lost.

3. If you have the passion for programming, and know the basics of HTML5 and CSS, but you’re stuck on the practical aspects of it. Turn your theoretical knowledge into practical knowledge with our course.

4. If you want to delve into the exciting world of front end web app development, this course will take you a couple steps further in the right direction.

5. If you’re a Javascript web developer who just wants to try out a new project. Our course welcomes coders of every level, from absolute beginners, to pros.

So, what are you waiting for? Get this course today, and begin your journey into the wonderful world of web development and game development!