๐Welcome to my portfolio, designed to capture the nostalgic essence of the classic Super Mario game! ๐ฎโจ Hereโs a detailed overview of the project, including controls, technologies used, development stages, challenges faced, and final thoughts. ๐
You can move Mario to the left or right using the keyboard arrows on desktop or the arrow buttons on mobile. โฌ ๏ธโก๏ธ
- Graphics ๐ผ๏ธ
- Music and Sounds ๐ถ: Sourced from YouTube videos ๐บ
- ๐ HTML
- ๐จ CSS
- ๐ป jQuery: To simplify JavaScript coding ๐ ๏ธ
- ๐ Google Fonts
- Start with the Basics ๐
- Add Little Details ๐จ
- Achieve Pixel Perfect Images ๐ผ๏ธ
- Polish the Code ๐งน
- Overcome the Most Difficult Challenges ๐ง
- Resolve Additional Issues ๐ ๏ธ
On the screen, you'll see five primary elements:
- Mario ๐
- Sky ๐ (clouds โ๏ธ + mountains ๐๏ธ)
- Floor ๐ฑ
- Information Boxes ๐ฆ
- Arrow Buttons ๐ฝ๐ผ
Steps to build this from scratch:
- Write the HTML ๐
- Write the CSS ๐จ
- Write the JavaScript (and cry a bit) ๐ป๐ญ
- Test, test, test ๐งช
- Polish the code ๐งน
The Mario object is a simple <img>
HTML tag with a transparent source image. The actual image is applied using the CSS background
attribute. ๐ผ๏ธ
To create the Mario moving animation, I used a sprite image with three frames:
- Frame 1:
background-position-x: 0px;
- Frame 2:
background-position-x: -65px;
- Frame 3:
background-position-x: -130px;
To change Mario's direction (left or right), I used the same image file with the CSS attribute -webkit-transform
:
- Left:
-webkit-transform: scaleX(-1);
- Right:
-webkit-transform: scaleX(1);
For the background image, I initially used a small image that appeared blurry on desktop. Adding the CSS attribute image-rendering: crisp-edges
achieved crisp pixels. This small tweak made a significant difference. ๐จโจ
In the first version, there was a lot of duplicate code for user controls (key presses and arrow button clicks). I refactored the code to use functions, reducing redundancy and improving maintainability. ๐ป๐งผ
The most challenging part was handling all the JavaScript interactions, managing time intervals, and ensuring smooth controls on both desktop and mobile. ๐ ๐ป
Some browsers, like Google Chrome, do not allow autoplaying music. To address this, I made the music play when the user interacts with the screen (e.g., clicks, presses keys, or clicks arrow buttons). ๐ถ๐
I hope you enjoy this project, find some inspiration, and share it with your family and friends who have fond memories of playing Mario Bros. Let's bring back some good memories together! ๐ฎ๐
- Clone the repository: 'https://github.com/nidhiupman568/NIDHI-UPMAN-PORTFOLIO-Inspired-by-SUPER-MARIO-GAME.git' ๐
- Open the
index.html
file in your web browser. ๐
- ๐ HTML5
- ๐จ CSS3
- ๐ป JavaScript