# ĐỌC HIỂU CODE MÔN MÃ NGUỒN MỞ - NGUYỄN MINH DƯƠNG_725105048

# Đoạn code chính thực thi trờ chơi
# 1. **Lớp `Component` - Thành phần cơ bản của trò chơi**
Lớp này định nghĩa các thuộc tính chung của một đối tượng trong trò chơi như kích thước, màu sắc, vị trí và phương thức cập nhật (vẽ lên canvas).

## **Thuộc tính**
- `x, y`: Tọa độ của đối tượng trên canvas.
- `width, height`: Kích thước của đối tượng.
- `color`: Màu sắc của đối tượng (áp dụng nếu không phải ảnh).
- `gameArea`: Đối tượng chứa thông tin khu vực chơi.
- `gameContext`: Lấy đối tượng `context` từ `canvas`, cho phép vẽ lên nó.
- `speedX, speedY`: Tốc độ di chuyển của đối tượng.
- `gravity, gravitySpeed`: Ảnh hưởng của trọng lực lên đối tượng.

## **Phương thức**
### `1.Hàm update()`:
- Vẽ hình chữ nhật lên `canvas` dựa vào tọa độ, màu sắc, kích thước.
- ![Uploading file..._8bqk2lbiv]()
- Đây là phương thức `update()` trong lớp `Component`. Nó có nhiệm vụ vẽ một hình chữ nhật đại diện cho đối tượng trên `canvas`.
---
##### **Phân tích từng dòng**

this.gameContext.fillStyle = this.color;

- Đặt màu nền (`fillStyle`) cho hình chữ nhật bằng giá trị `this.color`.
- `this.color` được truyền vào khi tạo đối tượng, ví dụ: `"red"`, `"#2CB01A"`

---

this.gameContext.fillRect(this.x, this.y, this.width, this.height);

- Vẽ một hình chữ nhật màu `this.color` lên `canvas` với:
- `this.x`, `this.y`: Tọa độ góc trên bên trái.
- `this.width`, `this.height`: Kích thước của hình chữ nhật.
- Đây là phần nền của đối tượng.

---

this.gameContext.strokeStyle = 'black';

- Thiết lập màu viền (`strokeStyle`) của hình chữ nhật thành **màu đen**.

---

this.gameContext.lineWidth  = 10;

- Đặt độ dày của viền là **10px**.

---

this.gameContext.strokeRect(this.x, this.y, this.width, this.height);

- Vẽ viền màu đen quanh hình chữ nhật với độ dày 10px.

---

##### **Tóm tắt hoạt động của `update()`**
1. Vẽ một hình chữ nhật màu (`fillRect`).
2. Vẽ một viền đen xung quanh hình chữ nhật (`strokeRect`).
3. Hình chữ nhật này sẽ đại diện cho các đối tượng như chướng ngại vật.

---

##### **Tại sao cần `strokeRect`?**
- Nếu chỉ có `fillRect()`, hình sẽ không có viền, trông kém nổi bật.
- `strokeRect()` giúp dễ nhìn thấy đối tượng hơn, đặc biệt khi nền có màu tương tự đối tượng.

📝 **Tóm lại**: Phương thức này giúp hiển thị một đối tượng hình chữ nhật có màu nền và viền đen trên `canvas`. 🚀

**--------------------------------------------------------------------------------------------------------------------------------------------------------**
.....................................................................
### `2.Hàm crashWith(otherObj)`:
- Kiểm tra xem đối tượng hiện tại có va chạm với `otherObj` không bằng cách so sánh tọa độ biên của hai đối tượng.
- Đây là **hàm khởi tạo (`constructor`)** của lớp `Component`. Nó chịu trách nhiệm thiết lập các thuộc tính ban đầu cho một đối tượng game.
---

#### Phân tích từng dòng
##### 2.1 Nhận tham số đầu vào

