Next.js 14 Tetris with TypeScript and Tailwind CSS

This project is a modern implementation of the classic Tetris game using Next.js 14, TypeScript, and Tailwind CSS. It showcases the use of React hooks, TypeScript for type safety, and Tailwind CSS for styling in a Next.js application with App Router.

Features

• Classic Tetris gameplay
• Responsive design with Tailwind CSS
• Type-safe code with TypeScript
• Built on Next.js 14 with App Router
• Score tracking
• Game over detection

Prerequisites

Before you begin, ensure you have met the following requirements:

• Node.js (v18 or newer)
• npm (v9 or newer)

Getting Started

To get a local copy up and running, follow these simple steps:

1. Clone the repository:

   git clone https://github.com/asaism/nextjs14-tetris.git
   

2. Navigate to the project directory:

   cd nextjs14-tetris
   

3. Install the dependencies:

   npm install
   

4. Run the development server:

   npm run dev
   

5. Open http://localhost:3000 with your browser to see the result.

How to Play

• Use the arrow keys to control the Tetris pieces:

  • Left Arrow: Move piece left
  • Right Arrow: Move piece right
  • Down Arrow: Move piece down faster
  • Up Arrow: Rotate piece

• The game ends when the pieces stack up to the top of the board.

• Clear lines to score points!

Project Structure

src/
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   └── Tetris.tsx
├── types/
│   └── tetris.ts
└── ...

Technologies Used

• Next.js 14
• React
• TypeScript
• Tailwind CSS

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Suguru as AI - @yourtwitter - suguru@asaism.com

Project Link: https://github.com/asaism/nextjs14-tetris

Acknowledgements

• Next.js Documentation
• TypeScript Documentation
• Tailwind CSS Documentation
• React Hooks Documentation