🎮 Tetris

A simple yet fun Tetris game written entirely in one file — combining HTML, CSS, and JavaScript.

This project is desined for anyone who wants to learn how to build a basic web-based game using Cursor and Cursor Rules.

---

🛠 Game Features that we will build in the process

• Classic Tetris Gameplay: Rotate, move, and drop Tetrominoes to clear rows and score points.
• Minimalist Design: Clean and simple UI.
• Fully Functional in One File: All the logic, styles, and visuals packed into a single .html file.
• Responsive Controls: Use arrow keys to control the game.
• Lightweight and Fun: No frameworks, no dependencies — just pure JavaScript magic! ✨

---

🚀 How to Play (Controls)

1. Open the Game: Open tetris.html in any modern browser.

2. Controls:

   • ⬅️ Left Arrow: Move Tetromino left.
   • ➡️ Right Arrow: Move Tetromino right.
   • ⬆️ Up Arrow: Rotate Tetromino.
   • ⬇️ Down Arrow: Drop Tetromino faster.

3. Objective: Fill rows completely to clear them and score points. Keep the board as clear as possible to avoid game over!

---

🧰 Instructions to Start

Clone or upload the repository in Cursor

To Clone:

1. Open Cursor and Select 'Clone Repo' from the main screen
2. Paste: https://github.com/jfilatow/TetrisGameChallenge/
3. This should open up the repo in cursor for you to start building the game.

To Download:

1. Go to https://github.com/jfilatow/TetrisGameChallenge/
2. Select the dropdown from the 'Green' Code button and select Download zip and unpack this locally.
3. Open Cursor and select the folder.

---

🛠 Building the Game:

Do this first

1. Go to Cursor > Settings > Cursor Settings
2. 'Select Rules and Memories' and ensure that 'Tetris/.cursor/rules/tetris-guidelines.mdc' and 'Tetris/.cursor/rules/project-structure.mdc' are visible and attached. If not you may need to add them manually.
3. In Cursor Settings > Scroll down to Auto-Run and ensure its set to 'Run Everything'
4. You are now ready to build.
5. Read though the Game Requirements and if there anythings you want to change this is where to do it.
6. Read though the Rules in the Cursor Rules folder - so that you are familiar with what they are doing.

Do this next

1. Ensure that you have selected Agent in the Chat window
2. Select Claude 4 Sonnet thinging (the one with the little brain)
3. Attach: 'Tetris/GAME_REQUIREMENTS.md' into the chat editor and also select 'Web'
4. Paste this prompt to start: 'Read the attached Game Requirements and build Tetris Game the based on these specifications
5. Cursor should follow the rules and instruction provided and start buiding the game. Follow the prompts, review and accept changes as they are highlighted in files or accept all once it stops running.
6. Once complete you can try playing the initial version of the game by opening 'tetris.html'. This should be the most basic playable version of the game.
7. If there are any issues, use the chat interface to resolve them.

Feature Engancements

1. When ready you can add further gameplay enghancements by attaching 'Tetris/FEATURE_ENHANCEMENTS.md' and repeating the process from Step 3 onwards mentioned above (make sure to mention Feature Enhancements not Game Requirements this time).
2. Test the game again and note the changes
3. Prompt for any additional enhancements that you may think of.
4. Enjoy The Game!