/NIDHI-UPMAN-PORTFOLIO-Inspired-by-SUPER-MARIO-GAME

๐ŸŽ‰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. ๐Ÿš€

Primary LanguageHTML

๐Ÿ„๐Ÿ•น๏ธ Super Mario-Inspired Portfolio ๐Ÿ•น๏ธ๐Ÿ„

๐ŸŽ‰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. ๐Ÿš€

๐ŸŽฎ Controls ๐ŸŽฎ

You can move Mario to the left or right using the keyboard arrows on desktop or the arrow buttons on mobile. โฌ…๏ธโžก๏ธ

๐Ÿ› ๏ธ What I Used ๐Ÿ› ๏ธ

  • Graphics ๐Ÿ–ผ๏ธ
  • Music and Sounds ๐ŸŽถ: Sourced from YouTube videos ๐Ÿ“บ
  • ๐ŸŒ HTML
  • ๐ŸŽจ CSS
  • ๐Ÿ’ป jQuery: To simplify JavaScript coding ๐Ÿ› ๏ธ
  • ๐Ÿ“š Google Fonts

๐ŸŒŸ The Stages ๐ŸŒŸ

  1. Start with the Basics ๐Ÿ
  2. Add Little Details ๐ŸŽจ
  3. Achieve Pixel Perfect Images ๐Ÿ–ผ๏ธ
  4. Polish the Code ๐Ÿงน
  5. Overcome the Most Difficult Challenges ๐Ÿšง
  6. Resolve Additional Issues ๐Ÿ› ๏ธ

๐Ÿ Start with the Basics ๐Ÿ

On the screen, you'll see five primary elements:

  1. Mario ๐Ÿ„
  2. Sky ๐ŸŒŒ (clouds โ˜๏ธ + mountains ๐Ÿ”๏ธ)
  3. Floor ๐ŸŒฑ
  4. Information Boxes ๐Ÿ“ฆ
  5. Arrow Buttons ๐Ÿ”ฝ๐Ÿ”ผ

Steps to build this from scratch:

  1. Write the HTML ๐ŸŒ
  2. Write the CSS ๐ŸŽจ
  3. Write the JavaScript (and cry a bit) ๐Ÿ’ป๐Ÿ˜ญ
  4. Test, test, test ๐Ÿงช
  5. Polish the code ๐Ÿงน

๐ŸŽจ Add Little Details ๐ŸŽจ

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);

๐Ÿ–ผ๏ธ Achieve Pixel Perfect Images ๐Ÿ–ผ๏ธ

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. ๐ŸŽจโœจ

๐Ÿงน Polish the Code ๐Ÿงน

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. ๐Ÿ’ป๐Ÿงผ

๐Ÿšง Overcome the Most Difficult Challenges ๐Ÿšง

The most challenging part was handling all the JavaScript interactions, managing time intervals, and ensuring smooth controls on both desktop and mobile. ๐Ÿ“…๐Ÿ’ป

๐Ÿ› ๏ธ Resolve Additional Issues ๐Ÿ› ๏ธ

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). ๐ŸŽถ๐Ÿ”Š

โœจ Final Message โœจ

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! ๐ŸŽฎ๐Ÿ„

๐Ÿš€ Getting Started ๐Ÿš€

  1. Clone the repository: 'https://github.com/nidhiupman568/NIDHI-UPMAN-PORTFOLIO-Inspired-by-SUPER-MARIO-GAME.git' ๐ŸŒ€
  2. Open the index.html file in your web browser. ๐ŸŒ

๐Ÿ› ๏ธ Technologies Used ๐Ÿ› ๏ธ

  • ๐ŸŒ HTML5
  • ๐ŸŽจ CSS3
  • ๐Ÿ’ป JavaScript

๐Ÿ“ธ Screenshots (Output) ๐Ÿ“ธ

SUPERMARIO 1

SUPERMARIO 2

SUPERMARIO 3