Xin chào mọi người, hôm nay mình sẽ viết về cách tạo một trò chơi trực tuyến nhiều người chơi đơn giản. Đến cuối hướng dẫn này, bạn sẽ có một máy chủ chức năng nơi người chơi có thể kết nối và lái xe xung quanh, sẽ chỉ có các tính năng cơ bản và bạn sẽ học cách tạo tất cả những thứ này từ đầu, có đủ chỗ để mở rộng càng nhiều càng tốt.
Bạn có thể kiểm tra trò chơi tại đây, nếu không có người chơi trực tuyến, chỉ cần tham gia bằng hai tab khác nhau
https. //trò chơi xe đơn giản. herokuapp. com/
Xin lưu ý rằng mã của tôi không hoàn hảo ở bất cứ đâu, nhưng tôi đảm bảo với bạn rằng tôi đang làm việc và học tập chăm chỉ để trở nên tốt hơn hết mức có thể, vì vậy nếu bạn thấy điều gì đó bạn muốn làm khác đi, đừng ngần ngại
Bạn có thể kiểm tra kho lưu trữ GitHub của dự án này tại đây
Cấu hình dự án
Chúng tôi sẽ bắt đầu bằng cách định cấu hình dự án của mình, vì vậy hãy tạo một thư mục ở đâu đó có tên
/node_modules/8 [hoặc bất kỳ tên nào bạn muốn]Truy cập nó bằng Dòng lệnh/Powershell/Bash hoặc bất kỳ thứ gì bạn sử dụng và chạy
/node_modules/9 trả lời các câu hỏi được nhắc cho bạnBây giờ hãy cài đặt một vài phụ thuộc
chạy
npm i --save-dev babel-cli babel-core babel-loader babel-preset-env babel-register html-webpack-plugin nodemon webpack uglifyjs-webpack-plugin@1.1.6để cài đặt các phụ thuộc phát triển của chúng tôi
và chạy để cài đặt các phụ thuộc của chúng tôi
npm i --save body-parser cors express socket.ioBây giờ hãy mở tệp
npm i --save body-parser cors express socket.io0 của bạn và hãy thêm một vài tập lệnh"scripts": {
"build": "webpack --progress --colors",
"dev": "nodemon client/server.js --exec babel-node"
},Bây giờ trên thư mục gốc của bạn, hãy tạo một tệp mới có tên
npm i --save body-parser cors express socket.io1 và chỉ cần thêm/node_modules/điều này sẽ ngăn node_modules được đẩy vào kho git của bạn
Tạo một tệp mới có tên là
npm i --save body-parser cors express socket.io2Điều này sẽ cho phép chúng tôi sử dụng các tính năng của ES6 và cũng sẽ đóng gói trò chơi của chúng tôi trong một thư mục
npm i --save body-parser cors express socket.io3Chuyển đến thư mục gốc của chúng tôi và tạo một thư mục có tên
npm i --save body-parser cors express socket.io0 và thêm tệp npm i --save body-parser cors express socket.io1 từ kho lưu trữKhách hàng
Bây giờ trên thư mục gốc của bạn, hãy tạo một thư mục khác, lần này đặt tên là
npm i --save body-parser cors express socket.io2 và thêm hai tệp vào bên trong thư mục đómục lục. html
Ở đây, chúng tôi đặt lại lề của trang và thêm hai tập lệnh, phaser và ổ cắm của chúng tôi. io được lấy từ máy chủ
mục lục. js
Thao tác này sẽ bắt đầu trò chơi của chúng ta, đặt độ phân giải màn hình bên trong chức năng
npm i --save body-parser cors express socket.io3 của chúng tabây giờ đừng lo lắng về việc nhập khẩu
npm i --save body-parser cors express socket.io4Bên trong thư mục
npm i --save body-parser cors express socket.io2 của bạn, hãy tạo cấu trúc thư mục sauthư mục tài sản
Bạn có thể tìm thấy cả hai hình nhân vật ở đây, tôi đã tự tạo hình nhân vật
npm i --save body-parser cors express socket.io6 và lấy hình nhân vật nhân vật npm i --save body-parser cors express socket.io7 từ tìm kiếm trên internet về "ô tô điểm ảnh từ trên xuống miễn phí", nếu chủ sở hữu/người tạo thực sự của hình nhân vật xe hơi muốn ghi công hoặc để tôi gỡ nó xuống chỉ Bên trong thư mục
npm i --save body-parser cors express socket.io2 của bạn, tạo một thư mục khác có tên là npm i --save body-parser cors express socket.io9 với hai tệp có tên là "scripts": {
"build": "webpack --progress --colors",
"dev": "nodemon client/server.js --exec babel-node"
},0 và "scripts": {
"build": "webpack --progress --colors",
"dev": "nodemon client/server.js --exec babel-node"
},1mục lục. js
trình tải tệp. js
Ở đây, chúng tôi xác định màu nền mặc định cho canvas của trò chơi và chúng tôi cũng tải hai họa tiết.
npm i --save body-parser cors express socket.io6 và npm i --save body-parser cors express socket.io7Bây giờ hãy tạo một thư mục mới bên trong thư mục
npm i --save body-parser cors express socket.io2 của chúng tôi có tên là "scripts": {
"build": "webpack --progress --colors",
"dev": "nodemon client/server.js --exec babel-node"
},5 và bên trong thư mục mới này, chúng tôi sẽ tạo một vài thư mục khác- thế giới
- đồ dùng
- ổ cắm
- phỏng đoán
- người chơi
Vì vậy, hãy bắt đầu bằng thư mục
"scripts": {
"build": "webpack --progress --colors",
"dev": "nodemon client/server.js --exec babel-node"
},6. Tạo một tệp có tên "scripts": {
"build": "webpack --progress --colors",
"dev": "nodemon client/server.js --exec babel-node"
},7 bên trong nóBây giờ hãy tạo thư mục
"scripts": {
"build": "webpack --progress --colors",
"dev": "nodemon client/server.js --exec babel-node"
},8 và một tệp có tên "scripts": {
"build": "webpack --progress --colors",
"dev": "nodemon client/server.js --exec babel-node"
},1 bên trong thư mục đóĐó là thư mục
"scripts": {
"build": "webpack --progress --colors",
"dev": "nodemon client/server.js --exec babel-node"
},8, hãy tạo thư mục /node_modules/1người chơi mới. js
Chúng tôi sử dụng sự kiện ổ cắm này để phát ra máy chủ của mình rằng chúng tôi đang tạo một người chơi mới trong trò chơi của mình
cập nhậtNgười chơi. js
Chúng tôi sử dụng sự kiện ổ cắm này để cập nhật tất cả các vị trí và dữ liệu của người chơi
Bây giờ trên thư mục
/node_modules/2, hãy tạo một tệp có tên /node_modules/3Đây sẽ là phép nội suy duy nhất chúng ta sẽ thực hiện
Bây giờ hãy tạo một thư mục có tên
/node_modules/4 sẽ chứa hai tệptạoPlayer. js
Ở đây, chúng tôi thêm nhân vật
npm i --save body-parser cors express socket.io7 của mình vào trò chơi và kích hoạt tính năng vật lý cho trò chơimục lục. js
Trong tệp này, cuối cùng chúng tôi đã chỉ định một nhân vật cho trình phát của mình, cung cấp cho anh ta một số thuộc tính và giúp anh ta có thể lái xe xung quanh
Bây giờ, hãy chuyển đến thư mục
"scripts": {
"build": "webpack --progress --colors",
"dev": "nodemon client/server.js --exec babel-node"
},5 của bạn và tạo một tệp có tên /node_modules/7Thư mục khách hàng của bạn sẽ trông như thế này
thư mục khách hàng
Chúng tôi đã hoàn thành với thư mục khách hàng
Người phục vụ
Bây giờ chúng ta cần xử lý máy chủ của trò chơi, vì vậy hãy tạo một thư mục có tên là
/node_modules/8 và thêm một thư mục có tên là npm i --save body-parser cors express socket.io9 vào bên trong thư mục đó và trong thư mục gốc của /node_modules/8, hãy thêm một tệp có tên là "scripts": {
"build": "webpack --progress --colors",
"dev": "nodemon client/server.js --exec babel-node"
},1thư mục máy chủ
Bên trong thư mục cấu hình, tạo một tệp mới có tên
"scripts": {
"build": "webpack --progress --colors",
"dev": "nodemon client/server.js --exec babel-node"
},1Và bên trong thư mục gốc của máy chủ
"scripts": {
"build": "webpack --progress --colors",
"dev": "nodemon client/server.js --exec babel-node"
},1Đó là hướng dẫn này, chúng tôi đã tạo một trò chơi trực tuyến nhiều người chơi cơ bản, nơi người chơi có thể kết nối và lái xe xung quanh, chúng tôi cũng hiển thị tên của người chơi [là id ổ cắm của anh ấy] và tốc độ hiện tại của anh ấy
Nếu bạn thích hướng dẫn ngắn này, hãy theo dõi tôi trên medium hoặc github và gắn dấu sao cho kho lưu trữ. Đừng quên kiểm tra sớm vì tôi sẽ làm thêm những việc này