|
1 | 1 | # Angular Tetris |
2 | 2 |
|
3 | | -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.8. |
| 3 | +A child-hood memory Tetris game built with Angular 10 and Akita. |
4 | 4 |
|
5 | | -## Development server |
| 5 | +Tetris was the first game that my dad bought to me. It costed him about 1 dollar at that time. It didn't sound a lot today, but at the time of more than 20 years ago. 1$ can feed my family for at least few days. Put it that way, 1$ can buy 2 dozens of eggs. This is the only one gaming "machine" that I ever had until my first computer arrived. I have never had a SNES or PS1 at home. I saw people still selling it online for about few bucks the other day. |
6 | 6 |
|
7 | | -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. |
| 7 | +Why not build the same with Angular? And here you go. |
8 | 8 |
|
9 | | -## Code scaffolding |
| 9 | +> I designed the game to hold maximum score of 999999 (one million minus one 😂) and I have never reached to that very end. |
| 10 | +> |
| 11 | +> I will give <u>a free gift</u> for the **first** amazing gamer. Please tweet your screenshot together with hashtag `angulartetris` and tag my name as well `@tuantrungvo`. |
10 | 12 |
|
11 | | -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. |
| 13 | +## Working Game |
12 | 14 |
|
13 | | -## Build |
| 15 | +Check out the **working game** -> https://tetris.trungk18.com |
14 | 16 |
|
15 | | -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. |
| 17 | +![A child-hood memory Tetris game built with Angular 10 and Akita][demo] |
16 | 18 |
|
17 | | -## Running unit tests |
| 19 | +If you like my work, feel free to: |
18 | 20 |
|
19 | | -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). |
| 21 | +- [][tweet] about Angular Tetris |
| 22 | +- :star: this repository. And we will be happy together :) |
20 | 23 |
|
21 | | -## Running end-to-end tests |
| 24 | +Thanks a bunch for stopping by and supporting me! |
22 | 25 |
|
23 | | -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). |
| 26 | +[tweet]: https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Ftrungk18%2Fangular-tetris&text=Awesome%20Tetris%20game%20built%20with%20Angular%2010%20and%20Akita%2C%20can%20you%20get%20999999%20points%3F&hashtags=angular,angulartetris,akita,typescript |
24 | 27 |
|
25 | | -## Further help |
| 28 | +## Who is this for? |
26 | 29 |
|
27 | | -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). |
| 30 | +I built this game dedicated to: |
| 31 | + |
| 32 | +- Anyone tha grew up with Tetris as a part of your childhood. It was definitely my childhood memory and I hope you enjoy the game and it helps bring some good memory back to you as well. |
| 33 | +- For Angular developer community, I have never really see a game that built with Angular and that's my answer. Using Akita as the underlying state management really helps me to see all of the data at a specific point of time, very good for debugging. I wanted to see more game from you guys. |
| 34 | + |
| 35 | +## How to play |
| 36 | + |
| 37 | +### Control |
| 38 | + |
| 39 | +- You can use both keyboard and mouse to play. But prefer to use keyboard |
| 40 | +- Press arrow left and right to change the speed of the game (1 - 6) |
| 41 | +- Press arrow up and down to change how many of lines has been filled before starting the game (1 - 10) |
| 42 | +- Press Space to start the game |
| 43 | +- Press P for pause/resume game |
| 44 | +- Press R for reset the game |
| 45 | +- Press S for the turn on/off music |
| 46 | + |
| 47 | +## Playing game |
| 48 | + |
| 49 | +- Press Space make the piece drop quickly |
| 50 | +- Press arrow left and right for moving left and right |
| 51 | +- Press arrow up to rotate the piece |
| 52 | +- Press arrow down to move a piece faster |
| 53 | + |
| 54 | +## Techstack |
| 55 | + |
| 56 | +I built it barely with Angular and Akita, no additional UI framework/library was required. |
| 57 | + |
| 58 | +## Credits and references |
| 59 | + |
| 60 | +- [https://medium.com/angular-in-depth/game-development-tetris-in-angular-64ef96ce56f7][medium] |
| 61 | +- [Super Rotation System][srs] |
| 62 | +- [Binaryify/vue-tetris][vue] |
| 63 | + |
| 64 | +[medium]: https://medium.com/angular-in-depth/game-development-tetris-in-angular-64ef96ce56f7 |
| 65 | +[srs]: https://tetris.fandom.com/wiki/SRS |
| 66 | +[vue]: https://github.com/Binaryify/vue-tetris |
0 commit comments