Side-Scrolling Games (JavaScript tutorial)

Published: 09 February 2024
on channel: Franks laboratory

51,178

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

On this page of the site you can watch the video online Side-Scrolling Games (JavaScript tutorial) with a duration of hours minute second in good quality, which was uploaded by the user Franks laboratory 09 February 2024, share the link with friends and acquaintances, this video has already been watched 51,178 times on youtube and it was liked by 1 thousand viewers. Enjoy your viewing!

13,912

323