Side-Scrolling Games (JavaScript tutorial)
Download source code: https://code-laboratory.kit.com/ca3ea...
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 Masterclass 2024
🌌 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
Auf dieser Seite können Sie das Online-Video Side-Scrolling Games (JavaScript tutorial) mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Franks laboratory 09 Februar 2024 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 51,178 Mal angesehen und es wurde von 1 tausend den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
