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
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;
3Trong 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
5 Chức năng này sẽ chạy ngay sau thằngconst 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ìnhconst GRID_SIZE = 30; const WITDH = 600; const HEIGHT = 600;
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;
0Sau 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;
1Và 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;
2Và 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