Frogger Game with Vanilla JavaScript

Today we are going to take things we have have learned in this series so far – and create a bigger polished game you can show off on your coding portfolio or personal website. It is a remake of classic Konami arcade game released in 1981, it received a popular sequel for PC and PlayStation 1 in 1997 and there are multiple clones for this game concept like go chicken go. Let’s build FROGGER! 🙂

We will learn JavaScript by building games. I will teach you how to make a game with vanilla JS and HTML canvas element all from scratch with no libraries. We will focus on collision detection, keyboard input, frame-rate optimization and sprite animation, but every technique we learn can be used for other web development projects as well, not just for games. The skills and techniques I am about to teach you today will help you build your own unique games faster, but you can also apply them in any other JavaScript project, we are using pure vanilla JavaScript so everything we learn here are transferable skills.

Sprites & Backgrounds:

If this is the first time we’re meeting my name is Frank and I am a self taught front end web developer. I worked in a supermarket and call center here in London while studying vanilla JavaScript in my free time. I’ve been through many interviews for a self taught junior position until I got hired, if you want to talk about any of that and exchange our experiences leave a comment. I will leave some links for Udemy courses that helped me in my self taught journey so if you want, you can check it out.

Some of my favourite UDEMY courses:
Creative:
How to Program Games: Tile Classics in JS for HTML5 Canvas https://bit.ly/2ZUfKuG
Next Level CSS Creative Hover & Animation Effects https://bit.ly/3jEkzju
CSS / Webdev skills:
The Web Developer Bootcamp (Older but still very relevant) https://bit.ly/2ZZJM0d
Modern HTML & CSS From The Beginning (Including Sass) https://bit.ly/2Ec6Cch
Advanced CSS and Sass: Flexbox, Grid, Animations and More! https://bit.ly/3g0uqxT
Vanilla JavaScript from beginner to advanced:
JavaScript Basics for Beginners https://bit.ly/32Tn5wq
JavaScript: Understanding the Weird Parts (Basic JavaScript rules that will never change, must know) https://bit.ly/2WVe0zn
The Complete JavaScript Course 2020: Build Real Projects! https://bit.ly/3fXGwaZ
Modern JavaScript From The Beginning https://bit.ly/3fWJgWk
Object-oriented Programming in JavaScript https://bit.ly/3f4Otu0

Have fun coding 😀

Tools I use for creating / adjusting sprite sheets:
Adobe Creative Cloud, mainly Photoshop https://bit.ly/3e60cI0 (official Adobe website to buy Creative Suite applications)

Recommended book: Game Programming Patterns https://amzn.to/2ZlnplB (Amazon)
If you are really interested in game development check out this book. It’s written in pseudo-code so it can be used for any programming language, if you are able to follow this video you will be able to use this book. It covers game development concepts that will eventually help you how to create much more complicated games, frogger game we are building today is very basic, but it is a nice project for beginners to practice JavaScript on.

2 Comments

  1. Hi Frank,

    Firstly, thank you for sharing such amazing content on YouTube – they’re so helpful in understanding JavaScript better; and the project are so fun to make!

    I am currently studying to become a full stacked software developer in a certified course online, and am starting to think more about getting a job. Would you mind sharing your experiences in landing your first job? Is there anything you would recommend to compete against competition? And how difficult was it to land your first coding job?

    I have not yet finished my course and am debating whether or not part-time employment would be wise as I have minimum work experience and am anxious if this will make it harder for me to get a job once graduating (I can’t do full-time right now, as I need to complete my course to gain all the qualifications). I know HTML, CSS and am learning JavaScript more aptly with your videos – this is where my skill set is right now.

    I hope I have not taken up too much of your time. Any response you give would be greatly appreciated. Your video tutorials are the best tutorials on YouTube – thank you again for making them!

    Have a great day.

    All the best,
    Ellen

  2. how do i download this

Leave a Reply