Mario Game Tutorial with JavaScript and HTML Canvas
Вставка
- Опубліковано 14 тра 2024
- 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!
Purchasing your course now brother. There is literally nowhere else that teaches you how to do this. Thanks man!
Oh maaan, I've been waiting for this!! Thanks Chris, looks dope
Excellent way to learn how to download the game without any inconvenience, very easy to follow the steps you indicate 👍
This is one of the best tutorial I've ever seen, thank you so much for your hard work
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
You've definitely made coding fun for me. Please keep making these games and you're a great instructor.
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.
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
You're fast and you're informative. Really enjoying your content.
I've just found your channel and love it and your tutorials. Big thank you for making this content 🙂
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 am waiting for this kind of video, thank you!
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
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?
i appreciate this , best canvas tutorial out there!
One of the best tutorials for javascript game development. It's a lot of fun to follow along your tutorials.
A great tutorial from a great instructor.
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! 😄
Seus vídeos me ajudaram muito, obrigado pelo excelente trabalho!
Hey Chris. I think this is more that good tutorial. Thanks.
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
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!
The only programming tutorial I've watched from start to finish without taking a break! Very fun tutorial!
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
A video from TOTAL scratch on the subject... Just a A-WE-SOME idea ! I subscribe, this video is a masterpiece :)
We're waiting for the 2 part!
How in the world do people know how to fix this stuff!? Legends, you're all legends
Now I can teach my son a fun programming, thank you Chris!
You are a great dad!
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!
Thank you very much, excellent content, I wish you much success!
Only youtube where i started my three js journey so thankyou ..and thanks for this one too
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
}
})
great work brother ❤
My brother we are very thank for you because you are a good coder and voluntarism
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?
Amazing. Thank you a million
You are amazing Bro. You have done it all. Thank you soo much
Thanks a lot! very informative🤓
I know (almost) no html and no javascript, this helped me a lot
this design concept help a lot THX!!
Great course :) Thanks very much :)
hey Chris thanks for the video i have made it very good one
production. Thanks again!
Great stuff!!!
Hey dude your voice is great and relaxing
Amazing video!!! ;) Really good job...I enjoy as will be write code and learn development a games :)
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.
this channel is awesome
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!!!!!!
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
Thank you for this video
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.
LOVE U FOR TUTORIAL VERY VERY GOODDDD
💫❤
great tutorial
thank you for the content
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 :)
amazing stuff
Just thank you. Thank you.
Amazing video
Gonna build this soon
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 ?
So amzing, Make more games pls
Awesome, thanks
Your videos are delayed but the quality of content is just like never seen before on entire youtoob
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
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!
Really very great explaination.....
Btw, Love from India Bro.....🇮🇳🇮🇳🇮🇳
Love ur vid and checkList 🤟🏼🤟🏼
congratulations for the tutorial. in the full video do you provide subtitles in Portuguese? I am Brazilian. Thank's
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?
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
Thanks very much :)
Love u dude
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
Hi Chris! Do you know how to download the git? I didn't get that right. Thank you! Awesome amazing tutorial btw!
Thanks bro
that's awesome
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?
Nice game you bro 👍🏻
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 🙌
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
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.
At 59:14, Chris talks about it being much easier with the live server-extension in vs code, but he doesn't say how to use it. Could anyone help me with a link to a tutorial perhaps or any tip whatsover? Thanks! By the way, great video!
The best solution is to configure WebPack and implement projects on a local server.
Here is a link to a great channel video. The author is very detailed and shows all the installation and configuration steps.
ua-cam.com/video/9c3dBhvtt6o/v-deo.html&ab_channel=SteveGriffith-Prof3ssorSt3v3
There is also a guide on Chris's channel, but it is very outdated and not suitable for WebPack 5
Just download the live server extension in vs code. Then you can go to your page and click on start live server.
Same issue is here if you get any video or idea please share with me also 🙂🙂
I did the same thing I just click on go live button and it created localhost server but nothing is rendering the page gone blank
In console it shows only"live reload enabled"and nothing happens
Thats what i needed.
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
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?
Deprecated means still available but has stopped recieving support, if it has any error it wont be fixed
Hi Chris, thank you so much for this video, is helping me with a school project, but i am having issues with importing the images, I have tried everything that is said in the video and also other things, but it just does not work, i heard that with vs code i shouldn't need anything, but i never used it, so i don't know how to avoid the problem. Is there any other way to import images in a js script? or am i doing something wrong?
Check out the tutorial I just released on Space Invaders, there's a section in there where I import the images in a more traditional method that shouldn't require any import statements like used within this video. The section you're looking for should be "Create a player" within that video - that should definitely get you up and running here as well.
Lmk if you get that working.
@@ChrisCourses Thank you so much , it worded, now I can use images in my program without getting any errors. Thank you!
@@bianchinimattia7778 could you please share a code snippet, I’m facing the same issue that you were facing earlier
@@sejalvasan check my comment above and how to simply import using an object object and setting the src prop
Instead of using that boilerplate for server we can also use live-server from npm
nice one! BTW images can be imported and set without running some server, like: const spriteWalkRight = new Image();
spriteWalkRight.src = 'player2.png'; ( and just put images in root directory )
so help full
no come image like in torilas but when applay this it's bhoom
how do I do that?? :(
@@dodoing7554 what i dont get you?
@@lapapa2108 you do i dodin't that
@@nickjohngray your idea
Hii Chris, first of all thanks for the great content. I am facing a problem that my canvas is always taking an extra space towards right and bottom even after setting canvas.width = innerWidth and canvas.height = innerHeight. This is resulting in scrollbars for side and down. How can I fit my canvas exact to my window size.
Did you set the margin to 0 on the style tag?
@@vez87 Hii Verity, thanks for your reply. I solved my problem just now by using css.
html, body {
margin:0;
width:100%;
height:100%;
}
It took me 4 months to solve this. 😂
@@vez87 Hi I got one more error. While switching to canvas boilerplate I got error saying :
' Failed to load module script: Expected a Javascript module script but the server platform.png:1 responded with a MIME type of "image/png” '
I googled it but didn't got solution. Can you please help me 🥲
can you also elaborate on how u can deploy this project?
Obrigado pelo vídeo
@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?