JavaScript Platformer Game Tutorial

Learn to make a platformer game using JavaScript and the Kaboom (Now called Kaplay) library.

(Instructions)
- Open the link
- Right click and save as
- Put the file in the libs folder

-- Chapters --

0:00 Intro
1:51 Setup
8:19 Creating Scenes
15:32 Creating The Menu
54:19 Creating The Controls Menu
1:08:36 Creating The First Level
1:53:54 Creating The Player + Camera
2:15:24 Refactoring The Camera
2:18:51 Implementing Player Controls
2:44:21 Implementing Player Respawning Logic
2:56:26 Implementing Player Passthrough Platforms Logic
3:03:15 Displaying Player Jump Up/Down Animations
3:22:47 Implementing Coyote Time for Jumps
3:39:27 Implementing Coin Collection
3:43:52 Implementing UI for Coin Count and Lives Count
4:07:56 Transitioning from One Level to Another
4:11:37 Creating The Second Level
4:21:47 Creating The Third Level
4:32:47 Implementing Spiders Enemies/Mobs + Their AI
5:27:28 Implementing Fish + Flames Enemies/Mobs + Their AI
6:01:10 Creating and Adding Axes Obstacles
6:19:59 Creating and Adding Saws Obstacles
6:34:33 Implementing Birds Enemies/Mobs + Their AI
6:55:38 Implementing GameOver Screen + Winning Screen
6:59:29 Adding Background Sounds
7:11:01 Conclusion

[fluffehKkura]

Incredibly late to this video but this is amazing! You’re the only one who made the installation and setup easy and seamless! Keep up the great work!!!

[_DadBy_]

Really cool! Hope the peeps at kaboom see and share this one! 👀

[brancode]

Awesome bro. Saving games or scorecards and with leaderboards will be great

[andersoncdz]

It was such an amazing class! Please keep bringing more classes like that!

[JuanPabloGomez-ccvm]

thanks!! you are so amazing, i love learn JS creating games

[rubin_wang]

Incredible, great tutorial, thank you for your effort

[udaramanula]

Waited for a tutorial like this . Thank you❤

[eitanbegayev]

amazing tut!, really love it - you are a great teacher!

[samg]

thank you so much!! you are the best!! Dont stop

[gaspare]

Just a little clarification, in 1:35:32 didn't you put "ml-2" because there are 4 vertical tiles in the tileset (as suggested in the sliceY: 4) meaning the "middle" part of the tileset is actually divided into 2? But you proceeded to just use "bl", "bm" and "br" so technically the bottom part of the tileset isn't actually available to use. I haven't finished the video yet so if this got fixed later on I'm sorry for bringing it up. Regardless, I'm loving the tutorial so far and hats off to you for dedicating so much time and effort. Keep it up!

[spinballmaniac]

Do you reccomend any books or resource to learn more about Kaboom.js? Or where to find more tutorials? I'll appreciate it!

[zunairaiftikhar]

I am facing difficulties in copying the assets and other folders and then pasting it into my file. Can you please guide me how can I paste the folders ....Eeven I don't see paste option in visuAL STUDIO

[srrcrvu]

hi jslegend dev or anyone reading I was following your tutorial and I'm at minute 8:17 (the beginning of the main.js coding) but if I open the chrome tab with the live preview the canvas is cut. if I use the chrome tab in half screen (half of the screen chrome and the other half vscode) the canvas is cut without resizing and on the right side, above and below it has white bands while if I use chrome in full screen in window (not fullscreen) the bands are above, left and right. only in fullscreen the canvas can work. (I see that you use firefox and for that you don't have problems or anything else. or it could be the screen resolution the problem my screen resolution is 1366 x 768) thanks for the answers in advance.

if there are any spelling mistakes I used google translate I'm not English

[daverichards]

Just getting started and your instructions and explanations are very clear, however, I get an error entering the kaboom function call in the main.js file 'Type annotations can only be used in TypeScript files.ts(8010)'

[fantasypvpvideos]

Do you think kaboom is the best library for this type of game? Are there other approachable alternatives? I'm just beginning and have been stunned by the sheer amount of libraries and packages available.

[nhathann]

to disable vscode from weird auto suggestion, you can edit your setting to false

[Lemon-Aid_]

Hi do you have any idea on how to colour the text? Ive been using white for a long time.

[thewalrusdragon]

I am having an issue where using the 1280x720 resolution will not fill the width of my screen. There is some blank whitespace on the right side, and I just cannot seem to figure out what to do. If I lower the width to 1000, it actually works, but looks somewhat distorted. Any ideas on why this is?

[katherinecarlos]

If I were to use different sprites would I replace them at the beginning or at the very end?

[adg]

Hey, was trying to follow along,
getting
Uncaught TypeError: Cannot read properties of undefined (reading ' ')

at
Level.js:19:
this.map.push(addLevel(layerLayout, layerSettings))

any one else faced this?