Trò chơi con rắn html5

Question

Bài viết hướng dẫn các bạn làm game Snake đơn giản bằng HTML + CSS + Javascript, chỉ cần có hiểu biết cơ bản về 3 ngôn ngữ này (chủ yếu là JS) là có thể tạo được game này rồi nhé. Bài viết chủ yếu hướng đến mục đích học tập

Nội dung chính Show

1. Thư viện giới thiệu p5. js
2. làm trò chơi
3. Kết quả

Trò chơi giao diện phần

HTML

Để bắt đầu, chúng ta sẽ tạo canvas với chiều dài, chiều rộng thích hợp. Phần bên trong canvas cho phép con chuột di chuyển ăn mồi

CSS

Tiếp theo, thêm một số thuộc tính CSS cho canvas để làm nổi vùng giới hạn

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

Ngoài ra các bạn còn có thể thêm background cho game đẹp mắt hơn nhé

Phần chuyển động là logic của trò chơi

JAVASCRIPT

Để điều khiển sự chuyển đổi của con rắn, chúng ta sử dụng 4 phím lên, xuống, phải, trái. Gán các phim này với các chuỗi cho mã dễ viết và đọc

Keyboard.Keymap = {
    37: 'left',
    38: 'up',
    39: 'right',
    40: 'down'
    };

// Keydown Event
document.onkeydown = function(event) {
    self.pressKey = event.which;
};

// Get Key
this.getKey = function() {
  return this.keymap[this.pressKey];
};

Show the mouse, logic mouse ăn lột sử dụng thành phần x, y

this.stage.food = {
    x: Math.round(Math.random() * (this.stage.width - this.stage.conf.cw) / this.stage.conf.cw), 
    y: Math.round(Math.random() * (this.stage.height - this.stage.conf.cw) / this.stage.conf.cw), 
};

// Logic of Snake food
if (nx == snake.stage.food.x && ny == snake.stage.food.y) {
  var tail = {x: nx, y: ny};
  snake.stage.score++;
  snake.initFood();
} else {
  var tail = snake.stage.length.pop();
  tail.x   = nx;
  tail.y   = ny;	
}
snake.stage.length.unshift(tail);

// Draw Food
this.drawCell(snake.stage.food.x, snake.stage.food.y);

Go to the con trỏ chuột hiện tại theo x, y

// Snake Position
var nx = snake.stage.length[0].x;
var ny = snake.stage.length[0].y;

Khởi tạo các giá trị cho trò chơi khi bắt đầu màn chơi

/**
* Game Snake
*/
Game.Snake = function(elementId, conf) {

// Sets
var canvas   = document.getElementById(elementId);
var context  = canvas.getContext("2d");
var snake    = new Component.Snake(canvas, conf);
var gameDraw = new Game.Draw(context, snake);

// Game Interval
setInterval(function() {gameDraw.drawStage();}, snake.stage.conf.fps);
};

Trên đây là hướng dẫn cơ bản những phần quan trọng nhất của trò chơi. Để xem toàn bộ mã nguồn, các bạn có thể tải xuống dưới đây. Phần demo kèm theo trợ giúp bài hướng dẫn trở nên thú vị hơn nhé

Chắc chắn rằng mọi người cũng đã quá quen thuộc với trò chơi săn mồi. Bài viết hướng dẫn mọi người làm game này bằng Javascript và thư viện p5,js. Qua đó, bạn sẽ nắm bắt hơn một số khái niệm trong Javascript cũng như biết cách sử dụng p5. js để làm đồ họa, hoạt hình trên web

1. Thư viện giới thiệu p5. js

p5. js là một thư viện Javascript được dựa trên nền tảng Đang xử lý. Thư viện này giúp xử lý đồ họa, tương tác trên trang web dễ dàng hơn, p5. js cung cấp đầy đủ các chức năng để vẽ hoạt ảnh lên trang web và một số thư viện để tương tác với các đối tượng trong HTML5 như văn bản, đầu vào, video, webcam và âm thanh

To started with p5. js thì bạn chỉ cần thêm thư viện vào thông qua thẻ

const GRID_SIZE = 30;

const WITDH = 600;
const HEIGHT = 600;

3

Trong p5. js thì có 2 chức năng mà bạn chắc chắn sẽ sử dụng như sau

