Tetris by Clarion Heard, Jonny Riecke, and Joe Avila
Overview and inspiration:
Head over to T3TRIS to play the epic game online!
Game Preview
- If you'd like to clone down this project repository to your local computer, you can do so by forking it, then hitting the "Clone or download" button in your own fork. Copy the SSH link, and open up your computer's Terminal. Inside, type "git clone <the link you've just copied>".
git clone <example: git@github.com:.../Mod-3-Tetris-Frontend.git></example:>
-
You'll also need to fork and clone down the backend repo for this project. You can find the link here: https://github.com/clheard54/Tetris-Backend-Api. Follow the same steps as above.
-
Back in your terminal, type "bundle install".
bundle install
- Then, from the root directory, run "rake db:create" and "rake:db:migrate" to create the database locally.
rake db:create && db:migrate
- Lastly, run "rake db:seed". Now you're ready to go!
rake db:seed
To open the app, you'll have to start up a local server. In your terminal, navigate to the backend api directory and then type "rails s".
rails s
If you'd like to see your backend database, you can head to "http://localhost:3000/api/v1/leaders" on your favorite browser.
Lastly, navigate to the frontend directory, and (again in your terminal) type "open index.html". You're good to go!
When you press "Start Game", pieces (also known as "tetrads" or "tetrominos") will start falling from the sky (ie, the top of the board). Your job is to control those pieces as they fall, and to stack them so that they fill entire rows. When a row is entirely filled, it will clear, and your points will increase. But hurry -- as more time passes, the pieces will begin to fall faster and faster! And as soon as the pieces pile up to the top of the screen, GAME OVER.
Key Commands:
→ (Arrow Right) : moves the piece to the right.
← (Arrow Left) : moves the piece to the left.
↓ (Arrow Down) : speeds up the piece's movement down.
↑ (Arrow Up) : rotates the piece 90 degrees.
Spacebar : pauses the game. (Don't cheat!)
Scoring:
-
For a single filled row : 40 pts
-
Two rows filled (and cleared) at once : 100 pts
-
Three rows filled at once : 300 pts
-
Four row cleared at once : 1200 pts
(Note: These scores all double once you reach Level 3.)
Levels: For every ten rows cleared, you move to the next level.
Welcome to Tetris:
New Highscore!:
Leaderboard:
Some neat tricks: Drawing the Tetris board proved to be more of a challenge than we initially anticipated. Ultimately, we knew we were probably looking at an array (the entire board) of arrays (20 rows) of arrays (to represenet the 10 columns). How to draw each individual grid box? Using the HTML canvas element, we took advantage of the built-in grid methods, such as fillRect(). The big breakthrough, those, was deciding to define a constant "sq" to represent the width/height of a single square. Each "sq" represented one unit. This would make it extremely easy to think of the board as a cartesian plane: In order to locate a piece on the board, we could simply count the number of squares over and down (from the top left corner).
No longer was there the need to measure position by pixels (yikes). Instead, behold:
Another fun piece of code to write was the function for rotating a piece. There were several cases to deal with: a piece hitting the edge of the board and needing to be nudged over to compensate, a rotation causing a collision with another piece, etc. To deal with this, we stored each piece as an array of its four rotational positions. Before rotating, we previewed the piece's next position.
We checked to see whether the rotation would cause a wall collision -- and if so,which side of the board it might collide with (ten columns meant that if the x-position was > 5, the piece was more than halfway across the board). If it hit the right wall, we knew an adjustment left would be necessary; its position would need to be (-1) in the x-direction. On the left, a "kick" of one unit to the right was necessary.
Lastly, we re-drew the piece, incorporating the information from above where necessary. A collision with another piece would prevent a rotation; otherwise, the piece assumed its next rotational position.
Scoring System:
The scoring system is a simple checker that looks at the player's current total of rows cleared and adjusts difficulty accordingly. Classic Tetris increases levels every 10 rows cleared, so to mimic this, we implemented a check on variable totalRows after a piece gets locked. If over 10, then the fall rate is increased, and at certain level increments, point values are increased.
Thank you to...
... CodeExplained for the walkthrough of how to "draw" pieces on the screen.
... W3Schools for its guide to using canvas elements in HTML.
... The Software Dude, who offered inspiration for conceiving of the tetris board as a cartesian coordinate plan.
Contributions are most welcome. This is very much a beginner project, and constructive criticism is appreciated. Feel free to open a pull request or branch from this project.
This project is licensed under the GNU GPL
Enjoy.