Mario Game Tutorial with JavaScript and HTML Canvas
Get the rest of the game early at: chriscourses.com/mario-game-c...
Make your own animations with the Deekay Tool: aescripts.com/deekay-tool/
Creating a sidescroller type Mario game requires a bit of knowledge related to physics, collision detection, and sprite animation. It can be quite tricky at first, but once you understand the basics, you can set up some full-fledged levels which anyone can play.
This tutorial will teach you everything you need to know in regards to developing a fully functional Mario-type game with just HTML5 canvas and vanilla JS.
Canvas Boilerplate: github.com/christopher4lis/ca...
Image Assets: drive.google.com/drive/folder...
0:00 - Project setup
5:49 - Player creation
12:20 - Gravity
20:40 - Player movement
35:43 - Platforms
43:42 - Scroll the background
53:46 - Win scenario
56:38 - Image platforms
1:14:09 - Parallax scroll
1:24:12 - Death Pits
1:29:46 - Level creation
1:40:49 - Fine tuning
1:42:56 - Sprite creation
Was looking to do something like this in this weekend, thank you Chris!
Excellent way to learn how to download the game without any inconvenience, very easy to follow the steps you indicate 👍
Purchasing your course now brother. There is literally nowhere else that teaches you how to do this. Thanks man!
This is one of the best tutorial I've ever seen, thank you so much for your hard work
Oh maaan, I've been waiting for this!! Thanks Chris, looks dope
Didn't know there is so much you can do with HTML5 Canvas + JS. Its powerful. Thanks for the video Chris
Can we fill in love?
@@vincentgallagher_ I must say Chris deserves way more subscribers his videos are super helpful.
You've definitely made coding fun for me. Please keep making these games and you're a great instructor.
I reaaaally love how you scale up the complexity of the game very very cautious and carefully, introducing concepts with as much depth as necessary instead of just dropping concepts in randomly. That makes your tuts really outstanding. Hope you will also do more on BabylonJS again :D
chris is a great teacher, I learned so much from how to use the things ive learned from courses and such in objects and functions etc
I have been following and watching the playlist you created for HTML 5 canvas and I just pause here and say a big Thank you for this content Chris, I’m learning soo much ❤ Even tho I know ThreeJs, learning concepts like collision detection was a real step up for me, God bless you man
thx for yet another excelent tutorial! I'm loving your lessons, programming has been fun once again ^^ tip, for death pits u could just reset player Y and X position back to 0, 20 to get back where u started on the screen. and reset objects to their positions so the entire screen gets realocated to their original position, too. reset objects first, or else your player could land on another death pit and fall into a loop depending how u designed the level. it fits all kinds of levels this way.
I've just found your channel and love it and your tutorials. Big thank you for making this content 🙂
not sure if this is mentioned but "keyCode" is deprecated. New solution: document.addEventListener('keydown', (event) => { console.log(event.key) switch (event.key){ case 'a' : break case 's': break case 'd': player.velocity.x += 1 break case 'w': player.velocity.y -= 20 break case 'ArrowLeft' : break case 'ArrowDown': break case 'ArrowRight': player.velocity.x += 1 break case 'ArrowUp': player.velocity.y -= 20 break } })
Seus vídeos me ajudaram muito, obrigado pelo excelente trabalho!
The only programming tutorial I've watched from start to finish without taking a break! Very fun tutorial!
Have been following your canvas game tutorials so I can make games for my daughter and also get her interested in programming. Thank you Chris
do u how to deploy it?
Chris! your voice is so relaxing when I wasn't falling asleep I just watched your tutorial and in the next 5 mins, I fell asleep lol. anyway, good job I really love the way you teach.
Hahah thanks man, I remember my first few vids I released I actually had a few people complaining about my voice. Glad to hear perception has changed over the past few years 😆
@@ChrisCourses your voice is strange. JK. As a rather good programmer this is still informative because we can see some techniques which are not learned yet or spot an improvement of our own code. Thanks for that! :)
No
@@XILikeTrainsX yss
You have financial worries and you want to make a loan. Contact We offer financial loan from 4000 € to 100000 € with an interest rate of 1.5%. The hard for reimbursement of the maximum loan is 160months. Interested contact us
One of the best tutorials for javascript game development. It's a lot of fun to follow along your tutorials.
You're fast and you're informative. Really enjoying your content.
Great tutorial! Thank you so much! It helps me kickstart my Javascript learning journey. Just want to add a little tweak I did on my attempt. If you hold the "UP" key, it will make your "player" kind of flying. I added *if (event.repeat) { return }* to prevent holding the *UP* key sending the player flying. It goes something like this: addEventListener('keyDown', ({ keyCode }) => { switch (keyCode) { case 38: if (event.repeat) { return } player.velocity.y += -20 break } }) note: I bind the key *UP* instead of *W* hence the *case 38*
thankyou!! This was really helpful, I also realized that mistake!! salam dari indo juga :)
That fixed the problem for holding UP but what about for tapping up? Must be something with setTimeout?
@@MuskyDoge did you find a fix for this?
Found a fix for the double, triple quadruple jump issue! I created a new condition on the Player class called 'onPlatform' and set it to true by default. This condition will return true if the player is touching a platform and false if the player if not touching a platform. To do this I wrote a small conditional within the player.update() function which goes like this: this.velocity.y !== 0 ? this.onPlatform = false : this.onPlatform = true Then in the addEventListener case statement for "keyDown" I amended the "w" case like so: case "w": case " ": case "ArrowUp": player.onPlatform === true ? player.velocity.y -= 15 : null break; No the player wont be allowed to take more than one jump :D
@@ruairidhgrass3479 if (player.velocity.y === 0) { player.velocity.y -= 25 } spent hours trying to solve that lol
I am waiting for this kind of video, thank you!
A great tutorial from a great instructor.
i appreciate this , best canvas tutorial out there!
Little tweak to add the effect of 'friction' to the player: if(keys.right.pressed) { player.velocity.x = 5; } else if(keys.left.pressed) { player.velocity.x = -5; } else { player.velocity.x *= 0.9; }
My player just runs off the screen if you do this!
Dude, that was a really good one! Thanks, i was trying to do this but i couldn't... Awesome! 😄
Hey Chris. I think this is more that good tutorial. Thanks.
this design concept help a lot THX!!
Great tutorial, including refactoring as a part of the process instead of skipping through made this whole project doable for a web dev noob like me. All of my previous experience was in hardware oriented projects using Arduino/C++ or RPi/python. This was a perfect introduction to JS. Almost finished re-skinning the game with my own image assets but got hung up working with Deekay Tool, I'll get there eventually, zero experience with AE probably isn't helping. Subbed! Link to your courses?
wow, you really put a lot of work in your videos I hope you have more subscriber
We're waiting for the 2 part!
Your videos are amazing. I loved your channel's content, the game videos in special. Please don't stop making videos, please (:
Thanks Anderson, that means a lot to me. Have more game videos on the way, thinking about doing Pacman next. Really appreciate your support 🙌
@@ChrisCourses , pacman would be an amazing tutorial, it was a game that I loved playing when I was a child. How about a side scrolling space ship game? I like the background moving effect, or a top down view game like pokemon or the old RPG games from super famicon. Thanks a lot for your reply.
Hey You Man, Just Stunning. How you are explaining like a machine!!!!!!!! AWESOMEEEE Thank you!
for anyone who had problems when he starts the server at first you have to know that he runs the code on git bash, that was my first mistake. After that I had several errors after "npm start", but to you solve it (if it's the same as mine) i had to run ' export NODE_OPTIONS="--openssl-legacy-provider" ' and to make sure that the environment variable has been set, you can run ' echo $NODE_OPTIONS ' , if you see ' --openssl-legacy-provider ' its ok and you can run 'npm start' again *dont forget that you have to run all these codes in mario-game-server folder, and they're valid for windows
Just saved my day, thanks man!
Mine too, thanks!
Now I can teach my son a fun programming, thank you Chris!
You are a great dad!
Thank you very much, excellent content, I wish you much success!
i want more of these video they make me learn so much its amazing
I got another coming this week, will be teaching how to make a dope version of Space Invaders
@@ChrisCourses how much for a game like this?
A video from TOTAL scratch on the subject... Just a A-WE-SOME idea ! I subscribe, this video is a masterpiece :)
How in the world do people know how to fix this stuff!? Legends, you're all legends
Thanks a lot! very informative🤓
You are amazing Bro. You have done it all. Thank you soo much
Amazing. Thank you a million
My brother we are very thank for you because you are a good coder and voluntarism
Gonna build this soon
loved this one Chris. Found the collisions code extremely helpful for the game I am working on. Have one question though, after calling the init restart game function when an enemy gobbles the player, how do I make sure it isn't called over and over when a player powers up and supposed to go through an enemy?.. Thanks again
Only youtube where i started my three js journey so thankyou ..and thanks for this one too
great work brother ❤
hey Chris thanks for the video i have made it very good one
I know (almost) no html and no javascript, this helped me a lot
Great course :) Thanks very much :)
Thank you for this video
production. Thanks again!
Great stuff!!!
Hey dude your voice is great and relaxing
wow, just finished the video and did it my self following your instruction. Quick recommendation: please use more than 1-2 sheets. Its much more organized if you use a separate sheet for classes, another for global variables and another for the game code.
could do, but that in a example like this, will make this more complicated
Thank you very much. Great job!!!!!!
Hey Chris! Great content, thank you so much, I learned a lot. A question... I'm wondering, even though it's just a 2d platformer, ideally, would it make sense to implement a game like this in webgl using matrices? Or it's just simply overkill? Not for learning purposes, I'm just wondering if that would be the best way since as you improve as a game dev, you might want to add a lot of special effects, particles stuff like that. Alright, I know it's always "it depends" so I'd rephrase my question... If you were about to write a very modern 2d platformer with lots of moving stuff on the screen, would you use three.js or, unless it's 3d, the 2d rendering context is totally fine. Thank you in advance!
Your course is so excited. But only one thing I really wonder that how to create a control flow to code step by step? Can you share you experience ?
I wrote this in assembly in the C64 last year. As a round up to my C64 assembly course. But I still need to make the video.
thank you for the content
this channel is awesome
great tutorial
Super great tut for beginners Chris! I learned a lot - - however - - definitely not production ready. I'm sure you get into all of that during the paid course though. Great job!
do u know how to deploy it?
@@yoguy515 watch until the end and you’ll learn how to deploy to #Netlify
@@dbroche bro there is nothing..can u add timestamp?
@@yoguy515 You build. "npx webpack --config webpack.config.js" will make a dist folder. If you upload everything from the dist to a host it will allow it to run.
Amazing video!!! ;) Really good job...I enjoy as will be write code and learn development a games :)
LOVE U FOR TUTORIAL VERY VERY GOODDDD 💫❤
Just thank you. Thank you.
amazing stuff
congratulations for the tutorial. in the full video do you provide subtitles in Portuguese? I am Brazilian. Thank's
Amazing video
Hi Chris! Do you know how to download the git? I didn't get that right. Thank you! Awesome amazing tutorial btw!
Really very great explaination..... Btw, Love from India Bro.....🇮🇳🇮🇳🇮🇳
Awesome, thanks
So amzing, Make more games pls
Chris It’s amazing !!! I’m a web dev , however it’s interesting to create 2D game. Can you pls recommend a tutorial/course for completely beginner in 2D js games? Cheers
Your videos are delayed but the quality of content is just like never seen before on entire youtoob
Thanks bro
Did it from the start, but i wish you could show us a another way to use the canvas, without local serveur. Great video
@yammo yam man i'm struggling whit this 🤣 i have Visual Studio Code and Live Server installed but the "import" statement doesn't work, please if you see this give me a hand whit the CreateImage() function 🙏
@yammo yam thank you for time bro! i'll try that function now. To follow the video i was copying one after other to make it run haha edit: IT REALLY WORKS!
@@bennydaniel93 hey! i´m having the same problem. can you help me? i'd be extremely grateful :)
Love ur vid and checkList 🤟🏼🤟🏼
Thanks very much :)
Thanks for this tutorial, I loved it. I have a question. How many objects I can process and render on screen before it starts to lag?
that depends on how powerful the machine is that is running the code
23:49 Why do we look for the keyCode? Can't we just use the key or the code property? It would be clearer to read, that's for sure. I don't mean to call you out or anything. This is my first time programming any website so I just want to know why. Is it faster to compare ints than strings?
Love u dude
Working with collisions was interesting and allowed me to play around with the values. But the topic of using sprites was a bit confusing and requires a separate theoretical breakdown. You need to put theoretical elements and a bit of history into courses as you did before. The main problem for beginners is the inability to set up a local server. An up-to-date guide is needed.
You don’t need that you can just do the new Image() and put the source
Obrigado pelo vídeo
hey @Chris Courses at 24:20 - you destructured the keydown event into "keyCode" such as addEventListener('keydown', ({keyCode}) => { console.log(keyCode)}. But the warning says, "KeyCode was deprecated ". I searched for it and then found they recommend 'key' or 'code' instead of 'keyCode'. How can you use the 'keyCode' in your text editor?
Same issue was found by me 🥲🥲 i want another solution which is working for wasd keycodes 👍
@@tejageddam3283 Just use key in place of keycode addEventListener('keydown',({key})=>{ then case 'a' instead of case 65 etc
can you also elaborate on how u can deploy this project?
When setting a lose condition why not just do a if(player.position.y > X) { location.reload() } to refresh the whole website
biggest problem was importing those images. Once we moved everything to npm or other server, it got fixed. Might as well start the whole project installing node
Nice game you bro 👍🏻
Why do you use an import statement for the image file source instead of just using a string const. What is the import statement doing exactly? I've never seen it done that way before which is why I am asking. Great video btw. Thanks
Haha wow, I’ve been developing with modules for so long that I forgot you could just pass through the image name as a string. You could honestly just skip the way I imported things completely-I import images the way I did since certain frameworks require it and I’m just used to it within my client work. Great catch on this 👍
@@ChrisCourses Hi Chris, could you make more videos like this since they are really helpful and entertaining. Thanks for the great content
@@DopEZTam yeah I got another coming this week, thinking it should be out on Wednesday.
Could you please elaborate or send the code snippet, I am a little confused. Thanks
You are the best
im a bit of a begginner, so i have some questions. in 13:50 he creates the update function. is it a function or something else? its not stored as a var/const and doesnt have the word function in the declartation. is it something else or just a way of writing functions i havenst seen before. also the html page had nothing but a canvas tag and it still functioned propperly. do you not need the html/head/body tags?
Instead of using that boilerplate for server we can also use live-server from npm
I stopped at 38:00 Tomorrow i will continue, and i am loving the class!
@chris courses so I tried they same method for the images and for some weird reason if I set the height and width equal to the image height and width and collision detection goes off and I can’t stand on the platform
Can you also share which plugin is giving those intellisense?
that's awesome
Thats what i needed.
this tutorial was really helpful but some reason the "this" function doesn't work so I had to replace this with c instead
So keyCode is depricated. Not sure if he mentions this in the video later on. Will there be any weird side effects if I just use the code property? I guess I'll need to account for other language keyboards but idk if that is an issue with keyCode still too.
Starts out great but gets frustrating once you start adding images in. I use VS Code, so your method of adding images doesn't work (nor is it necessary) for me. So then trying to add further images becomes complicated and I don't know how to do it.
i´m having the same problem. did you find a solution?
@@TiagoMSantos28 nope, had to abandon the project.
I love this channel and thank you so much for the help making these. I do want to ask though.. When starting out, I've been trying programming on and off mostly OFF for about 2 years.. Minimal effort. I keep putting it off because it just seems like impossible, like how do I even know what to do. I understand the basics and what they can do, but when tf do I implement things, how do I know what TO implement etc.. I just feel like a stupid poop head.
If can definitely be tough seeing people breeze through things when you’re struggling. Only reason I’m able to is because I’ve been programming as a profession for 8 years now. When you do something every day, eventually it becomes second nature, but I can attest, it’s not easy to get to that point when you’re struggling at first because it’s just not as fun. It all comes down to a desire to learn a little bit each day, then keep doing it every day until you feel confident with your skills. Hope that helps answer your question a little bit, appreciate your comment and thanks for watching 🙌