It's a lot of fun to take a tried and tested game concept and put your own spin on it. With these 5 techniques you can build thousands of different games. Let's build mobile games from scratch step by step using basic JavaScript and HTML canvas.

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

Download project art assets
Background (color): https://www.frankslaboratory.co.uk/downloads/137/background_single.png
Background (black and white): https://www.frankslaboratory.co.uk/downloads/137/background_single2.png
Player fish: https://www.frankslaboratory.co.uk/downloads/137/player_fish.png
Obstacles: https://www.frankslaboratory.co.uk/downloads/137/smallGears.png

Sounds (right click and 'Save link as'):
Charging: https://www.frankslaboratory.co.uk/downloads/137/charge.mp3
Flap 1: https://www.frankslaboratory.co.uk/downloads/137/flap1.mp3
Flap 2: https://www.frankslaboratory.co.uk/downloads/137/flap2.mp3
Flap 3: https://www.frankslaboratory.co.uk/downloads/137/flap3.mp3
Flap 4: https://www.frankslaboratory.co.uk/downloads/137/flap4.mp3
Flap 5: https://www.frankslaboratory.co.uk/downloads/137/flap5.mp3
Win: https://www.frankslaboratory.co.uk/downloads/137/win.mp3
Losses: https://www.frankslaboratory.co.uk/downloads/137/lose.mp3
(if you can't download the files, try using a different browser or VPN to change your country, also leave a comment so I can fix it)

Playlist: https://www.youtube.com/playlist?listPLYElE_rzEw_tw6scwjv96oEABmnMSQoQW

Contents of the tutorial
Basic project:
00:00:00 Create GAMES with JavaScript
00:00:37 HTML, CSS and JavaScript settings
00:05:21 Drawing on HTML5 canvas
00:09:29 Resize the 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 Wallpapers scrolling
00:35:59 Endless repeating backgrounds
00:40:43 Create obstacles
00:45:45 Positioning and moving obstacles
00:51:20 Count the score
00:55:38 Measure the time
00:59:40 Get the game over
01:01:14 Handling collisions
01:05:08 Detect collisions
01:07:47 Win or lose
01:09:35 Charging energy
01:11:07 Special skills
01:17:45 Time events with precision
01:22:37 Detect swipes
01:25:32 Finishing

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 Cleaning up
01:39:35 How to deal with noises
01:42:38 Manage player resources
01:44:28 Play random sounds
01:48:17 Polish every detail
01:50:19 Dynamic font size
01:54:22 What's next?

Source code:
Checkpoint 1 (00:26:38): https://www.frankslaboratory.co.uk/downloads/137/source_code_1.zip

If you would like to SUPPORT me, you can use the links below and take one of my EXTENDED classes! 🙂
https://www.udemy.com/course/build-animated-physics-game-with-javascript/?referralCodeB4482AF631243104650B
https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode69874A38D543D7F510F2
https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode2ACCA21F16FE78E631F7

https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode7C560D4661C5C59262BB
https://www.udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCodeF43E8FCE60957A64DF4A
https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCodeF7977062A4BC964A1F5E
https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode4C5821D2D04048CC4A01

Get Skillshare FREE for 1 month:
https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_refon&gr_trpon

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

Please take the opportunity to connect and share this video with your friends and family if you find it useful.