Skip to content

chanGomez/tetris

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MasterHead

👾 TETRIS

Welcome to React Tetris! This project is a recreation of the classic Tetris game built using React and JavaScript.

Try it yourself

You can play the game live here.

🕹️ How to play it

  • Once you press start you will need to

    • "Up" button for changing the position of the tetromino.
    • "Down" button for moving down faster.
    • "Left" and right" buttons for navigation the tetromino.
  • You can always see your score and the rows you have wipped out.

  • Once you make it to the top of your game you lose and game will stop.

  • The more you play the more levels you'll pass which also means the faster the game gets.

  • I bet you can't get passed level 4 🤷🏼‍♀️.

⚡ Technologies

  • React.js
  • Javascript

💭 Process:

One of my interests as being a gamer and having the abilty to code is to create games. This is a small step towards learning game development.

I started by focusing on the game's functionality. I cared more that it worked correctly.

The logic for creating a game is way different from web development but I tried to make as mean connections as I could to be able to understand very line of code.

After game was completed I had the struggles of how to showcase my work. I wanted to be able to keep the user longer on my site. And for that since I made a retro game I though maybe I should place it where I first played it, on a windows 98 home screen.

🛠️ How can it be improved?

I would like to save the users highscore for users to be able to keep track of their progress. Create a game over display to show off the highscore.

🎥 Demo/Preview

tetris_demo.mov

🚦 Running the Project

To run the project in your local environment, follow these steps:

  1. Clone the repository to your local machine
  2. Run npm install or yarn in the project directory to install the required dependencies
  3. Run npm run start or yarn run start to get the project started.
  4. Open http://localhost:3000 (or the address shown in your console) in your web browser to see the app.