This a perfect tutorial for getting into JS. It ramps up in difficulty and adds new concepts at the perfect rate. Your delivery and pacing is just perfect! I’m totally going to use this video for my web design class. They’ve been asking about JS, and after I go over the basics of variables, listeners, functions/methods.. etc, I’m absolutely using this to get their feet wet. Thank you for making this! I’m straight up giddy about it lol
Oh wow this is awesome! Thanks so much for leaving this comment! I have a more in depth tutorial in kaboom.js where I go through some methods first if you want to check that out as an intro! It’s in FreeCodeCamps channel and the link to it is in the description :)
I've been a professional dev for a long time but these code along videos are so fun. One of the first things I ever tried to make was the elevator board from the original Donkey Kong - but the only thing I knew how to do was to turn off and turn on pixels and some idea of how to do a naive collision detection... I ran out of memory before I could make a functioning level out of it (I could actually jump on and off the elevators - but there was no way to "complete" the level) because I knew nothing of programming techniques at all and 16kb wasn't enough for all the spaghetti I wrote... but it was fun trying.
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life.. th-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
0:00 Introduction 1:35 Coding starts 5:43 Layers and sprites 15:53 Placing sprites on the first level 21:30 Adding Mario 25:08 Keyboard events 27:50 Making Mario big 30:51 Coin and mushroom 40:02 Let's make the little guys move 47:45 Go to the next level 51:25 New level map 58:11 Final result
Common errors: Please make sure you are using the same version of kaboom that I am in the video. (Version 0.5.0). What I mean by this is when we take the script tag from kaboom, make sure it contains '0.5.0' in the url. There has been a new version of kaboom that has come out and they have removed the start() method and replaced it with go(). For more help, view this short: th-cam.com/users/shorts6b4Vdjp0iBI If you are new to Kaboom I would suggest watching the FULL COURSE where I explain each method before diving in to the game creating. Link in the Description. :) In it I go through all the main methods one by one, before using them to build Space Invaders, Mario and Zelda.
I was having trouble with my code and then I realized that for some reason start("game") throws an error, but I realized I was using the latest version of Kaboom, do you know what the new method for starting the game is?
If you are new to Kaboom I would suggest watching the FULL COURSE where I explain each method before diving in to the game creating. Link in the Description. :) In it I go through all the main methods one by one, before using them to build Space Invaders, Mario and Zelda.
This was a great tutorial, I barely got stuck following you coding and nothing that a quick rewind couldn't fix, it's also great that you tested out each segment frequently so it makes it easier for us following to test and see if everything is ok (this is something Udemy instructors could copy ! ). I will definitely add more features to this version of Mario and check the other games as well as maybe trying Unity. This was a fun afternoon well spent :) Thanks Ania, cheers from an Argentinian living in New Zealand !
The only thing I couldn't figure out is why it worked perfectly on Microsoft Edge but it wouldn't on Chrome ... somehow Mario falling from the sky wasn't smooth (on chrome it's like 5 fps) and he goes through the floor into limbo ... maybe javascript is breaking somehow. Anyways, thank you !
*Couple updates in Kaboom* -'headsmash' is now 'headbutt' -anything with a 'solid()' must also have 'area()' - this includes your player -'start' is no longer defined, use 'go' to start your scene I think there was a couple more but I forgot, but coding along was more challenging with these updates
@@passionthevirgo Hey, make sure you closed your parenthesis correctly in the levelCfg variable definitions for each sprite, had the EXACT same problem. It should be like this: '=': [sprite('block'), solid()], .... instead of this: '=': [sprite('block', solid())], ... otherwise the code breaks when it compiles apparently and instead of showing an error Mario just falls off the screen through the blocks (ignoring 'solid' property). I hope that works for you ! ;)
I dont know how much I can say "thanks you" to you for this video. Thanks you verry mutch, you maid me sooo happy this morning. Thanks you for this videooo!!
Just finished coding this Mario, took awhile but was worth it. I'm going to use this and redo Jump Joe, a game I played in the 80's. So thanks again Ania look forward to your next video, *Cheers* : )
In our childhood we just played this game for hours like its just a game, didn't know it takes this much of work to make a single stage, Jesus Christ! Salute to developers!!! Loved your video Ania
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life.. th-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life.. th-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
You make it look easy. I learned dos some about 30 years ago. I was young and made a program that would answer questions for you. If you asked the right ones of course. Makes me wanna code.
Awesome project! In order to avoid "403 ERROR" while loading the sprite images from imgur if on a 127.0.0.1 live server place this meta tag in your html head:
Hey Ania, totally random tip but you can open an html page from vs code by doing option + B. Totally random littl e tip. Thank you for such an awesome video. Love your work!
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life.. th-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
If anyone is struggling to find the sprites (I attempted to crop my own and failed) follow the Imgur link in the video description. Love this video though, I'm learning lots and it's just as addicting to build your own game as it is to play it :D
As excited as I am to learn this, I have to admit I died a little inside when she called a goomba an evil mushroom, and a question box a "surprise box".
Would it be possible to explain how and why each line is written. For example at the start you added global:true (and others) without explaining what it is. Same for when you changed the background colour, what colour code format was that? Would also love to see an overall architecture as to how the project will shape up at the start. Knowing what the goal is would be amazing!
I don’t know if someone had the same issue but at 1:00:22, My Mario Sprite falls through the blocs instead of landing on it I can’t find nothing on google
incredible video there again and again Kubow :D and i would like to tell you your videos are super great and the amount of efforts there making and also more in the preparation of making such video takes a tonnes of prep work and experiences and your video also help so many people do continue making great contents like this one, i had learned the API process from you as well and its super good :) how did you prepare to make sure a good video , very detailed and clear as well, thats the most important and again incredible efforts there keep up the fantastic works there i think the world is your playground now congrates :D doing the things you like
Learning how to code Mario taught me about sub-pixels since I was actually trying to duplicate the physics used in the original game. Sub-pixels are just fractions of a pixel.
Great tutorial, simple, clear and great base for creating own playable game. I've got only one question: how to flip player going left? player.flipX(true/false) and player.flipX = true/false is not working.
@@prakashjay5785 I've managed to do this on kaboom version from this tutorial but sorry, I don't remember how. I think it was "changeSprite", you can also do it by animations. I suggest to use current kaboom version - documentation is up to date so older kaboom version are not compatibile.
Jak długo zajęło Ci przyswojenie wszystkich informacji? dopiero co zaczynam, ale bardziej liczę na kursy jak studia. można by rzec, że jestem samoukiem.
45:15 Why isn't a check here if player is grounded sufficient? I actually tried it and it doesn't work, player.grounded() returns true although the player is still in jump! EDIT: looks like it works, I just had to delete the solid() function from evil mushrooms. Probably if they are solid, the player.grounded() evaluated to true on top of them. And also I can't pick the biggify mushroom when approached from the left side, Mario just pushes it before him. From the right it works as expected.
This a perfect tutorial for getting into JS. It ramps up in difficulty and adds new concepts at the perfect rate.
Your delivery and pacing is just perfect! I’m totally going to use this video for my web design class.
They’ve been asking about JS, and after I go over the basics of variables, listeners, functions/methods.. etc, I’m absolutely using this to get their feet wet.
Thank you for making this!
I’m straight up giddy about it lol
Oh wow this is awesome! Thanks so much for leaving this comment! I have a more in depth tutorial in kaboom.js where I go through some methods first if you want to check that out as an intro! It’s in FreeCodeCamps channel and the link to it is in the description :)
@@aniakubow Awesome Ania. We need more Girl Power !
i felt being 7-year old kid again and this kid is so fascinated and happy right now!! Thank You !:)
@Pierce I'm simping for Super Mario 8bit, Yes!!
I've been a professional dev for a long time but these code along videos are so fun. One of the first things I ever tried to make was the elevator board from the original Donkey Kong - but the only thing I knew how to do was to turn off and turn on pixels and some idea of how to do a naive collision detection... I ran out of memory before I could make a functioning level out of it (I could actually jump on and off the elevators - but there was no way to "complete" the level) because I knew nothing of programming techniques at all and 16kb wasn't enough for all the spaghetti I wrote... but it was fun trying.
may i ask you what is portfolio? in a recent graduate of computer science.
thank
This is Rad, cheers Ania, I'm sure loads of us old 80s boys appreciate you doing this tutorial.
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life..
th-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
Just as I thought of quitting coding, you ignited my passion again. Thanks a billion times..
THANK YOU THANK YOU! I followed the tutorial closely and now I have a game to share with my nephew who loves Mario. You are a wonderful teacher!
0:00 Introduction
1:35 Coding starts
5:43 Layers and sprites
15:53 Placing sprites on the first level
21:30 Adding Mario
25:08 Keyboard events
27:50 Making Mario big
30:51 Coin and mushroom
40:02 Let's make the little guys move
47:45 Go to the next level
51:25 New level map
58:11 Final result
Thanks do much for sharing this! Do you mind if I put it in the description?
@@aniakubow Not at all, go ahead!
Common errors: Please make sure you are using the same version of kaboom that I am in the video. (Version 0.5.0). What I mean by this is when we take the script tag from kaboom, make sure it contains '0.5.0' in the url. There has been a new version of kaboom that has come out and they have removed the start() method and replaced it with go(). For more help, view this short: th-cam.com/users/shorts6b4Vdjp0iBI
If you are new to Kaboom I would suggest watching the FULL COURSE where I explain each method before diving in to the game creating. Link in the Description. :) In it I go through all the main methods one by one, before using them to build Space Invaders, Mario and Zelda.
are you a dev???
I cant believe it
I was having trouble with my code and then I realized that for some reason start("game") throws an error, but I realized I was using the latest version of Kaboom, do you know what the new method for starting the game is?
how do we install kaboom ?
@@EdwinOrellana I think it’s go :)
@@louisthepuddle7196 we use the script for it by copying the script tag :)
TH-camr: creates a tiny Mario game for teaching and learning purposes:
Nintendo: Outrageous! You're sued!
🤣🤣
If you are new to Kaboom I would suggest watching the FULL COURSE where I explain each method before diving in to the game creating. Link in the Description. :) In it I go through all the main methods one by one, before using them to build Space Invaders, Mario and Zelda.
Thanks, Khalesi for the course!
hey do you want to see my C skills babe, come closer to me ;-)
her eyes are to die for omg. they look like sapphire.
This was a great tutorial, I barely got stuck following you coding and nothing that a quick rewind couldn't fix, it's also great that you tested out each segment frequently so it makes it easier for us following to test and see if everything is ok (this is something Udemy instructors could copy ! ). I will definitely add more features to this version of Mario and check the other games as well as maybe trying Unity. This was a fun afternoon well spent :) Thanks Ania, cheers from an Argentinian living in New Zealand !
The only thing I couldn't figure out is why it worked perfectly on Microsoft Edge but it wouldn't on Chrome ... somehow Mario falling from the sky wasn't smooth (on chrome it's like 5 fps) and he goes through the floor into limbo ... maybe javascript is breaking somehow. Anyways, thank you !
Dream come true. I completely forgot to code a sidescroller when I grew up. My inner 10 year old thanks you.
*Couple updates in Kaboom*
-'headsmash' is now 'headbutt'
-anything with a 'solid()' must also have 'area()' - this includes your player
-'start' is no longer defined, use 'go' to start your scene
I think there was a couple more but I forgot, but coding along was more challenging with these updates
Thanks for providing these for everyone!
dang, so that's why he keeps falling through the stage.
okay, never mind
@@passionthevirgo Hey, make sure you closed your parenthesis correctly in the levelCfg variable definitions for each sprite, had the EXACT same problem. It should be like this: '=': [sprite('block'), solid()], .... instead of this: '=': [sprite('block', solid())], ... otherwise the code breaks when it compiles apparently and instead of showing an error Mario just falls off the screen through the blocks (ignoring 'solid' property).
I hope that works for you ! ;)
I dont know how much I can say "thanks you" to you for this video.
Thanks you verry mutch, you maid me sooo happy this morning. Thanks you for this videooo!!
Just finished coding this Mario, took awhile but was worth it. I'm going to use this and redo Jump Joe, a game I played in the 80's. So thanks again Ania look forward to your next video, *Cheers* : )
Yes! Jump Joe was a favorite of mine back in the day.
This type of video is absolute genius, Dont Ever! quit it, u "are" the future of learning
Thanks!
this is going to be my next project for sure
I am speechless, we appreciate your efforts!
In our childhood we just played this game for hours like its just a game, didn't know it takes this much of work to make a single stage, Jesus Christ!
Salute to developers!!!
Loved your video Ania
U re the reason why i m not failing my web dev and web services class, thank you ❤️
This is genius, this library is a nice choice when you don't feel like using Unity for a simple game
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life..
th-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
Nice video ania ! , it was so much fun to watch this
No i z takiej Polki jestem dumny :D Super materiał.
Ahh dziękuje!!! 🥰🥰🥰
Just got this in my recommended list. Gonna try it out this weekend, thanks
Thank you Ania for this material! Greetings from Poland :)))
I've never thought not in my most naive dreams that someday I would learn JavaScript from Galadriel herself.
Awesome job my lady!
That was really cool and looks relatively straight forward. Thanks for sharing.
Ania I love your videos, please make a whole series making one bigger and complete game.
Great stuff! Thanks for the great tutorial, it was extremely clear.
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life..
th-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
@@الإسلامدينالحق-خ5ت شو بتساوي هان
I only start watching your video and feel really excited about possibilities I will can learn
I am looking forward to this. It makes me want to go and play some retro games 🌞
You make it look easy. I learned dos some about 30 years ago. I was young and made a program that would answer questions for you. If you asked the right ones of course. Makes me wanna code.
Obrigado!
Thank you so so much Jorge! This is super kind of you ❤️
it is very eye and brain pleasant to watch your tutorials. wish you the best.
I've been waiting all my life for this :) or at least a few few moments ago when I saw that you are doing it . I love mario cant wait .😊
It is amazing that nowdays, a 1 hour tutorial can teach you how to creatre basically what was half of an entire AAA game 40 years ago.
It is way distant from half of the game... To be fair it's less than 10%, that's still very impressive.
you are a genius in programming 👏
Great video, Ania! 👍
Love you, Ania 🖤 and love your work. You’re awesome.
Super simple gaming framework with off the shelf tooling...well worth the time watching your codealong to get a flavor. Thanks!
Awesome project! In order to avoid "403 ERROR" while loading the sprite images from imgur if on a 127.0.0.1 live server place this meta tag in your html head:
Thanks for this great tip Diego!!
Thanks Ania 👍🏻🙂🌿
i am so proud of you create game from JS
Awesome as always Ania. Thanks 👍☺️
Thanks as always Ranga!
I recently discovered your channel. Awesome!
wow it was super interesting how you drew the UI using symbols, I've been waiting for a good game making js framework, excited to try this out myself!
Díky!
Thank you so much! This is so kind of you !!
first time in your channel and I sub in 10 secs
Hey Ania, totally random tip but you can open an html page from vs code by doing option + B. Totally random littl e tip. Thank you for such an awesome video. Love your work!
You tought me more about game design than an entire college semester and 600 page book
Awesome Ania!
Thanks for this tutorial. This is small step for me towards game development. Thanks a bunch. Ania.
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life..
th-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
@@الإسلامدينالحق-خ5ت My Friends, Shutup
Thanks a lot Ania for such a great tutorial. I definitely enjoyed it and can't wait to play around with the code.
This seems a lot of fun. Thanks Ania. 😄👍
If anyone is struggling to find the sprites (I attempted to crop my own and failed) follow the Imgur link in the video description.
Love this video though, I'm learning lots and it's just as addicting to build your own game as it is to play it :D
Hello Ania, can you help me how to change direction of move for mushrooms when hit the wall? Thank you :)
As excited as I am to learn this, I have to admit I died a little inside when she called a goomba an evil mushroom, and a question box a "surprise box".
😝😝😝 il use the correct names next time hahaha
I am a simple man i see Ania + Javascript i hit the like button ✌️✌️✌️
didn't know about kaboom and it's genius 🤩🤩🤩
Eagerly waiting.
I was looking for something like this.
Thanks 😊.
This is awesome to watch! Love it!
Would it be possible to explain how and why each line is written. For example at the start you added global:true (and others) without explaining what it is. Same for when you changed the background colour, what colour code format was that?
Would also love to see an overall architecture as to how the project will shape up at the start. Knowing what the goal is would be amazing!
I have a full course on kaboom on the FreeCodeCamp channel :)
I don’t know if someone had the same issue but at 1:00:22, My Mario Sprite falls through the blocs instead of landing on it
I can’t find nothing on google
incredible video there again and again Kubow :D and i would like to tell you your videos are super great and the amount of efforts there making and also more in the preparation of making such video takes a tonnes of prep work and experiences and your video also help so many people do continue making great contents like this one, i had learned the API process from you as well and its super good :) how did you prepare to make sure a good video , very detailed and clear as well, thats the most important and again incredible efforts there keep up the fantastic works there i think the world is your playground now congrates :D doing the things you like
Amazing video! thanks for you xplanation, greatings from México :)
Awesome videos! Learning JS is fun with Ania!
I was late.. but as kaboom.js demo was kaboom :D I am definitely going to try this out... thanks..
❤️❤️❤️
you are a genius. I send you a greeting from Uruguay
What are the programming language you can write Ania?
Including the hypertext
Congratulations! It is a really fun vídeo, thank you!
Great information and an even better tutorial! Thanks!!
Love your tutorials. Thank you for this.
This is awesome. Games are the best way to code.
Beautiful blue eyes.
Your channel inspired me to get serious about my tech channel.
Really nice, please make a roguelike / dungeon crawler in Kaboom.
i made one roguelite baltazarparra.github.io/dark-pixels/
Would you please create a quiz app with image ?
Learning how to code Mario taught me about sub-pixels since I was actually trying to duplicate the physics used in the original game. Sub-pixels are just fractions of a pixel.
you're so blessed with that knowledge mam
Well done: very interesting and so well explained. Thank you!
Tried following along, but for some reason most of the sprites failed to load. Anyone else have the same problem?
Thrilled!🎉
What are you looking at using as an alternative to vscode? was it a hint of changing ide?
I love your tutorials!
thank youuuu!!
Amazing work.Thank you!
What would be the easiest way to add some animation to the creation and destroy of objects?
The new Super Mario game looks great!
kaboom is doing a ton for you. Cool simple coding for a mario game though
really fun and entertaining tutorial!! only problem I had was you calling Goombas "evil-mushrooms" like wtf? 😂😂😂
😂😂😂
Thanks for sharing such amazing content! Sure I liked and subscribed!!
ого! неожиданно и круто!
wow! unexpected and cool!
Great tutorial, simple, clear and great base for creating own playable game. I've got only one question: how to flip player going left? player.flipX(true/false) and player.flipX = true/false is not working.
Got any update on this??
@@prakashjay5785 I've managed to do this on kaboom version from this tutorial but sorry, I don't remember how. I think it was "changeSprite", you can also do it by animations. I suggest to use current kaboom version - documentation is up to date so older kaboom version are not compatibile.
Jak długo zajęło Ci przyswojenie wszystkich informacji? dopiero co zaczynam, ale bardziej liczę na kursy jak studia. można by rzec, że jestem samoukiem.
Omgah!! EPHIIIICCCC!?!? Homemade Mario!? 🤯
This looks awesome. Thank you
You are awesome, a great video!
Thanks so much for watching Chavez!
Nice work !
45:15 Why isn't a check here if player is grounded sufficient? I actually tried it and it doesn't work, player.grounded() returns true although the player is still in jump!
EDIT: looks like it works, I just had to delete the solid() function from evil mushrooms. Probably if they are solid, the player.grounded() evaluated to true on top of them.
And also I can't pick the biggify mushroom when approached from the left side, Mario just pushes it before him. From the right it works as expected.
have you found the answer for the left side problem ? i can't figure it out, it drives me crazy, i tried many things ! Thanks
That's great! Thank you very much for your videos
Very cool project! 🤩