Đây là chức năng sẽ chạy ngay lập tức khi mở chương trình. Thường thì hay dùng để cấu hình cho chương trình
```
const GRID_SIZE = 30;

const WITDH = 600;
const HEIGHT = 600;
```
5 Chức năng này sẽ chạy ngay sau thằng
```
const GRID_SIZE = 30;

const WITDH = 600;
const HEIGHT = 600;
```
4 ở trên. Đây là chức năng chính của p5. js và sẽ được lặp lại khi kết thúc chương trình

Bạn có thể tìm hiểu sâu hơn về p5. js tại trang chủ này

2. làm trò chơi

2. 1 Thiết kế giao diện và Hiển thị rắn

Phần giao diện khá đơn giản, sẽ bao gồm một lưới các ô vuông. Mỗi ô vuông sẽ hiển thị một phần thân con rắn, hoặc là một chiến binh. Chúng ta tạo ra 4 tập tin

1.

const GRID_SIZE = 30;

const WITDH = 600;
const HEIGHT = 600;

7

Đây là file html chứa giao diện của game

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

0

2.

const GRID_SIZE = 30;

const WITDH = 600;
const HEIGHT = 600;

8

Đây là tệp chứa các hằng số trong trò chơi (độ rộng, độ cao của màn hình,. )

const GRID_SIZE = 30;

const WITDH = 600;
const HEIGHT = 600;

3.

const GRID_SIZE = 30;

const WITDH = 600;
const HEIGHT = 600;

9

Đây là Class chứa toàn bộ mã để điều khiển con chuột

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

4

Đầu tiên, ta tạo ra một con trỏ với phần đầu ở tốc độ (0,0) trên màn hình

Lớp này sẽ có một hàm

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

40, giúp hiển thị con rắn lên màn hình

4.

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

41

Đây là tập tin chứa mã của toàn bộ trò chơi

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

7

Sau khi chạy mã, bạn sẽ nhận được một màn hình kết quả. Bạn sẽ thấy một ô vuông màu trắng được vẽ ở tọa độ (0,0), đó chính là đầu của con rắn, đến phần sau chúng ta sẽ xử lý phần chuyển động

2. 2 Create a switch for the root

Để xử lý chuyển động, ta sẽ tăng hoặc giảm tốc độ x,y của phần đầu rắn. Do đó ta sẽ có 4 trường hợp như sau

Up lên. y += 1
Di chuyển xuống. y -= 1
Sang trái. x -= 1
sang phải. x += 1

Nhưng như vậy sẽ phải xử lý 4 trường hợp rất dài dòng. Do đó, ta sẽ sử dụng một Vector khác, được gọi là Vector vel dùng để xác định phương hướng đang đi

Up lên. tốc độ = (0, 1);
Di chuyển xuống. tốc độ = (0, -1);
Sang trái. tốc độ = (-1, 0);
sang phải. tốc độ = (-1, 0);

Để thay đổi giá trị cho tốc độ mỗi khi người chơi nhấn các phím mũi tên, ta sẽ viết thêm 1 hàm trong tệp

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

41

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

9

Ta cũng sẽ viết thêm một hàm vào lớp Snake là

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

44 để cập nhật lại vị trí của con rắn

Keyboard.Keymap = {
    37: 'left',
    38: 'up',
    39: 'right',
    40: 'down'
    };

// Keydown Event
document.onkeydown = function(event) {
    self.pressKey = event.which;
};

// Get Key
this.getKey = function() {
  return this.keymap[this.pressKey];
};

1

Hàm

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

45 cũng sẽ được viết thêm để cập nhật lại vị trí

Keyboard.Keymap = {
    37: 'left',
    38: 'up',
    39: 'right',
    40: 'down'
    };

// Keydown Event
document.onkeydown = function(event) {
    self.pressKey = event.which;
};

// Get Key
this.getKey = function() {
  return this.keymap[this.pressKey];
};

3

Chạy lại mã và sử dụng các phím mũi tên để điều khiển, ta sẽ nhận được kết quả như sau

2. 3 Hiển thị thức ăn

Đến phần này, ta sẽ hiển thị thức ăn để rắn có thể ăn. Tạo thêm một tệp

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

46 nữa để xử lý phần này

Keyboard.Keymap = {
    37: 'left',
    38: 'up',
    39: 'right',
    40: 'down'
    };

// Keydown Event
document.onkeydown = function(event) {
    self.pressKey = event.which;
};