constructor({ gameArea, width, height, color, x, y }) {

- Hàm khởi tạo nhận một **đối tượng** chứa các thuộc tính:
- `gameArea`: Khu vực trò chơi (`GameArea`).
- `width`, `height`: Kích thước đối tượng.
- `color`: Màu sắc.
- `x`, `y`: Tọa độ ban đầu trên canvas.

**Lưu ý**: Cú pháp `{ gameArea, width, height, ... }` là **destructuring** để trích xuất các giá trị từ một object.

---

##### 2.2 Gán các giá trị đầu vào cho thuộc tính của đối tượng

this.x = x;
this.y = y;
this.width = width;
this.color = color;
this.height = height;

- Gán các tham số đầu vào cho đối tượng `this` (đối tượng đang được tạo ra).
- `this.x`, `this.y`: Xác định vị trí trên canvas.
- `this.width`, `this.height`: Xác định kích thước đối tượng.
- `this.color`: Xác định màu sắc của đối tượng.
---

##### 2.3 Lưu tham chiếu đến `GameArea`

this.gameArea = gameArea;
this.gameContext = gameArea.canvas.getContext('2d');

- `this.gameArea = gameArea;`: Lưu tham chiếu đến `GameArea` để sử dụng sau này.
- `this.gameContext = gameArea.canvas.getContext('2d');`:
- Lấy **context 2D** của `canvas`, cho phép vẽ lên canvas.
- Được sử dụng trong `update()` để vẽ hình.
---

##### 2.4 Khởi tạo các thuộc tính liên quan đến chuyển động

this.score = 0;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0;
this.gravitySpeed = 0;

- `this.score = 0;`: Điểm số ban đầu là `0`.
- `this.speedX = 0;`: Tốc độ di chuyển theo trục `X`.
- `this.speedY = 0;`: Tốc độ di chuyển theo trục `Y`.
- `this.gravity = 0;`: Trọng lực mặc định là `0`, sau này có thể thay đổi.
- `this.gravitySpeed = 0;`: Tốc độ rơi do trọng lực, khởi tạo bằng `0`.

-> **Giải thích về trọng lực (`gravity`)**
- Nếu `gravity > 0`: Đối tượng rơi xuống dần theo thời gian.
- Nếu `gravity < 0`: Đối tượng bay lên (như khi nhấn phím **Space**).
- `gravitySpeed` sẽ tăng dần, tạo hiệu ứng rơi tự nhiên.

-> **Ví dụ sử dụng gravity trong game:**

this.gravity = 0.05; // Trọng lực nhỏ để rơi từ từ.
this.gravitySpeed += this.gravity;
this.y += this.gravitySpeed;

-> Mỗi lần cập nhật, `gravitySpeed` tăng lên, khiến nhân vật rơi xuống nhanh hơn.

---

##### Tóm tắt
- Hàm `constructor` **khởi tạo** một đối tượng với:
- **Kích thước**, **màu sắc**, **vị trí** trên `canvas`.
- **Tham chiếu đến `GameArea`** để vẽ lên canvas.
- **Tốc độ di chuyển** (`speedX`, `speedY`) và **trọng lực** (`gravity`, `gravitySpeed`).

🚀 **Tóm lại**: Đây là bước đầu tạo ra một **thực thể (entity) di chuyển được** trong trò chơi! 🎮

---

# 2. **Lớp `MyGamePiece` - Đối tượng điều khiển chính (chim)**
Lớp này kế thừa từ `Component` nhưng thay đổi cách hiển thị từ hình chữ nhật sang hình ảnh con chim.

### **Phương thức**
- `constructor(obj)`: Thay vì vẽ một hình chữ nhật, nó tải hình ảnh (`/static/img/convit.png`) vào `this.img`.
- `update()`: Dùng `drawImage` để vẽ hình ảnh thay vì hình chữ nhật.
- `newPos()`: Cập nhật vị trí mới của chim dựa vào trọng lực và tốc độ.
- `checkHitTop()` và `checkHitBottom()`: Kiểm tra xem chim có vượt quá viền trên hoặc viền dưới màn hình không.

---

# 3. **Lớp `TextComponent` - Hiển thị văn bản (điểm số)**
Lớp này kế thừa `Component` nhưng thay vì vẽ hình chữ nhật, nó hiển thị văn bản lên màn hình.

- `update(text)`: Dùng `fillText` để hiển thị điểm số.

---

# 4. **Lớp `GameArea` - Quản lý toàn bộ trò chơi**
Lớp này điều khiển các thành phần trong game, cập nhật màn hình và xử lý logic trò chơi.

### **Thuộc tính**
- `gameRunning`: Trạng thái trò chơi (đang chạy hay dừng).
- `canvas`: Phần tử HTML `canvas` để vẽ trò chơi.
- `context`: Đối tượng để vẽ lên `canvas`.
- `frameNo`: Đếm số frame đã chạy (dùng để tạo chướng ngại vật).
- `myPiece`: Đối tượng chim mà người chơi điều khiển.
- `myScore`: Đối tượng hiển thị điểm số.
- `myObstacles`: Mảng chứa các chướng ngại vật.

### **Phương thức**
#### `start()`
- Kiểm tra nếu trò chơi đã chạy thì không làm gì.
- Ẩn phần giới thiệu (`bird-running`), tắt nhạc intro.
- Chạy nhạc nền (`maplestory_playing.mp3`).
- Ẩn nút `START GAME`, thêm `canvas` vào trang.
- Chạy hàm `updateGameArea()` liên tục mỗi 10ms.

#### `checkCrash()`
- Duyệt qua mảng `myObstacles` để kiểm tra xem chim có va chạm với bất kỳ chướng ngại vật nào không.

#### `updateGameArea()`
- Xóa màn hình (`clearRect`).
- Nếu đủ số frame, tạo một chướng ngại vật mới.
- Cập nhật vị trí của tất cả chướng ngại vật và vẽ lại.
- Cập nhật điểm số.
- Cập nhật vị trí và vẽ lại chim.
- Nếu chim va vào chướng ngại vật, gọi `loseGame()`.

#### `loseGame()`
- Dừng nhạc nền, xóa canvas, ẩn hướng dẫn.
- Hiển thị điểm số của người chơi.
- Gửi điểm lên backend bằng hàm `submitPoint(score)`.

---

# 5. **Xử lý phím (`onkeyup`, `onkeydown`)**
- Khi **bấm phím cách (SPACE)**: Chim bay lên (`gravity = -0.2`).
- Khi **nhả phím cách**: Chim rơi xuống (`gravity = 0.05`).

---

# 6. **Giao diện HTML**
- **Nút "START GAME"**: Gọi `myGameArea.start()`.
- **Hướng dẫn chơi**: Hiển thị cách điều khiển.
- **Phần hiển thị điểm khi thua**: `text-losegame`.

---

### **Tóm tắt chức năng chính**
- **Nhấn SPACE** để chim bay lên.
- **Tự động rơi xuống** khi không nhấn.
- **Tránh chướng ngại vật** để đạt điểm cao.
- Khi **va chạm**, hiển thị điểm và dừng trò chơi.