Bắt đầu hành trình phát triển trò chơi của bạn với sự đơn giản của 24a2
24a2 là một công cụ trò chơi rất cơ bản nhưng hoạt động đầy đủ dành cho các lập trình viên JavaScript. Nó có giao diện khác thường, nhưng bạn có thể sử dụng nó để tìm hiểu các nguyên tắc cơ bản về lập trình trò chơi.
Với sự hỗ trợ cho vòng lặp trò chơi, đồ họa đầy màu sắc và đầu vào đơn giản, 24a2 có mọi thứ bạn cần để tạo các trò chơi nhỏ với nỗ lực tối thiểu.
Hãy xem 24a2 và bắt đầu hành trình phát triển toàn bộ trò chơi của bạn ngay hôm nay.
Mục Lục
24a2 là gì?
24a2 là một công cụ mã nguồn mở nhỏ giúp bạn xây dựng các trò chơi cơ bản. Nó rất dễ học và tất cả những gì bạn cần để bắt đầu xây dựng trò chơi của mình là trình duyệt web và trình soạn thảo văn bản.
24a2 lấy tên từ độ phân giải của nó: 24 x 24. Ngay cả khi so sánh với các công cụ tối giản khác như PICO-8, với độ phân giải 128 x 128, điều này thật nhỏ bé! 24a2 sử dụng các ‘pixel’ hình tròn, có khoảng cách lớn giữa chúng, vì vậy nó trông khá đặc biệt.
Bạn có thể sẽ không sử dụng 24a2 để tạo ra trò chơi điện tử ăn khách tiếp theo, nhưng đó không thực sự là vấn đề. 24a2 hoàn hảo cho người mới bắt đầu và bạn có thể sử dụng nó để tìm hiểu một số khái niệm cơ bản đằng sau quá trình phát triển trò chơi.
Nó cũng tuyệt vời để tạo nguyên mẫu cho một khái niệm cốt lõi. Nếu bạn thấy mình bị phân tâm bởi tính chất vật lý phức tạp của trò chơi hoặc hoạt hình ma quái, thì việc loại bỏ tất cả những thứ đó sẽ giúp bạn tập trung.
Hơn nữa, mã nguồn 24a2 là một tệp TypeScript duy nhất. Bạn có thể sử dụng nó để lấy cảm hứng, hoặc thậm chí sửa đổi nó, để tạo ra công cụ trò chơi tiên tiến hơn của riêng bạn.
Bạn sử dụng 24a2 như thế nào?
Bắt đầu với một mẫu cơ bản cho trò chơi của bạn:
<html>
<head>
<script
src="https://cdn.jsdelivr.net/gh/jamesroutley/24a2/build/engine.js">
</script>
<script src="game.js"></script>
</head>
<body></body>
</html>
Lưu ý cách điều này sử dụng mạng phân phối nội dung (cdn.jsdelivr.net) để lấy nguồn engine.js tệp, vì vậy bạn thậm chí không cần tải xuống hoặc cài đặt bất kỳ thứ gì.
Kịch bản thứ hai, trò chơi.js, là dành cho mã trò chơi của riêng bạn. Bắt đầu với mã làm việc tối thiểu tuyệt đối, để kiểm tra mọi thứ hoạt động bình thường:
new Game({}).run();
Chương trình nhỏ này sẽ hiển thị lưới 24a2 mặc định trong trình duyệt web của bạn:
Tiếp theo, bạn sẽ muốn làm quen với các chức năng gọi lại của 24a2 tạo thành cốt lõi của công cụ. Những khái niệm này có thể chuyển đổi qua các công cụ trò chơi, vì vậy, việc tìm hiểu cách chúng hoạt động sẽ mang lại lợi ích cho bạn ngoài việc sử dụng 24a2.
Có một số chức năng thiết yếu mà bạn có thể xác định và chuyển đến hàm tạo Game() thông qua một cấu hình mục tiêu.
let config = {
create: create,
update: update,
onKeyPress: onKeyPress,
onDotClicked: onDotClicked
};let game = new Game(config);
game.run();
24a2 gọi chức năng bạn chỉ định trong config.create khi nó khởi động. Bạn có thể sử dụng điều này để khởi tạo cấu hình của chính trò chơi của mình, thiết lập cấu trúc dữ liệu, v.v.
function create(game) {}
Chức năng cập nhật chạy định kỳ trong suốt thời gian chơi trò chơi của bạn. Đây là vòng lặp trò chơi chính, trong các công cụ khác, thường bao gồm các bước riêng biệt để cập nhật trạng thái trò chơi và vẽ lại màn hình. Với 24a2, bạn sẽ xử lý cả hai thao tác trong chức năng này.
function update(game) {}
Cuối cùng, để nắm bắt đầu vào, bạn sẽ muốn xử lý các lần nhấn phím mũi tên, nhấp chuột hoặc cả hai. 24a2 chuyển hướng đến chức năng onKeyPress của bạn khi người chơi nhấn phím mũi tên. Nó chuyển tọa độ x và y cho onDotClicked nếu họ nhấp vào một dấu chấm bằng chuột.
function onKeyPress(direction) {}
function onDotClicked(x, y) {}
Bạn có thể tạo loại trò chơi nào với 24a2?
Trang web 24a2 chứa ba trò chơi ví dụ bao gồm cả phần hướng dẫn. Những trò chơi khác mà nó giới thiệu là trò chơi Rắn săn mồi đơn giản và thử thách Trượt tuyết.
Kho lưu trữ GitHub bao gồm các liên kết đến một số trò chơi khác bao gồm Kẻ xâm lược không gian, Tic-Tac-Toe và chương trình Paint tối thiểu. You Killed a Bear nâng cao hơn và Maze Craze là một minh chứng tốt về cách xếp lớp đồ họa bổ sung lên trên lưới tiêu chuẩn.
24MadRush là một ‘bản sao’ Tetris sử dụng bảng màu rất tốt. Nó cũng bắt đầu với một hướng dẫn có thể chơi sáng tạo thể hiện các tính năng của nó.
Thông số kỹ thuật của trò chơi 24a2
24a2 rất hạn chế, theo thiết kế. Nhưng điều này cung cấp một cơ hội tuyệt vời cho sự sáng tạo. Một trong những mẹo hàng đầu để trở nên sáng tạo hơn là chấp nhận những ràng buộc.
Bên cạnh độ phân giải hạn chế, 24a2 hạn chế bạn:
- Một bảng màu chỉ có chín màu: những màu trong cầu vồng cộng với màu đen và xám.
- Đầu vào rất cơ bản: nhấn phím mũi tên và nhấp chuột trên lưới chấm.
- Im lặng: không có hỗ trợ âm nhạc hoặc hiệu ứng âm thanh nào.
Tuy nhiên, bạn luôn có thể viết mã JavaScript bổ sung để mở rộng trò chơi của mình ngoài những giới hạn này. Và, vì công cụ này là mã nguồn mở, nên bạn có thể tự do phát triển nó theo bất kỳ cách nào bạn thấy phù hợp.
Thúc đẩy bản thân đạt được những điều vĩ đại hơn với 24a2
Hãy thử tự kiểm tra với 24a2. Tạo lại một trò chơi cổ điển hoặc phát minh ra một trò chơi của riêng bạn. Trò chơi theo lượt, chẳng hạn như trò chơi trên bàn cờ, sẽ hoạt động rất tốt với công cụ này.
Nếu 24a2 khơi dậy niềm đam mê game dev trong bạn, bạn sẽ có rất nhiều cơ hội để tiếp tục cuộc hành trình. PICO-8, Godot, Unity và GameMaker đều là những lựa chọn phổ biến.