// Get Key
this.getKey = function() {
  return this.keymap[this.pressKey];
};

5

Sẽ có hàm newFood() để tạo lại vị trí của thức ăn theo một cách ngẫu nhiên và một hàm

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

40 để hiển thị màn hình trò chơi. Sau đó trong hàm

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

45 chỉ cần gọi thêm

Keyboard.Keymap = {
    37: 'left',
    38: 'up',
    39: 'right',
    40: 'down'
    };

// Keydown Event
document.onkeydown = function(event) {
    self.pressKey = event.which;
};

// Get Key
this.getKey = function() {
  return this.keymap[this.pressKey];
};

8

is used to show by eat

2. 4 Xử lý khi rắn ăn thức ăn

Để biết khi nào con rắn đã ăn mồi, ta chỉ cần kiểm tra xem nhiệt độ của phần đầu có trùng với nhiệt độ của thức ăn không được, đồng thời cũng tạo thêm 1 biến

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

49 ở bên con rắn - đây sẽ là chiều dài của . Ta viết thêm vào file

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

41 như sau

this.stage.food = {
    x: Math.round(Math.random() * (this.stage.width - this.stage.conf.cw) / this.stage.conf.cw), 
    y: Math.round(Math.random() * (this.stage.height - this.stage.conf.cw) / this.stage.conf.cw), 
};

// Logic of Snake food
if (nx == snake.stage.food.x && ny == snake.stage.food.y) {
  var tail = {x: nx, y: ny};
  snake.stage.score++;
  snake.initFood();
} else {
  var tail = snake.stage.length.pop();
  tail.x   = nx;
  tail.y   = ny;	
}
snake.stage.length.unshift(tail);

// Draw Food
this.drawCell(snake.stage.food.x, snake.stage.food.y);

1

Ta sẽ có kết quả như sau

Như vậy là ta đã hoàn thành phần ăn thức ăn. Tiếp theo sẽ đến việc xử lý phần thân của con rắn, làm sao để mỗi khi ăn theo thức ăn thì nó sẽ dài ra

Chúng ta sẽ bổ sung đoạn mã sau vào hàm

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

44 và

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

40 của con rắn, đoạn mã này sẽ cập nhật lại vị trí của phần thân rắn, dựa trên độ dài biến thể

const GRID_SIZE = 30;

const WITDH = 600;
const HEIGHT = 600;

0

Sau khi chạy, ta được kết quả sau

2. 5 Xử lý khi kết thúc trò chơi

Trò chơi kết thúc khi con rắn cắn nhầm vào người của nó, tương tự như phần ăn theo chế độ ăn, ta chỉ cần kiểm tra xem có phần thần kinh nào trùng trục với đầu hay không. Ta tạo thêm 1 biến

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

73 tượng trưng cho trạng thái của con rắn và thêm đoạn mã sau vào hàm

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

44

const GRID_SIZE = 30;

const WITDH = 600;
const HEIGHT = 600;

1

Và hàm

canvas {
    border: 2px solid rgb(151, 149, 149);
    }

75 cũng sẽ được chỉnh sửa lại, để mỗi khi_______176 thì sẽ tạo lại 1 trò chơi mới

const GRID_SIZE = 30;

const WITDH = 600;
const HEIGHT = 600;

2

Và cuối cùng, đây sẽ là trò chơi hoàn chỉnh. ))

3. Kết quả

Vì đó là mình đã hướng dẫn các bạn làm một trò chơi 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 thì bạn sẽ cảm thấy thích thú với Javascript hơn, cũng như với p5. js. )) Toàn bộ code, các bạn có thể tham khảo tại repo này. trò chơi rắn

Mong mọi người nhận xét , thảo luận để bài viết tốt hơn. Nếu thấy hay thì hãy vote 5 sao giúp mình nhé. )) Cảm ơn mọi người đã đọc

programming html

Trò chơi con rắn html5

Trò chơi giao diện phần

Phần chuyển động là logic của trò chơi

1. Thư viện giới thiệu p5. js

2. làm trò chơi

2. 1 Thiết kế giao diện và Hiển thị rắn

2. 2 Create a switch for the root

2. 3 Hiển thị thức ăn

2. 4 Xử lý khi rắn ăn thức ăn

2. 5 Xử lý khi kết thúc trò chơi

3. Kết quả

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội