Chào mọi người đã tiếp tục đến với series tạo game xếp hình bằng Angular 2+ của mình, ở phần một mình đã làm được một số logic cơ bản liên quan đến tạo các khối, điều khiển các khối, xử lý va chạm. Tuy nhiên mới chỉ có thể thì sẽ chẳng thể chơi được chút nào cả, ở phần này mình sẽ code hoàn thiện các chức năng của trò chơi ở mức cơ bản, các bạn cùng theo dõi nhé. Còn ai chưa theo dõi từ đầu thì có thể theo dõi phần 1 ở đây
Cùng tiếp tục với xử lý xoay khối nhé các bạn!
Xử lý xoay
Như phàn trước code chúng ta đã có thể di chuyển khối đi xung quanh, tuy nhiên sẽ không còn là trò chơi xếp hình nếu không thể xoay khối, điều này sẽ làm giảm sự thú vị cũng như tăng độ khó cho game lên rất nhiều. Nào cùng xem chứng ta cần làm gì nhé!
Đôi khi ở trường đại học có một số môn như đại số tuyến tính, phương pháp tính, … các bạn tự hỏi không biết học để làm gì. Tuy không phải ai cũng dùng đến và có lẽ khi đi làm cũng chẳng máy khi gặp, tuy nhiên trong trường hợp này chúng ta cũng sẽ áp dụng một chút kiến thức của đại số tuyến tính đấy nhé. Cụ thể là sao?
Một phép xoay 90 độ có thể thực hiện bằng hai phản xạ ở góc 45 độ, điều đó có nghĩa là bạn có thể lấy ma trận chuyển vị của ma trận sau đó nhận nó với ma trận hoán vị đảo ngược thức tự của các cột, chắc cũng ít ai nhớ hoán vị chuyển vị nó là như nào, vì vậy hình ảnh sau sẽ giúp các bạn hình dung được một chút
Nói thế chú việc code lại rất dễ:
1 2 3 4 5 6 7 8 9 10 | <span class="token comment">// Transpose matrix</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> y <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> y <span class="token operator"><</span> <span class="token keyword">this</span><span class="token punctuation">.</span>shape<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token operator">++</span>y<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> x <span class="token operator"><</span> y<span class="token punctuation">;</span> <span class="token operator">++</span>x<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>shape<span class="token punctuation">[</span>x<span class="token punctuation">]</span><span class="token punctuation">[</span>y<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>shape<span class="token punctuation">[</span>y<span class="token punctuation">]</span><span class="token punctuation">[</span>x<span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>shape<span class="token punctuation">[</span>y<span class="token punctuation">]</span><span class="token punctuation">[</span>x<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>shape<span class="token punctuation">[</span>x<span class="token punctuation">]</span><span class="token punctuation">[</span>y<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Reverse the order of the columns.</span> <span class="token keyword">this</span><span class="token punctuation">.</span>shape<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">row</span> <span class="token operator">=></span> row<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Chúng ta có thể thêm một function rotate khối. Trước đó mình đã sử dụng toán tử spread để sao chép các tọa độ, trong trường hợp này, chúng ta đang làm việc với mảng nhiều cập tuy nhiên toán tử spread chỉ sao chép sâu một cấp. Phần còn lại được sao chép bằng cách reference. Với case này mình đã thay thế bằng các sử dụng đến các method xử lý JSON là JSON.parse và JSON.stringify. Method stringify() chuyển đổi ma trận thành một chuỗi JSON. Method parse() phân tích cú pháp chuỗi JSON, xây dựng ma trận của chúng ta trở lại thành một bản sao.
1 2 3 4 5 6 7 8 | <span class="token function">rotate</span><span class="token punctuation">(</span>p<span class="token operator">:</span> IPiece<span class="token punctuation">)</span><span class="token operator">:</span> IPiece <span class="token punctuation">{</span> <span class="token comment">// Cloning with JSON</span> <span class="token keyword">let</span> clone<span class="token operator">:</span> IPiece <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Do algorithm</span> <span class="token keyword">return</span> clone<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Sau đó mình thêm một trạng thái mới cho ArrowUp trong board.component.ts
1 2 | <span class="token punctuation">[</span><span class="token constant">KEY</span><span class="token punctuation">.</span><span class="token constant">UP</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">(</span>p<span class="token operator">:</span> IPiece<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token parameter">IPiece</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span>service<span class="token punctuation">.</span><span class="token function">rotate</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span> |
Nào cùng xoay nào
Lấy ngẫu nhiên khối Tetromino
Bây giờ để hiện các khối chúng ta đang fix cứng code nhằm mục đích để test kết quả khi dev, bây giờ hãy cùng nhau tạo ra các khối ngẫu nhiên nhé. Chúng ta sẽ tạo vị trí đầu tiên của các khối cũng như màu sắc của khối trong hằng số và 2 hằng số đó được mapping với nhau thông qua index
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">COLORS</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'cyan'</span><span class="token punctuation">,</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> <span class="token string">'orange'</span><span class="token punctuation">,</span> <span class="token string">'yellow'</span><span class="token punctuation">,</span> <span class="token string">'green'</span><span class="token punctuation">,</span> <span class="token string">'purple'</span><span class="token punctuation">,</span> <span class="token string">'red'</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">SHAPES</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token comment">// And so on</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> |
Chúng ta cần ngẫu nhiên hóa chỉ mục của một trong số này để chọn một mảnh. Để lấy một số ngẫu nhiên, chúng ta tạo một hàm sử dụng độ dài của mảng.
1 2 3 4 | <span class="token function">randomizeTetrominoType</span><span class="token punctuation">(</span>noOfTypes<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> noOfTypes<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Với phương pháp này, chúng ta có thể nhận được một loại tetromino ngẫu nhiên khi chúng ta sinh sản và sau đó thiết lập màu sắc và hình dạng từ nó:
1 2 3 4 | <span class="token function">randomizeTetrominoType</span><span class="token punctuation">(</span>noOfTypes<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> noOfTypes<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Nếu chúng ta nhấn play, trang sẽ hiển thị các mảnh có hình dạng và màu sắc khác nhau.
Game Loop
Hầu hết tất cả các trò chơi đều có một chức năng chính giúp trò chơi tiếp tục chạy ngay cả khi người dùng không làm gì cả. Chu kỳ chạy đi chạy lại cùng một chức năng cốt lõi này được gọi là vòng lặp trò chơi. Trong trò chơi của chúng ta, chúng ta cần một vòng lặp trò chơi để di chuyển các khối xuống màn hình.
RequestAnimationFrame
Để tạo vòng lặp trò chơi của chúng ta, chúng ta có thể sử dụng requestAnimationFrame. Nó cho trình duyệt biết rằng chúng ta muốn tạo hoạt ảnh và nó sẽ gọi một hàm để cập nhật hoạt ảnh trước lần vẽ lại tiếp theo. Nói cách khác, chúng ta nói với trình duyệt: “Lần tới khi bạn vẽ trên màn hình, hãy chạy chức năng này vì tôi cũng muốn vẽ một cái gì đó”.
Cách tạo hoạt ảnh với window.requestAnimationFrame() là tạo một hàm vẽ khung và sau đó tự re-schedules. Chúng ta cần ràng buộc lời gọi này, hoặc nó có đối tượng window làm ngữ cảnh của nó. Vì nó không chứa hàm hoạt ảnh nên mình gặp lỗi.
1 2 3 4 5 | <span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>piece<span class="token punctuation">.</span><span class="token function">draw</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Chúng ta có thể xóa tất cả các lệnh gọi draw() trước đây của và thay vào đó gọi animate() từ hàm play() để bắt đầu hoạt ảnh. Nếu chúng ta test trò chơi của mình, nó vẫn sẽ chạy như trước.
Timer
Tiếp theo, chúng ta cần một bộ đếm thời gian. Mỗi khung thời gian, chúng ta thả khối. Hãy bắt đầu với một đối tượng cơ bản này nhé
1 2 | time <span class="token operator">=</span> <span class="token punctuation">{</span> start<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> elapsed<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> level<span class="token operator">:</span> <span class="token number">1000</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Trong vòng lặp trò chơi, mình cập nhật trạng thái trò chơi của mình dựa trên khoảng thời gian và sau đó rút ra kết quả.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token function">animate</span><span class="token punctuation">(</span><span class="token parameter">now <span class="token operator">=</span> <span class="token number">0</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Update elapsed time.</span> <span class="token keyword">this</span><span class="token punctuation">.</span>time<span class="token punctuation">.</span>elapsed <span class="token operator">=</span> now <span class="token operator">-</span> <span class="token keyword">this</span><span class="token punctuation">.</span>time<span class="token punctuation">.</span>start<span class="token punctuation">;</span> <span class="token comment">// If elapsed time has passed time for current level</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>time<span class="token punctuation">.</span>elapsed <span class="token operator">></span> <span class="token keyword">this</span><span class="token punctuation">.</span>time<span class="token punctuation">.</span>level<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Reset start time</span> <span class="token keyword">this</span><span class="token punctuation">.</span>time<span class="token punctuation">.</span>start <span class="token operator">=</span> now<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">drop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">draw</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Vậy là chúng ta đã có animation rồi!
Tiếp theo, hãy xem điều gì sẽ xảy ra khi chúng ta đến cuối.
Freeze
Khi chúng ta không thể di chuyển xuống được nữa, chúng ta nên đóng băng khối đó và sinh ra một khối mới. Hãy bắt đầu bằng cách xác định giá trị freeze(). Hàm này hợp nhất các khối tetromino vào bảng:
1 2 3 4 5 6 7 8 9 10 | <span class="token function">freeze</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>piece<span class="token punctuation">.</span>shape<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">row<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> row<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> x</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>board<span class="token punctuation">[</span>y <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>piece<span class="token punctuation">.</span>y<span class="token punctuation">]</span><span class="token punctuation">[</span>x <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>piece<span class="token punctuation">.</span>x<span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Mình chưa thể nhìn thấy bất cứ điều gì, nhưng bằng cách ghi lại hình đại diện của bảng, mình có thể thấy rằng hình dạng trên bảng.
Hãy thêm một chức năng vẽ bảng:
1 2 3 4 5 6 7 8 9 10 11 | <span class="token function">drawBoard</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">row<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> row<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> x</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token constant">COLORS</span><span class="token punctuation">[</span>value<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span><span class="token function">fillRect</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Bây giờ hàm draw sẽ giống như sau:
1 2 3 4 5 6 | <span class="token function">draw</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>canvas<span class="token punctuation">.</span>width<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>canvas<span class="token punctuation">.</span>height<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>piece<span class="token punctuation">.</span><span class="token function">draw</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">drawBoard</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Bây giờ chúng ta đang đóng băng các mảnh, chúng ta cần thêm tính năng phát hiện va chạm mới. Lần này, mình phải đảm bảo rằng các khối không va chạm với các khối đóng băng trên bảng. Chúng ta có thể làm điều này bằng cách kiểm tra xem ô có bằng không. Thêm điều này vào method valid và gửi trong bảng dưới dạng argument:
1 2 | board<span class="token punctuation">[</span>p<span class="token punctuation">.</span>y <span class="token operator">+</span> y<span class="token punctuation">]</span><span class="token punctuation">[</span>p<span class="token punctuation">.</span>x <span class="token operator">+</span> x<span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">;</span> |
Bây giờ chúng ta đang thêm các mảnh vào bảng, nó sẽ nhanh chóng cao dần lên. Chúng ta nên làm điều gì đó về điều đó.
Line clear
Với mỗi hàng được lấp đầy(không có khoảng trống), thì hàng đó được xóa đi, đây là nguyên tắc của trò chơi này.
Việc phát hiện một hàng đã được lấp đầy chưa đơn giản mình chỉ cần kiểm tra xem hàng đó còn số không nào không, nếu không có thì chắc chắn nó đã được lấp đầy.
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">this</span><span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">row<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// If every value is greater than 0.</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>row<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=></span> value <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Remove the row.</span> <span class="token keyword">this</span><span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>y<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Add a zero filled at the top.</span> <span class="token keyword">this</span><span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token function">Array</span><span class="token punctuation">(</span><span class="token constant">COLS</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Chúng ta có thể thêm một lệnh gọi vào hàm clearLines() này sau lệnh gọi freeze (). Chúng ta có thể thử chơi và hy vọng rằng các hàng được xóa.
Ok! Kết quả mđã ok rồi, nhưng xóa không thì trò chơi nó lại nhạt quá. Xóa xong thì phải tính điểm chứ đúng không
Tính điểm
Để có thêm một chút phấn khích, chúng ta cần một hệ thống điểm. Từ hướng dẫn Tetris, chúng tôi nhận được các giá trị sau:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">Points</span> <span class="token punctuation">{</span> <span class="token keyword">static</span> <span class="token keyword">readonly</span> <span class="token constant">SINGLE</span> <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span> <span class="token keyword">static</span> <span class="token keyword">readonly</span> <span class="token constant">DOUBLE</span> <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">;</span> <span class="token keyword">static</span> <span class="token keyword">readonly</span> <span class="token constant">TRIPLE</span> <span class="token operator">=</span> <span class="token number">500</span><span class="token punctuation">;</span> <span class="token keyword">static</span> <span class="token keyword">readonly</span> <span class="token constant">TETRIS</span> <span class="token operator">=</span> <span class="token number">800</span><span class="token punctuation">;</span> <span class="token keyword">static</span> <span class="token keyword">readonly</span> <span class="token constant">SOFT_DROP</span> <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token keyword">static</span> <span class="token keyword">readonly</span> <span class="token constant">HARD_DROP</span> <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Trước tiên, hãy cộng điểm cho việc soft và hard drops(tức rơi nhanh hay hơi chậm – tức nghĩa là mỗi lần rơi vẫn sẽ tính điểm và sẽ tính điểm nhiều hơn khi người chơi cho khối rơi nhanh) trong trình xử lý sự kiện của chúng ta:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | @<span class="token function">HostListener</span><span class="token punctuation">(</span><span class="token string">'window:keydown'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'$event'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token function">keyEvent</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token operator">:</span> KeyboardEvent</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>moves<span class="token punctuation">[</span>event<span class="token punctuation">.</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> p<span class="token operator">:</span> ITetromino <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>moves<span class="token punctuation">[</span>event<span class="token punctuation">.</span>key<span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>piece<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>key <span class="token operator">===</span> <span class="token string">' '</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>service<span class="token punctuation">.</span><span class="token function">valid</span><span class="token punctuation">(</span>p<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>board<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>points <span class="token operator">+=</span> Points<span class="token punctuation">.</span><span class="token constant">HARD_DROP</span><span class="token punctuation">;</span> <span class="token comment">// Points for every drop</span> <span class="token keyword">this</span><span class="token punctuation">.</span>piece<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span> p <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>moves<span class="token punctuation">[</span><span class="token string">' '</span><span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>piece<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>service<span class="token punctuation">.</span><span class="token function">valid</span><span class="token punctuation">(</span>p<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>board<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>piece<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>key <span class="token operator">===</span> <span class="token string">'ArrowDown'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>points <span class="token operator">+=</span> Points<span class="token punctuation">.</span><span class="token constant">SOFT_DROP</span><span class="token punctuation">;</span> <span class="token comment">// Points if we move down</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Bây giờ chúng ta sẽ code tiếp với phần tính điểm tùy thuộc vào số dòng mà chúng ta xóa được
1 2 3 4 5 6 7 | <span class="token function">getLineClearPoints</span><span class="token punctuation">(</span>lines<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> lines <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">?</span> Points<span class="token punctuation">.</span><span class="token constant">SINGLE</span> <span class="token operator">:</span> lines <span class="token operator">===</span> <span class="token number">2</span> <span class="token operator">?</span> Points<span class="token punctuation">.</span><span class="token constant">DOUBLE</span> <span class="token operator">:</span> lines <span class="token operator">===</span> <span class="token number">3</span> <span class="token operator">?</span> Points<span class="token punctuation">.</span><span class="token constant">TRIPLE</span> <span class="token operator">:</span> lines <span class="token operator">===</span> <span class="token number">4</span> <span class="token operator">?</span> Points<span class="token punctuation">.</span><span class="token constant">TETRIS</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Để điều này hoạt động, chúng ta cần thêm một chút logic để đếm xem chúng ta xóa bao nhiêu dòng:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token function">clearLines</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> lines <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// Set variable</span> <span class="token keyword">this</span><span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">row<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>row<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=></span> value <span class="token operator">!==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> lines<span class="token operator">++</span><span class="token punctuation">;</span> <span class="token comment">// Increase for cleared line</span> <span class="token keyword">this</span><span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>y<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token function">Array</span><span class="token punctuation">(</span><span class="token constant">COLS</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>lines <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Add points if we cleared some lines</span> <span class="token keyword">this</span><span class="token punctuation">.</span>points <span class="token operator">+=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getLineClearPoints</span><span class="token punctuation">(</span>lines<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Chơi thử ngay thôi, chúng ta có thể thấy rằng chúng ta đang tăng điểm số của mình.
Cấp độ
Khi chơi với mãi một kiểu và chứ mãi như vậy thì quá dễ dàng khi đã quen thuộc với nó. Và quá dễ dàng có nghĩa là nhàm chán. Vì vậy chúng ta cần tăng mức độ khó lên. Mình làm điều này bằng cách giảm tốc độ khoảng thời gian trong vòng lặp trò chơi.
1 2 3 4 5 6 7 8 9 | <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">LINES_PER_LEVEL</span> <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">Level</span> <span class="token punctuation">{</span> <span class="token keyword">static</span> <span class="token keyword">readonly</span> <span class="token number">0</span> <span class="token operator">=</span> <span class="token number">800</span><span class="token punctuation">;</span> <span class="token keyword">static</span> <span class="token keyword">readonly</span> <span class="token number">1</span> <span class="token operator">=</span> <span class="token number">720</span><span class="token punctuation">;</span> <span class="token keyword">static</span> <span class="token keyword">readonly</span> <span class="token number">2</span> <span class="token operator">=</span> <span class="token number">630</span><span class="token punctuation">;</span> <span class="token keyword">static</span> <span class="token keyword">readonly</span> <span class="token number">3</span> <span class="token operator">=</span> <span class="token number">550</span><span class="token punctuation">;</span> <span class="token comment">// ...</span> <span class="token punctuation">}</span> |
Chúng ta cũng có thể cho người chơi biết họ hiện đang ở cấp độ nào. Logic của việc theo dõi và hiển thị các level và dòng cũng giống như đối với điểm. Mình khởi tạo một giá trị cho chúng và khi mình bắt đầu một trò chơi mới, mình phải đặt lại chúng.
1 2 3 4 5 6 7 | <span class="token function">resetGame</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>points <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>lines <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>level <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>board <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getEmptyBoard</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Tùy thuộc vào mức độ mà người chơi nhận được nhiều điểm hơn cho xóa dòng. Mình nhân số điểm với cấp độ đang có đang có. Và kể từ khi chúng ta bắt đầu ở cấp độ 0, hãy thêm một vào nó.
1 2 | <span class="token punctuation">(</span>level <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">*</span> lineClearPoints<span class="token punctuation">;</span> |
Chúng ta sẽ tăng cấp độ mỗi khi người chơi đạt đến các dòng người chơi có trên mỗi cấp độ. Khi thay đổi cấp độ chúng ta cũng sẽ thay đổi thời gian theo từng cấp độ đó.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token keyword">if</span> <span class="token punctuation">(</span>lines <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Calculate points from cleared lines and level.</span> <span class="token keyword">this</span><span class="token punctuation">.</span>points <span class="token operator">+=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>service<span class="token punctuation">.</span><span class="token function">getLinesClearedPoints</span><span class="token punctuation">(</span>lines<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>level<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>lines <span class="token operator">+=</span> lines<span class="token punctuation">;</span> <span class="token comment">// If we have reached the lines per level</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>lines <span class="token operator">>=</span> <span class="token constant">LINES_PER_LEVEL</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Goto next level</span> <span class="token keyword">this</span><span class="token punctuation">.</span>level<span class="token operator">++</span><span class="token punctuation">;</span> <span class="token comment">// Remove lines so we start working for the next level</span> <span class="token keyword">this</span><span class="token punctuation">.</span>lines <span class="token operator">-=</span> <span class="token constant">LINES_PER_LEVEL</span><span class="token punctuation">;</span> <span class="token comment">// Increase speed of game.</span> <span class="token keyword">this</span><span class="token punctuation">.</span>time<span class="token punctuation">.</span>level <span class="token operator">=</span> Level<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>level<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Bây giờ nếu chúng ta chơi và xóa 10 dòng, chúng ta sẽ thấy levels và số điểm của chúng ta tăng gấp đôi. Và tất nhiên các khối bắt đầu di chuyển nhanh hơn một chút.
Game over
Tất nhiên rồi, trò chơi nào rồi cũng có hồi kết, và trò chơi này cũng vậy, đến bây giờ trò chơi của chúng ta chỉ kết thúc khi tắt trình duyệt =)) vậy làm sao để kết thúc trò chơi của chúng ta khi các khối đã được xếp chồng lên nhau đến mức đội sàn. Hãy chùng mình code tiếp nhé!
Điều này cũng không mấy khó ăn cho lắm, sau khi khối rơi chúng ta chỉ cần kiểm tra xem nó có đang ở hàng 0 hay không và trong trường hợp đang ở hàng không, tức nó đang trên đỉnh rồi =))
1 2 3 4 5 | <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>piece<span class="token punctuation">.</span>y <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">gameOver</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Khi đó chúng ta sẽ thoát khỏi vòng lặp trò chơi. Trước khi thoát, mình gọi cancelAnimationFrame để dừng nó. Ngoài ra, mình in một thông tin cho người dùng rằng “Game Over!”.
1 2 3 4 5 6 7 8 9 | <span class="token function">gameOver</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">cancelAnimationFrame</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>requestId<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> ‘black’<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span><span class="token function">fillRect</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">1.2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>font <span class="token operator">=</span> ‘<span class="token number">1</span>px Arial’<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> ‘red’<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span><span class="token function">fillText</span><span class="token punctuation">(</span>‘<span class="token constant">GAME</span> <span class="token constant">OVER</span>’<span class="token punctuation">,</span> <span class="token number">1.8</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Khối tetromino tiếp theo
Nếu người dùng đến khối nào thì chơi khối đấy thì có vẻ vẫn có thể chơi được tuy nhiên nó hơi hên xui một chút, vậy nên nếu cho người chơi biết trước khối gì sẽ hiện ra tiếp theo thì trò chơi sẽ có thêm sự tính toán hơn, người dùng sẽ suy nghĩ trước sẽ đặt khối hiện tại và khối tiếp theo sao cho hợp lý. Hãy cùng thêm tính năng này nhé!
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>canvas</span> <span class="token attr-name">#next</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span>”next”</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>canvas</span><span class="token punctuation">></span></span> |
Tiếp theo, mình làm như mình đã làm cho canvas đầu tiên của mình:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | @<span class="token function">ViewChild</span><span class="token punctuation">(</span><span class="token string">'next'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">static</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> canvasNext<span class="token operator">:</span> ElementRef<span class="token operator"><</span>HTMLCanvasElement<span class="token operator">></span><span class="token punctuation">;</span> ctxNext<span class="token operator">:</span> CanvasRenderingContext2D<span class="token punctuation">;</span> <span class="token function">initNext</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctxNext <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>canvasNext<span class="token punctuation">.</span>nativeElement<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Size it for four blocks.</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctxNext<span class="token punctuation">.</span>canvas<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token number">4</span> <span class="token operator">*</span> <span class="token constant">BLOCK_SIZE</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctxNext<span class="token punctuation">.</span>canvas<span class="token punctuation">.</span>height <span class="token operator">=</span> <span class="token number">4</span> <span class="token operator">*</span> <span class="token constant">BLOCK_SIZE</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>ctxNext<span class="token punctuation">.</span><span class="token function">scale</span><span class="token punctuation">(</span><span class="token constant">BLOCK_SIZE</span><span class="token punctuation">,</span> <span class="token constant">BLOCK_SIZE</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Create and draw it in play function</span> <span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// ...</span> <span class="token keyword">this</span><span class="token punctuation">.</span>next <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Piece</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>next<span class="token punctuation">.</span><span class="token function">drawNext</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>ctxNext<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ...</span> <span class="token punctuation">}</span> |
Chúng ta phải thay đổi logic một chút trong hàm drop. Thay vì tạo một phần mới, mình thay khối mới đó bằng phần tiếp theo, và thay phần tiếp theo bằng một khối mới. Bây giờ hãy thử xem nó đã ok chưa nhé!
Phần implement của mình đến đây là hết rồi còn một số phần các bạn có thể code tiếp mình có thể nghĩ ra, các bạn thử xem nhé
- Pause game
- Lưu lại điểm cao
- Âm thanh của trò chơi cũng như bật/tắt âm thanh
- …
Tác giả
Bài biết được dịch từ : https://medium.com/angular-in-depth/game-development-tetris-in-angular-64ef96ce56f7 của tác giả Michael Karén
.
Hãy chơi thử game sau khi hoàn thiện ở đây và để lại feedback nhé