Modern Tetris Clone Built with React, TypeScript, Vanilla CSS and Vite. Experience the magic where blocks, music, and visuals unite to create a symphony of entertainment.
This app served as an excellent learning opportunity for me to delve into TypeScript. By incorporating TypeScript into the project, I gained hands-on experience in leveraging its features to catch type-related errors early in the development process, leading to more reliable and robust code. TypeScript's strict type checking empowered me to write more organized and predictable code, enhancing overall development efficiency and making the project more maintainable in the long run.
Get ready to redefine your Tetris experience with Tetris Beat TS – a game that harmonizes classic gameplay with modern music, stunning visuals, and dynamic themes. Say goodbye to the ordinary and step into a world where blocks groove to the beat and your gaming adventure takes center stage.
Tetris Gameplay: Enjoy the timeless gameplay of Tetris, where you control falling tetrominoes to complete lines and score points.
Audio Player Integration: Tetris Beat TS transcends traditional gaming by weaving music directly into the fabric of the gameplay with an integrated audio player. Dive into a selection of handpicked tracks that sync flawlessly with your gameplay, turning every drop, rotation, and line cleared into a symphony of movement seamlessly navigating through your playlist using the arrow buttons for a seamless musical journey..
Responsive Design: Tetris Beat TS empowers you to play the way you want on Mobile or Desktop. Immerse yourself in portrait mode for a fresh perspective that sharpens your focus, or switch to landscape mode for a classic Tetris encounter. Seamlessly switch between modes to match your mood and preferred style of play.
Game Controls: Use the arrow keys to move and rotate the falling tetrominoes. Additionally, you can hold a piece, perform hard drops, and pause/resume the game.
Game Information: Keep track of your progress with in-game information such as your score, level, and total lines cleared.
Leaderboard: Try to beat your high score and climb the leaderboard to become the ultimate Tetris Beat TS champion.
Immersive Visual Enhancements: The app features a visually appealing design with shiny star effects and animated title text. Prepare to be dazzled by a kaleidoscope of visual themes that evolve dynamically with the music. As you align blocks and create lines, watch in awe as they pulsate, light up, and shift colors in perfect sync with the beat. Tetris Beat TS isn't just about playing a game; it's about crafting an audio-visual masterpiece with every strategic move.
Tailored for Your Preferences: In Tetris Beat TS, customization is key. Craft your own experience by choosing your favorite tracks, themes, and block styles. Whether you're chasing high scores or indulging in a moment of relaxation, Tetris Beat TS adapts to your desires, offering an experience that's as unique as you are.
https://ts-tetris.onrender.com/
To run this app locally, follow these steps:
Clone this repository to your local machine. Navigate to the project directory and install the required dependencies using npm install. Start the development server using 'vite'. Open your browser and navigate to http://localhost:5173 to play the game.
ReactJS: The front-end of Tetris Beat TS is powered by ReactJS, enabling seamless user interactions and dynamic updates. HTML5 Canvas: The captivating visual effects and animations are brought to life using the power of HTML5 Canvas technology. CSS3: CSS3 styling is utilized to create the sleek and responsive design that enhances the overall gaming experience. React Audio Player: The integration of React Audio Player ensures smooth playback of music tracks, keeping you in perfect sync with the rhythm. React Responsive Carousel: Adds an extra layer of visual appeal with an interactive carousel component to alternate between background. React Draggable: Enables the drag and drop functionality for the controls container. Lucide Icons: SVG icons library used for the previous and next song buttons. TypeScript: Extensively utilized throughout the project, ensuring type-safe development and enhanced code structure. It enhances the clarity and maintainability of the codebase by providing static typing and interfaces.
Tetris Beat TS is not just a game; it's an evolving universe of rhythm and strategy. I am committed to bringing you exciting updates, fresh themes, and new features that will keep you grooving for endless hours.
Here's a sneak peek at what's coming soon: Web Socket Multiplayer: Challenge your friends to a Tetris Beat TS showdown and see who can score the most points. New Themes: Enjoy a variety of new themes that will take your gaming experience to the next level. New Songs: Discover new songs that will keep you entertained for hours. New Block Styles: Choose from a variety of block styles to customize your Tetris Beat TS experience. New Game Modes: Explore new game modes that will challenge your skills and keep you on your toes. Integration of T-Spin Combos: Master the art of T-Spin combos to score more points and climb the leaderboard.
This app is based on the Tetris game concept and was created for educational purposes. Audio tracks are sourced from Pixabay's collection of royalty-free music Wallpapers are sourced from https://wallpaperaccess.com's collection of wallpapers Tetris rules and gameplay are based on the Tetris guidelines from https://tetris.wiki/Tetris.wiki.
This project is licensed under the MIT License.
Disclaimer: This app is developed for educational purposes and does not intend to infringe upon any copyrights or trademarks associated with the original Tetris game or the audio tracks used.