Mario Game: Project Setup

Premium Features

Download Video

Project Setup

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: https://github.com/christopher4lis/canvas-boilerplate

Image Assets: https://drive.google.com/drive/folders/147Yx4qrTlzPUkEDvwaYEMcQjaaH8hX8r

Comments

Want to participate?

Create a free Chris Courses account to begin

revankarora posted a year ago

I liked your video, Chris! Can you add more videos?

abdulreal96 posted 2 years ago

Hi, Chris, the video source code mario image seems to be different from the one in the video, I was able to run the game but the mario doesn't move at all.

abdulreal96 posted 2 years ago

Hi, Chris, the video source code mario image seems to be different from the one in the video, I was able to run the game but the mario doesn't move at all.

MILLAREMARK420 posted 2 years ago

Hello Chris. my name is Mark... i just want to ask how to not double jump, i dont like my game jump even though the character still in the air! and not shoot fireflower continoustly if i long press the space button. i like to shoot one at a time! can you help me please... thank you in advance....

GameChanger posted 2 years ago

You can create a let variable, say "touchedGround", that checks whether the user has collided with the ground or not. Set it equal to true by default, since the user begins at the ground. Set it equal to false if the user jumps, and set it equal to true once more if the user gets back to the ground. Create an if statement that ensures the user will only be able to jump if the touchedGround variable is set to true. This way, the user would not be able to jump multiple times in the air, as the variable is already set to false. Once they return to the ground, the variable resets itself to true, thus allowing the user to jump up again. As to the fireflowers problem, it can be prevented by a similar mechanism.

MILLAREMARK420 posted 2 years ago

hello Chris. my name is Mark... i just want to ask how to not double jump, i dont like my game jump even though the character still in the air! and not shoot fireflower continoustly if i long press the space button. i like to shoot one at a time! can you help me please... thank you in advance....

MILLAREMARK420 posted 2 years ago

hello Chris. my name is Mark...

i just want to ask how to not double jump, i dont like my game jump even though the character still in the air! and not shoot fireflower continoustly if i long press the space button. i like to shoot one at a time! can you help me please... thank you in advance....

Project Setup

Sidescroller Basics

Enemies, Power-Ups, and New Levels

Education

Support

Transparency

Legal