25 |
26 | Thanks a bunch for stopping by and supporting me!
27 |
28 | [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
29 |
30 | ## Why?
31 |
32 | Tetris was the first game that my dad bought for me and It cost about 1$ US at that time. It didn't sound a lot today. But 20 years ago, 1$ can feed my family for at least a few days. Put it that way, with 1\$ you can buy two dozens eggs.
33 | This is the only gaming "machine" that I ever had until my first computer arrived. I have never had a SNES or PS1 at home.
34 |
35 | My Tetris was exactly in the same yellow color and it was so big, running on 2 AA battery. It is how it looks.
36 |
37 | ![Retro Tetris][tetris]
38 |
39 | After showing my wife the [Tetris game built with Vue][vue]. She asked me why I didn't build the same Tetris with Angular? And here you go.
40 |
41 | > The game can hold up to a maximum score of 999999 (one million minus one 😂) and I have never reached that very end.
42 | >
43 | > Please [tweet][tweetmax] the screenshot with your highest score, together with hashtag `#angulartetris` and my name tagged as well `@trungvose`. I will send **a free gift** to the one having the highest score of the day, from now till 1 Aug 2020.
44 |
45 | [tweetmax]: https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Ftrungk18%2Fangular-tetris&text=Woo-hoo!%20I%20got%20a%20999999%20points%20on%20Angular%20Tetris%20%40trungvose.%20Wanna%20join%20the%20party%3F%20&hashtags=angular,angulartetris,akita,typescript
46 |
47 | ## Who is this for?
48 |
49 | I built this game dedicated to:
50 |
51 | - For anyone that grew up with Tetris as a part of your memory. It was my childhood memory and I hope you enjoy the game as well.
52 | - For the Angular developer community, I have never really seen a game that built with Angular and that's my answer. Using Akita as the underlying state management helps me to see all of the data flow, it is great for debugging. I wanted to see more Angular game from you guys 💪💪💪
53 |
54 | ## How to play
55 |
56 | ### Before playing
57 |
58 | - You can use both keyboard and mouse to play. But prefer to use keyboard
59 | - Press arrow left and right to change the speed of the game **(1 - 6)**. The higher the number, the faster the piece will fall
60 | - Press arrow up and down to change how many of lines have been filled before starting the game **(1 - 10)**
61 | - Press `Space` to start the game
62 | - Press `P` for pause/resume game
63 | - Press `R` for resetting the game
64 | - Press `S` for the turn on/off the sounds
65 |
66 | ### Playing game
67 |
68 | - Press `Space` make the piece drop quickly
69 | - Press `Arrow left` and `right` for moving left and right
70 | - Press `Arrow up` to rotate the piece
71 | - Press `Arrow down` to move a piece faster
72 | - When clearing lines, you will receive a point - 100 points for 1 line, 300 points for 2 lines, 700 points for 3 lines, 1500 points for 4 lines
73 | - The drop speed of the pieces increases with the number of rows eliminated (one level up for every 20 lines cleared)
74 |
75 | ## Techstack
76 |
77 | I built it barely with Angular and Akita, no additional UI framework/library was required.
78 |
79 | ![Angular Tetris][techstack]
80 |
81 | ## Development Challenge
82 |
83 | I got the inspiration from the same but different [Tetris game built with Vue][vue]. To not reinvented the wheel, I started to look at Vue code and thought it would be very identical to Angular. But later on, I realized a few catches:
84 |
85 | - The Vue source code was written a few years ago with pure JS. I could find several problems that the compiler didn't tell you. Such as giving `parseInt` a number. It is still working though, but I don't like it.
86 | - There was extensive use of `setTimeout` and `setInterval` for making animations. I rewrote all of the animation logic using RxJS. You will see the detail below.
87 | - The brain of the game also used `setTimeout` for the game loop. It was not a problem, but I was having a hard time understanding the code on some essential elements: how to render the piece to the UI, how the calculation makes sense with XY axis. In the end, I changed all of the logic to a proper OOP way using TypeScript class, based on [@chrum/ngx-tetris][ngx-tetris].
88 |
89 | ### Tetris Core
90 |
91 | It is the most important part of the game. As I am following the Vue source code, It is getting harder to understand what was the developer's intention. The Vue version inspired me but I think I have to write the core Tetris differently.
92 |
93 | Take a look at the two blocks of code below which do the same rendering piece on the screen and you will understand what I am talking about. The left side was rewritten with Angular and TypeScript and the right side was the JS version.
94 |
95 | ![Angular Tetris][compare01]
96 |
97 | I always think that your code must be written as you talk to people, without explaining a word. Otherwise, when someone comes in and reads your code and maintains it, they will be struggling.
98 |
99 | > “ Code is like humor. When you have to explain it, it’s bad.” – Cory House
100 |
101 | And let me emphasize it again, I didn't write the brain of the game from scratch. I adapted the well-written source by [@chrum/ngx-tetris][ngx-tetris] for Tetris core. I did refactor some parts to support Akita and wrote some new functionality as well.
102 |
103 | ### Akita state management + dev tool support
104 |
105 | Although you don't dispatch any action, Akita will still do it undo the hood as the Update action. And you still can see the data with [Redux DevTools][redux-devtool]. Remember to put that option into your `AppModule`
106 |
107 | ```ts
108 | imports: [environment.production ? [] : AkitaNgDevtools.forRoot()];
109 | ```
110 |
111 | I turn it on all the time on [tetris.trungk18.com][angular-tetris], you can open the DevTools and start seeing the data flow.
112 |
113 | ![Angular Tetris][akita-devtool]
114 |
115 | > Note: opening the DevTools could reduce the performance of the game significantly. I recommended you turn it off when you want to archive a high score 🤓
116 |
117 | ### Customizing Piece
118 |
119 | I defined a base [Piece class][piece-class] for a piece. And for each type of piece, it will extend from the same base class to inherit the same capability
120 |
121 | [piece-class]: src/app/interface/piece/piece.ts
122 |
123 | ```ts
124 | export class Piece {
125 | x: number;
126 | y: number;
127 | rotation = PieceRotation.Deg0;
128 | type: PieceTypes;
129 | shape: Shape;
130 | next: Shape;
131 |
132 | private shapes: Shapes;
133 | private lastConfig: Partial
7 | Hold
2 |Level
2 |Press Space to start
4 |Next
2 |{{ labelAndPoint.label }}
3 |2 | 3 | Lines 4 | 5 |
6 |