Chắc hẳn bạn đã quá quen thuộc với trò chơi rắn săn mồi. Trong bài viết này, chúng ta sẽ hướng dẫn làm game đơn giản này bằng Javascript và thư viện p5.js. Bạn sẽ không chỉ nắm vững các khái niệm cơ bản về Javascript mà còn biết cách sử dụng p5.js để tạo đồ họa và animation trên website.
Contents
1. Giới thiệu thư viện p5.js
p5.js là một thư viện Javascript được xây dựng dựa trên nền tảng Processing. Thư viện này giúp xử lý đồ họa và tương tác trên trang web trở nên dễ dàng hơn. p5.js cung cấp các chức năng để vẽ animation trên trang web và hỗ trợ tương tác với các đối tượng trong HTML5 như văn bản, input, video, webcam và âm thanh.
Bạn đang xem: Làm Game Rắn Săn Mồi Bằng Javascript
Để bắt đầu sử dụng p5.js, bạn chỉ cần thêm thư viện vào thông qua thẻ <script>
trong file HTML. Dưới đây là một mẫu cấu trúc file HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
<script src="game.js"></script>
</head>
<body>
</body>
</html>
Trong p5.js, chúng ta sẽ sử dụng 2 hàm quan trọng như sau:
-
setup()
: Hàm này sẽ chạy ngay lập tức khi mở chương trình và thường được sử dụng để thiết lập cấu hình ban đầu của chương trình. -
draw()
: Hàm này sẽ chạy ngay sausetup()
. Đây là hàm chính của p5.js và sẽ được lặp lại cho đến khi chương trình kết thúc.
Để tìm hiểu thêm về p5.js, bạn có thể truy cập trang chủ của thư viện này.
2. Làm game
2.1 Thiết kế giao diện và hiển thị rắn
Giao diện của trò chơi khá đơn giản, chỉ gồm một lưới ô vuông. Mỗi ô vuông sẽ hiển thị một phần của con rắn hoặc một mồi. Chúng ta sẽ tạo ra 4 file sau:
index.html
: File HTML này chứa giao diện của trò chơi.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake game</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
<script src="config.js" charset="utf-8"></script>
<script src="snake.js" charset="utf-8"></script>
<script src="food.js" charset="utf-8"></script>
<script src="game.js" charset="utf-8"></script>
</body>
</html>
config.js
: File này chứa các hằng số trong game như độ rộng, cao của màn hình,…
const GRID_SIZE = 30;
const WIDTH = 600;
const HEIGHT = 600;
snake.js
: Class này chứa code để điều khiển con rắn.
class Snake {
constructor() {
this.head = createVector(0, 0);
}
show() {
noStroke();
fill(255);
rect(this.head.x, this.head.y, GRID_SIZE, GRID_SIZE);
}
}
Xem thêm : Top 15 ngôn ngữ lập trình phổ biến nhất thế giới
Đầu tiên, chúng ta tạo ra một con rắn với phần đầu ở tọa độ (0, 0) trên màn hình. Class Snake
cũng chứa một hàm show()
để hiển thị con rắn lên màn hình.
game.js
: File này chứa code của toàn bộ game.
let snake;
function setup() {
createCanvas(WIDTH, HEIGHT);
newGame();
}
function draw() {
background(0);
drawSnake();
}
function drawSnake() {
snake.show();
}
function newGame() {
snake = new Snake();
}
Sau khi chạy code, bạn sẽ thấy một ô vuông màu trắng được vẽ ở tọa độ (0, 0), đó là đầu của con rắn. Trong phần tiếp theo, chúng ta sẽ xử lý phần chuyển động của con rắn.
2.2 Tạo chuyển động cho rắn
Để xử lý chuyển động, chúng ta sẽ tăng hoặc giảm tọa độ x,y của phần đầu rắn. Dựa vào điều này, ta có 4 trường hợp chuyển động như sau:
- Đi lên: y -= 1.
- Đi xuống: y += 1.
- Sang trái: x -= 1.
- Sang phải: x += 1.
Tuy nhiên, việc xử lý 4 trường hợp này khá dài dòng. Thay vào đó, chúng ta sẽ sử dụng một Vector khác, gọi là vel
, để xác định phương hướng đi.
- Đi lên:
vel = (0, -1)
. - Đi xuống:
vel = (0, 1)
. - Sang trái:
vel = (-1, 0)
. - Sang phải:
vel = (1, 0)
.
Để thay đổi giá trị của vel
khi người chơi nhấn các phím mũi tên, chúng ta sẽ thêm một hàm keyPressed()
vào file game.js
.
function keyPressed() {
if (keyCode == UP_ARROW && snake.vel.y != 1) {
snake.vel.y = -1;
snake.vel.x = 0;
}
else if (keyCode == DOWN_ARROW && snake.vel.y != -1) {
snake.vel.y = 1;
snake.vel.x = 0;
}
else if (keyCode == LEFT_ARROW && snake.vel.x != 1) {
snake.vel.y = 0;
snake.vel.x = -1;
}
else if (keyCode == RIGHT_ARROW && snake.vel.x != -1) {
snake.vel.y = 0;
snake.vel.x = 1;
}
}
Chúng ta cũng sẽ thêm một hàm update()
vào class Snake
để cập nhật lại vị trí của con rắn.
update() {
this.head.x += this.vel.x * GRID_SIZE;
this.head.y += this.vel.y * GRID_SIZE;
this.head.x = (this.head.x + WIDTH) % WIDTH;
this.head.y = (this.head.y + HEIGHT) % HEIGHT;
}
Thêm vào đó, hàm drawSnake()
cũng sẽ được cập nhật thêm để cập nhật vị trí của con rắn.
function drawSnake() {
// Cập nhật sau mỗi khung hình
if (frameCount % 5 == 0) {
snake.update();
}
snake.show();
}
Chạy lại code và sử dụng các phím mũi tên để điều khiển, bạn sẽ thấy kết quả như sau:
2.3 Hiển thị thức ăn
Xem thêm : Tạo Ứng Dụng Desktop Đơn Giản Với Python
Tiếp theo, chúng ta sẽ hiển thị thức ăn để con rắn có thể ăn được. Tạo thêm một file food.js
để xử lý phần này.
class Food {
constructor() {
this.newFood();
}
newFood() {
this.x = Math.floor(random(width));
this.y = Math.floor(random(height));
this.x = Math.floor(this.x / GRID_SIZE) * GRID_SIZE;
this.y = Math.floor(this.y / GRID_SIZE) * GRID_SIZE;
}
show() {
fill(255, 40, 0);
rect(this.x, this.y, GRID_SIZE, GRID_SIZE);
}
}
Class Food
sẽ có hàm newFood()
, để tạo lại tọa độ của thức ăn một cách ngẫu nhiên, và hàm show()
, để hiển thị thức ăn lên màn hình game. Sau đó, chúng ta chỉ cần gọi food.show()
trong hàm drawSnake()
để hiển thị thức ăn.
2.4 Xử lý khi rắn ăn thức ăn
Để biết khi nào con rắn đã ăn mồi, chúng ta chỉ cần kiểm tra xem tọa độ của đầu con rắn có trùng với tọa độ của thức ăn hay không. Đồng thời, chúng ta cũng tạo thêm một biến length
trong class Snake
để đại diện cho chiều dài của con rắn, mỗi khi ăn mồi sẽ tăng thêm 1. Chúng ta thêm vào file game.js
như sau:
function drawSnake() {
// Cập nhật sau mỗi khung hình
if (frameCount % 5 == 0) {
snake.update();
}
snake.show();
food.show();
// Xử lý khi con rắn ăn mồi
if (snake.head.x == food.x && snake.head.y == food.y) {
eatFood();
}
}
function eatFood() {
snake.length++;
food.newFood();
}
Chạy code và bạn sẽ thấy kết quả như sau:
2.5 Xử lý khi kết thúc game
Trò chơi sẽ kết thúc khi con rắn cắn vào thân của nó. Tương tự như phần ăn thức ăn, chúng ta chỉ cần kiểm tra xem có phần thân nào trùng tọa độ với đầu của con rắn hay không. Chúng ta tạo thêm biến isDead
để đại diện cho trạng thái của con rắn và thêm đoạn code sau vào hàm update()
của class Snake
:
for (let vector of this.body) {
if (vector.x == this.head.x && vector.y == this.head.y) {
this.isDead = true;
}
}
Hàm draw()
cũng sẽ được chỉnh lại để tạo một game mới mỗi khi isDead == true
.
function draw() {
background(0);
if (!snake.isDead) {
drawSnake();
} else {
newGame();
}
}
Và cuối cùng, đây là game hoàn chỉnh :))
3. Kết
Vậy là chúng ta đã hướng dẫn bạn làm một game rắn săn mồi đơn giản bằng ngôn ngữ lập trình JavaScript. Hy vọng sau bài viết này, bạn sẽ cảm thấy hứng thú với JavaScript và p5.js. Bạn có thể tìm toàn bộ code của game tại đây.
Mong mọi người có nhận xét và thảo luận để bài viết được hoàn thiện hơn. Nếu bạn thấy bài viết hữu ích, hãy vote 5 sao để ủng hộ chúng tôi. Cảm ơn mọi người đã đọc!
Nguồn: https://laptrinhc.edu.vn
Danh mục: Ngôn ngữ lập trình