Uploaded February 2024 | Updated September 2026, 1 week ago

---

Download source code: code-laboratory.kit.com/ca3ea0d154

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 👽
Background (color): frankslaboratory.co.uk/downloads/137/background_single.png
Background (black & white): frankslaboratory.co.uk/downloads/137/background_single2.png
Player fish: frankslaboratory.co.uk/downloads/137/player_fish.png
Obstacles : frankslaboratory.co.uk/downloads/137/smallGears.png

Sounds (right click and 'Save link as'):
Charge: frankslaboratory.co.uk/downloads/137/charge.mp3
Flap 1: frankslaboratory.co.uk/downloads/137/flap1.mp3
Flap 2: frankslaboratory.co.uk/downloads/137/flap2.mp3
Flap 3: frankslaboratory.co.uk/downloads/137/flap3.mp3
Flap 4: frankslaboratory.co.uk/downloads/137/flap4.mp3
Flap 5: frankslaboratory.co.uk/downloads/137/flap5.mp3
Win: frankslaboratory.co.uk/downloads/137/win.mp3
Lose: frankslaboratory.co.uk/downloads/137/lose.mp3
(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)

Playlist: youtube.com/playlist?list=PLYElE_rzEw_tw6scwjv96oEABmnMSQoQW

🌌 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:
Checkpoint 1 (00:26:38): frankslaboratory.co.uk/downloads/137/source_code_1.zip

If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)
udemy.com/course/build-animated-physics-game-with-javascript/?referralCode=B4482AF631243104650B
udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2
udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7

udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB
udemy.com/course/creative-coding-deep-dive-for-beginners/?referralCode=F43E8FCE60957A64DF4A
udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E
udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01

Get Skillshare FREE for 1 month:
skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on

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