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 👽
Background (color): https://www.frankslaboratory.co.uk/do...
Background (black & white): https://www.frankslaboratory.co.uk/do...
Player fish: https://www.frankslaboratory.co.uk/do...
Obstacles : https://www.frankslaboratory.co.uk/do...
Sounds (right click and 'Save link as'):
Charge: https://www.frankslaboratory.co.uk/do...
Flap 1: https://www.frankslaboratory.co.uk/do...
Flap 2: https://www.frankslaboratory.co.uk/do...
Flap 3: https://www.frankslaboratory.co.uk/do...
Flap 4: https://www.frankslaboratory.co.uk/do...
Flap 5: https://www.frankslaboratory.co.uk/do...
Win: https://www.frankslaboratory.co.uk/do...
Lose: https://www.frankslaboratory.co.uk/do...
(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: • JavaScript Game Development Mastercla...
🌌 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): https://www.frankslaboratory.co.uk/do...
If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :)
https://www.udemy.com/course/build-an...
https://www.udemy.com/course/learn-ga...
https://www.udemy.com/course/remake-r...
https://www.udemy.com/course/learn-cr...
https://www.udemy.com/course/creative...
https://www.udemy.com/course/learn-ht...
https://www.udemy.com/course/learn-ht...
Get Skillshare FREE for 1 month:
https://www.skillshare.com/en/r/profi...
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
