Side-Scrolling Games (JavaScript tutorial)

It's really fun to take a proven game concept and put your own spin on it. Using these 5 techniques, you can build 1000s of different games. Let's built mobile games completely from scratch step by step with vanilla JavaScript and HTML canvas.

Main features:
- fully responsive and playable on ANY DEVICE (mobile, tablet, ultra wide screens)
- win condition: time run
- player resource: rechargeable energy
- special ability: speed boost
- player character: Flappy Fish / Antigravity Boar

👽 Download Project Art assets 👽

Sounds (right click and 'Save link as'):
(if you can't download the files, try to use a different browser or VPN to change your country, also leave a comment so I can fix it)

🌌 Tutorial Contents 🌌
Basic project:
00:00:00 Make GAMES with JavaScript
00:00:37 HTML, CSS & JavaScript setup
00:05:21 Drawing on HTML5 canvas
00:09:29 Resizing HTML5 canvas
00:15:55 Dynamic scaling
00:20:39 How to code gravity
00:26:38 Player controls
00:28:50 Keyboard controls
00:30:49 Scrolling backgrounds
00:35:59 Endless repeating backgrounds
00:40:43 Create obstacles
00:45:45 Position and move obstacles
00:51:20 Count score
00:55:38 Measure time
00:59:40 Handle game over
01:01:14 Handle collisions
01:05:08 Detect collisions
01:07:47 Win or lose
01:09:35 Recharge energy
01:11:07 Special abilities
01:17:45 Time events with precision
01:22:37 Detect swipes
01:25:32 Finishing touches

Steampunk flappy bird game:
01:28:01 Animate your creatures
01:31:00 Make it more steampunk
01:33:21 Animate player actions
01:37:27 Clean-up
01:39:35 How to handle sounds
01:42:38 Manage player resources
01:44:28 Play randomized sounds
01:48:17 Polish every detail
01:50:19 Dynamic font size
01:54:22 What's next?

Source code:

If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)

Get Skillshare FREE for 1 month:

The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory

[sebastianbrunobautes]

I speak Spanish and understand English a little, but I can safely say that I have learned much more from your videos than the kind of content I can get in my native language.

[lawleds]

You are sir, not only a great programmer, a great person as well for sharing all these stuff. I’m grateful.

[khajiit]

This was very helpful for me to get used to object oriented style programming in JS and using canvas, thank you!

[adrianw]

This really helps with my understanding of JS. Thank you for your uploads

[greenparksquad]

man, your code is so pleasant to watch. clear code style, nice variables and function names and most important - you choose simplest ways to solve problems, it is so easy to understand, no complex algoritms

[adriaanboshoff]

Thank you so much. This was the most fun tutorial I've done in a long time. Added my own art and sounds, and will look at your other tutorials to see how I can improve it. Maybe a menu, high scores and some levels with different difficulty (increase speed and obstacle size)

[vladyslav-py-js-go]

Thank you for this wonderful tutorial! You rock! 😁

[JuanPabloGomez-ccvm]

It's really great these tutorials about mobile games with JavaScript!

[bestiafera]

Loved it, just finished :). would be cool to see how to implement the buttons (r, f, d), will continue working on this game perhaps making levels, adding pause button, sound on and sound-off, also initial sceen with controls explanation. Thanx a lot!

[davdev]

Amazing video! Hey Frank, did you ever thought for next videos on making a tutorial on a classic role play game with base 3d? Something like Daggerfall or maybe the original Doom, using sprites for enemies and NPCs. I would be thrilled to learn how to make that!

[Musfiq]

Amazing, plz make webgl related content, waiting for long time, literally I was hoping.... one day you make webgl things

[swedishpsychopath]

First I have to say: Your videos are TOP QUALITY in every way. Pedagogically, it cannot be done better and it is impossible not to understand what you explain. There is not ONE javascript statement that is out of place and there are not "cargo cult" statements that you do not understand. But best of all: NO LIBRARIES. To create visual teaching material combined with exactly what we need of oral information is an art and you master it to the full. There's no "uh" or "oops, I wrote it wrong", or "forget what I said - here's the right thing". Everything is perfect from A to Z. It must take an extreme amount of hours to make videos like this. So thank you very much! So to the question: Do you have any videos where you show how to get "live video stream" from the web camera where you manipulate video data "realtime" with plain javascript to present on HTML canvas?

[andrzejgrabowski]

Many thanks. You are an amazing teacher, instructor and person. Your videos help me a lot.

[smicolon]

Sir, your channel is sooo underrated. 😢
But, I love u
Your work is always amazing. 😊

[gideonting]

OH MY GOODNESS thank u so much for this free tutorial u are literally amazing!!! Also, just wondering, how do u er get this onto your phone? i tried to extract my zip file onto a folder on my phone but when i opened the html file, i think the backgrounds and all the css and js didnt load? am i supposed to find a way to host this on a website then open it on my phone browser? or am i supposed to build one of those apk file thingys? (im so sorry if these are very dumb questions im new to this haha)

[mr.holmes]

Thanks for these amazing lessons frank ❤

[rachitshukla]

Didnt get that setTimeout thing at 1:56:00 why the wingsUp was not working on mobile

[irfansaeedkhan]

wow so i can directly watch this, awesome

[laptoprelaks]

heyy this is nice and easy to understand….i used to learn lua and gml for game making but i was too lazy… but i want to learn gamedev again with javascript because i want to learn frontend dev too

[Barnardrab]

The Game class didn't need to have instance attributes. The same applies for any state for which there is only one instance. You could have used the static keyword.

Also, there wasn't any need to pass the Game object to the Player constructor because that could have been accessed within the body of the constructor.