You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
311 lines
13 KiB
311 lines
13 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "a6ce295ff03bb49df7a3e17e6e7100a0",
|
|
"translation_date": "2025-08-29T08:52:35+00:00",
|
|
"source_file": "6-space-game/4-collision-detection/README.md",
|
|
"language_code": "vi"
|
|
}
|
|
-->
|
|
# Xây dựng trò chơi không gian Phần 4: Thêm Laser và Phát hiện Va chạm
|
|
|
|
## Câu hỏi trước bài học
|
|
|
|
[Câu hỏi trước bài học](https://ff-quizzes.netlify.app/web/quiz/35)
|
|
|
|
Trong bài học này, bạn sẽ học cách bắn laser bằng JavaScript! Chúng ta sẽ thêm hai yếu tố vào trò chơi:
|
|
|
|
- **Laser**: laser được bắn từ tàu của nhân vật chính và di chuyển theo chiều dọc lên trên.
|
|
- **Phát hiện va chạm**, như một phần của việc triển khai khả năng *bắn*, chúng ta cũng sẽ thêm một số quy tắc trò chơi thú vị:
|
|
- **Laser bắn trúng kẻ thù**: Kẻ thù sẽ bị tiêu diệt nếu bị laser bắn trúng.
|
|
- **Laser chạm vào đỉnh màn hình**: Laser sẽ bị phá hủy nếu chạm vào phần trên cùng của màn hình.
|
|
- **Kẻ thù và nhân vật chính va chạm**: Kẻ thù và nhân vật chính sẽ bị phá hủy nếu va chạm với nhau.
|
|
- **Kẻ thù chạm đáy màn hình**: Kẻ thù và nhân vật chính sẽ bị phá hủy nếu kẻ thù chạm vào đáy màn hình.
|
|
|
|
Tóm lại, bạn -- *nhân vật chính* -- cần bắn hạ tất cả kẻ thù bằng laser trước khi chúng kịp di chuyển xuống đáy màn hình.
|
|
|
|
✅ Hãy tìm hiểu một chút về trò chơi máy tính đầu tiên từng được viết. Chức năng của nó là gì?
|
|
|
|
Hãy cùng trở thành anh hùng nào!
|
|
|
|
## Phát hiện va chạm
|
|
|
|
Làm thế nào để phát hiện va chạm? Chúng ta cần nghĩ về các đối tượng trong trò chơi như những hình chữ nhật di chuyển. Tại sao lại như vậy? Bởi vì hình ảnh được sử dụng để vẽ một đối tượng trò chơi là một hình chữ nhật: nó có `x`, `y`, `width` và `height`.
|
|
|
|
Nếu hai hình chữ nhật, ví dụ như nhân vật chính và kẻ thù *giao nhau*, thì bạn có một va chạm. Điều gì xảy ra tiếp theo sẽ phụ thuộc vào các quy tắc của trò chơi. Để triển khai phát hiện va chạm, bạn cần:
|
|
|
|
1. Một cách để lấy đại diện hình chữ nhật của một đối tượng trò chơi, như sau:
|
|
|
|
```javascript
|
|
rectFromGameObject() {
|
|
return {
|
|
top: this.y,
|
|
left: this.x,
|
|
bottom: this.y + this.height,
|
|
right: this.x + this.width
|
|
}
|
|
}
|
|
```
|
|
|
|
2. Một hàm so sánh, hàm này có thể trông như sau:
|
|
|
|
```javascript
|
|
function intersectRect(r1, r2) {
|
|
return !(r2.left > r1.right ||
|
|
r2.right < r1.left ||
|
|
r2.top > r1.bottom ||
|
|
r2.bottom < r1.top);
|
|
}
|
|
```
|
|
|
|
## Làm thế nào để phá hủy các đối tượng
|
|
|
|
Để phá hủy các đối tượng trong trò chơi, bạn cần cho trò chơi biết rằng đối tượng đó không nên được vẽ lại trong vòng lặp trò chơi kích hoạt theo một khoảng thời gian nhất định. Một cách để làm điều này là đánh dấu một đối tượng trò chơi là *đã chết* khi có điều gì đó xảy ra, như sau:
|
|
|
|
```javascript
|
|
// collision happened
|
|
enemy.dead = true
|
|
```
|
|
|
|
Sau đó, bạn có thể xử lý các đối tượng *đã chết* trước khi vẽ lại màn hình, như sau:
|
|
|
|
```javascript
|
|
gameObjects = gameObject.filter(go => !go.dead);
|
|
```
|
|
|
|
## Làm thế nào để bắn laser
|
|
|
|
Bắn laser có nghĩa là phản hồi một sự kiện phím và tạo ra một đối tượng di chuyển theo một hướng nhất định. Vì vậy, chúng ta cần thực hiện các bước sau:
|
|
|
|
1. **Tạo một đối tượng laser**: từ đỉnh tàu của nhân vật chính, đối tượng này sẽ bắt đầu di chuyển lên trên về phía đỉnh màn hình ngay khi được tạo.
|
|
2. **Gắn mã vào một sự kiện phím**: chúng ta cần chọn một phím trên bàn phím để đại diện cho hành động bắn laser của người chơi.
|
|
3. **Tạo một đối tượng trò chơi trông giống như laser** khi phím được nhấn.
|
|
|
|
## Thời gian hồi chiêu của laser
|
|
|
|
Laser cần được bắn mỗi khi bạn nhấn một phím, ví dụ như phím *space*. Để ngăn trò chơi tạo ra quá nhiều laser trong một khoảng thời gian ngắn, chúng ta cần khắc phục điều này. Cách khắc phục là triển khai một cái gọi là *thời gian hồi chiêu*, một bộ đếm thời gian đảm bảo rằng laser chỉ có thể được bắn sau một khoảng thời gian nhất định. Bạn có thể triển khai điều này như sau:
|
|
|
|
```javascript
|
|
class Cooldown {
|
|
constructor(time) {
|
|
this.cool = false;
|
|
setTimeout(() => {
|
|
this.cool = true;
|
|
}, time)
|
|
}
|
|
}
|
|
|
|
class Weapon {
|
|
constructor {
|
|
}
|
|
fire() {
|
|
if (!this.cooldown || this.cooldown.cool) {
|
|
// produce a laser
|
|
this.cooldown = new Cooldown(500);
|
|
} else {
|
|
// do nothing - it hasn't cooled down yet.
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
✅ Tham khảo bài học 1 trong loạt bài trò chơi không gian để nhắc lại về *thời gian hồi chiêu*.
|
|
|
|
## Những gì cần xây dựng
|
|
|
|
Bạn sẽ sử dụng mã hiện có (mà bạn nên đã dọn dẹp và tái cấu trúc) từ bài học trước và mở rộng nó. Hoặc bắt đầu với mã từ phần II hoặc sử dụng mã tại [Phần III - khởi đầu](../../../../../../../../../your-work).
|
|
|
|
> mẹo: laser mà bạn sẽ làm việc đã có sẵn trong thư mục tài sản và được tham chiếu bởi mã của bạn.
|
|
|
|
- **Thêm phát hiện va chạm**, khi laser va chạm với một đối tượng, các quy tắc sau sẽ được áp dụng:
|
|
1. **Laser bắn trúng kẻ thù**: kẻ thù sẽ chết nếu bị laser bắn trúng.
|
|
2. **Laser chạm vào đỉnh màn hình**: Laser sẽ bị phá hủy nếu chạm vào phần trên cùng của màn hình.
|
|
3. **Kẻ thù và nhân vật chính va chạm**: kẻ thù và nhân vật chính sẽ bị phá hủy nếu va chạm với nhau.
|
|
4. **Kẻ thù chạm đáy màn hình**: Kẻ thù và nhân vật chính sẽ bị phá hủy nếu kẻ thù chạm vào đáy màn hình.
|
|
|
|
## Các bước được khuyến nghị
|
|
|
|
Tìm các tệp đã được tạo sẵn cho bạn trong thư mục con `your-work`. Nó sẽ chứa các tệp sau:
|
|
|
|
```bash
|
|
-| assets
|
|
-| enemyShip.png
|
|
-| player.png
|
|
-| laserRed.png
|
|
-| index.html
|
|
-| app.js
|
|
-| package.json
|
|
```
|
|
|
|
Bạn bắt đầu dự án trong thư mục `your_work` bằng cách gõ:
|
|
|
|
```bash
|
|
cd your-work
|
|
npm start
|
|
```
|
|
|
|
Lệnh trên sẽ khởi động một HTTP Server tại địa chỉ `http://localhost:5000`. Mở trình duyệt và nhập địa chỉ đó, hiện tại nó sẽ hiển thị nhân vật chính và tất cả kẻ thù, nhưng chưa có gì di chuyển - vẫn chưa :).
|
|
|
|
### Thêm mã
|
|
|
|
1. **Thiết lập đại diện hình chữ nhật cho đối tượng trò chơi để xử lý va chạm**. Đoạn mã dưới đây cho phép bạn lấy đại diện hình chữ nhật của một `GameObject`. Chỉnh sửa lớp GameObject để mở rộng nó:
|
|
|
|
```javascript
|
|
rectFromGameObject() {
|
|
return {
|
|
top: this.y,
|
|
left: this.x,
|
|
bottom: this.y + this.height,
|
|
right: this.x + this.width,
|
|
};
|
|
}
|
|
```
|
|
|
|
2. **Thêm mã kiểm tra va chạm**. Đây sẽ là một hàm mới kiểm tra xem hai hình chữ nhật có giao nhau không:
|
|
|
|
```javascript
|
|
function intersectRect(r1, r2) {
|
|
return !(
|
|
r2.left > r1.right ||
|
|
r2.right < r1.left ||
|
|
r2.top > r1.bottom ||
|
|
r2.bottom < r1.top
|
|
);
|
|
}
|
|
```
|
|
|
|
3. **Thêm khả năng bắn laser**
|
|
1. **Thêm thông báo sự kiện phím**. Phím *space* sẽ tạo ra một laser ngay phía trên tàu của nhân vật chính. Thêm ba hằng số vào đối tượng Messages:
|
|
|
|
```javascript
|
|
KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
|
|
COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
|
|
COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
|
|
```
|
|
|
|
1. **Xử lý phím space**. Chỉnh sửa hàm `window.addEventListener` keyup để xử lý phím space:
|
|
|
|
```javascript
|
|
} else if(evt.keyCode === 32) {
|
|
eventEmitter.emit(Messages.KEY_EVENT_SPACE);
|
|
}
|
|
```
|
|
|
|
1. **Thêm listeners**. Chỉnh sửa hàm `initGame()` để đảm bảo rằng nhân vật chính có thể bắn khi phím space được nhấn:
|
|
|
|
```javascript
|
|
eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
|
|
if (hero.canFire()) {
|
|
hero.fire();
|
|
}
|
|
```
|
|
|
|
và thêm một hàm `eventEmitter.on()` mới để đảm bảo hành vi khi kẻ thù va chạm với laser:
|
|
|
|
```javascript
|
|
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
|
first.dead = true;
|
|
second.dead = true;
|
|
})
|
|
```
|
|
|
|
1. **Di chuyển đối tượng**, đảm bảo laser di chuyển dần lên đỉnh màn hình. Bạn sẽ tạo một lớp Laser mới mở rộng từ `GameObject`, như bạn đã làm trước đây:
|
|
|
|
```javascript
|
|
class Laser extends GameObject {
|
|
constructor(x, y) {
|
|
super(x,y);
|
|
(this.width = 9), (this.height = 33);
|
|
this.type = 'Laser';
|
|
this.img = laserImg;
|
|
let id = setInterval(() => {
|
|
if (this.y > 0) {
|
|
this.y -= 15;
|
|
} else {
|
|
this.dead = true;
|
|
clearInterval(id);
|
|
}
|
|
}, 100)
|
|
}
|
|
}
|
|
```
|
|
|
|
1. **Xử lý va chạm**, triển khai các quy tắc va chạm cho laser. Thêm một hàm `updateGameObjects()` để kiểm tra các đối tượng va chạm:
|
|
|
|
```javascript
|
|
function updateGameObjects() {
|
|
const enemies = gameObjects.filter(go => go.type === 'Enemy');
|
|
const lasers = gameObjects.filter((go) => go.type === "Laser");
|
|
// laser hit something
|
|
lasers.forEach((l) => {
|
|
enemies.forEach((m) => {
|
|
if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
|
|
eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
|
|
first: l,
|
|
second: m,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
gameObjects = gameObjects.filter(go => !go.dead);
|
|
}
|
|
```
|
|
|
|
Đảm bảo thêm `updateGameObjects()` vào vòng lặp trò chơi trong `window.onload`.
|
|
|
|
4. **Triển khai thời gian hồi chiêu** cho laser, để nó chỉ có thể được bắn sau một khoảng thời gian nhất định.
|
|
|
|
Cuối cùng, chỉnh sửa lớp Hero để nó có thể xử lý thời gian hồi chiêu:
|
|
|
|
```javascript
|
|
class Hero extends GameObject {
|
|
constructor(x, y) {
|
|
super(x, y);
|
|
(this.width = 99), (this.height = 75);
|
|
this.type = "Hero";
|
|
this.speed = { x: 0, y: 0 };
|
|
this.cooldown = 0;
|
|
}
|
|
fire() {
|
|
gameObjects.push(new Laser(this.x + 45, this.y - 10));
|
|
this.cooldown = 500;
|
|
|
|
let id = setInterval(() => {
|
|
if (this.cooldown > 0) {
|
|
this.cooldown -= 100;
|
|
} else {
|
|
clearInterval(id);
|
|
}
|
|
}, 200);
|
|
}
|
|
canFire() {
|
|
return this.cooldown === 0;
|
|
}
|
|
}
|
|
```
|
|
|
|
Đến thời điểm này, trò chơi của bạn đã có một số chức năng! Bạn có thể di chuyển bằng các phím mũi tên, bắn laser bằng phím space, và kẻ thù sẽ biến mất khi bạn bắn trúng chúng. Làm tốt lắm!
|
|
|
|
---
|
|
|
|
## 🚀 Thử thách
|
|
|
|
Thêm hiệu ứng nổ! Xem các tài sản trò chơi trong [kho Space Art](../../../../6-space-game/solution/spaceArt/readme.txt) và thử thêm hiệu ứng nổ khi laser bắn trúng người ngoài hành tinh.
|
|
|
|
## Câu hỏi sau bài học
|
|
|
|
[Câu hỏi sau bài học](https://ff-quizzes.netlify.app/web/quiz/36)
|
|
|
|
## Ôn tập & Tự học
|
|
|
|
Thử nghiệm với các khoảng thời gian trong trò chơi của bạn cho đến nay. Điều gì xảy ra khi bạn thay đổi chúng? Đọc thêm về [các sự kiện thời gian trong JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
|
|
|
|
## Bài tập
|
|
|
|
[Khám phá va chạm](assignment.md)
|
|
|
|
---
|
|
|
|
**Tuyên bố miễn trừ trách nhiệm**:
|
|
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn tham khảo chính thức. Đối với các thông tin quan trọng, chúng tôi khuyến nghị sử dụng dịch vụ dịch thuật chuyên nghiệp từ con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này. |