https://github.com/nidhiupman568/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. 🚀
https://github.com/nidhiupman568/nidhi-upman-portfolio-inspired-by-super-mario-game
css front-end-development html interactive-web-design javascript super-mario-portfolio web-animation web-development
Last synced: about 1 month ago
JSON representation
🎉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. 🚀
- Host: GitHub
- URL: https://github.com/nidhiupman568/nidhi-upman-portfolio-inspired-by-super-mario-game
- Owner: nidhiupman568
- Created: 2024-06-09T23:24:23.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-10-04T00:06:38.000Z (5 months ago)
- Last Synced: 2024-11-11T16:27:11.947Z (3 months ago)
- Topics: css, front-end-development, html, interactive-web-design, javascript, super-mario-portfolio, web-animation, web-development
- Language: HTML
- Homepage: https://nidhiupman568.github.io/NIDHI-UPMAN-PORTFOLIO-Inspired-by-SUPER-MARIO-GAME/
- Size: 2.24 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 🍄🕹️ 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 `![]()
` 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) 📸
