MarioMaze is an interactive web application where you control Mario's movements through a maze using voice commands and arrow keys. The app integrates Teachable Machine for voice control, enabling you to navigate Mario through the maze by simply saying "left," "right," "up," or "down." This readme provides an overview of the MarioMaze app and its features.
-
Voice Control: Navigate Mario through the maze by using voice commands ("left," "right," "up," "down").
-
Arrow Key Control: You can also use arrow keys on your keyboard to control Mario's movements.
-
Maze Challenge: Guide Mario through the maze and help him reach the end.
-
React: The app's user interface is built using React, providing a dynamic and responsive design.
-
Chakra UI: Chakra UI is used for creating an accessible and visually appealing design with customizable components.
- Teachable Machine: The app integrates Teachable Machine to recognize and respond to voice commands for Mario's movements.
![Screenshot 2023-10-21 at 3 22 23 AM](https://private-user-images.githubusercontent.com/115460552/277058793-dd09fe20-6dd7-4025-b97b-d247b26d92c1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMzMzMDIsIm5iZiI6MTcyMjEzMzAwMiwicGF0aCI6Ii8xMTU0NjA1NTIvMjc3MDU4NzkzLWRkMDlmZTIwLTZkZDctNDAyNS1iOTdiLWQyNDdiMjZkOTJjMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyOFQwMjE2NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00ZTkxYjVmYjUzMDA1ZTcxYWIzYWVhNjMxZmZiNzVhOTllYjBiMjhjMTU5Y2Q5M2VhNmNkZjZkMDg1YWExNTgxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.I6qj3qYzLfaB6sOA5fOhf98k4aLCPilHMJWgSBzFbRQ)
![Screenshot 2023-10-21 at 3 22 57 AM](https://private-user-images.githubusercontent.com/115460552/277058833-9778954d-d2d4-4f0c-b314-7c8c62091de7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMzMzMDIsIm5iZiI6MTcyMjEzMzAwMiwicGF0aCI6Ii8xMTU0NjA1NTIvMjc3MDU4ODMzLTk3Nzg5NTRkLWQyZDQtNGYwYy1iMzE0LTdjOGM2MjA5MWRlNy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyOFQwMjE2NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01YTNlNmFlNGFlMDk3ZmE5MjllNWE4YzRjMDA3OWIxZGU1NzUxMzM3NWU4ZmNmOWRlMzYzYWYzZTVhZjlmMDRmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.HjWL0zwvqGdk7_4n-gbtGJIiMji28YasQYrM-HCMROs)
![Screenshot 2023-10-21 at 3 23 12 AM](https://private-user-images.githubusercontent.com/115460552/277058861-d2dde88c-66c3-4f38-b6ba-d9c94be38ed1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMzMzMDIsIm5iZiI6MTcyMjEzMzAwMiwicGF0aCI6Ii8xMTU0NjA1NTIvMjc3MDU4ODYxLWQyZGRlODhjLTY2YzMtNGYzOC1iNmJhLWQ5Yzk0YmUzOGVkMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzI4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyOFQwMjE2NDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lNDIyYjdlNDRiNzY2MmJjODRmZDE2ZTI3YjMwOWE4OTI0YmU3OGJjM2Y0NjY1NTdkNjU1NWVhMmIxNDFmOGMwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.sVO7iF7awEVBvC7YZI8CpV7kfufve4TRecQoKM9yXOM)
-
Clone the repository from GitHub.
-
Navigate to the project directory and run
npm install
to install the required dependencies. -
Start the development server using
npm start
. -
Access the MarioMaze app through your web browser by navigating to the specified URL (usually
http://localhost:3000
).
-
Open the MarioMaze app in your web browser.
-
Use voice commands ("left," "right," "up," "down") to guide Mario through the maze.
-
Alternatively, you can control Mario using the arrow keys on your keyboard.
-
Help Mario navigate the maze and reach the end to complete the challenge.
Contributions to the MarioMaze app are welcome. Please follow the guidelines outlined in the CONTRIBUTING.md file.
This project is licensed under the MIT License.
- Ansh Kathpal
Special thanks to the React and Teachable Machine communities for providing the tools and resources to create this fun and interactive application.