Nghiên cứu và xây dựng ứng dụng game thời gian thực với node JS

MỤC LỤC MỤC LỤC i DANH MỤC BẢNG iii DANH MỤC HÌNH VẼ .iv DANH SÁCH CÁC CHỮ VIẾT TẮT, CHỮ TIẾNG ANH .iv MỞ ĐẦU .1 Chương 1: TỔNG QUAN 1.1Lý chọn đề tài .2 1.2 Mục đích yêu cầu 1.2.1 Nhiệm vụ của luận án 1.2.2 Yêu cầu .3 1.3 Bố cục đề tài Chương 2: CƠ SỞ LÝ THUYẾT 2.1 Tổng quan về ngôn ngữ JavaScript 2.1.1 Định nghĩa 2.1.2 Các yếu tố JavaScript .6 2.1.2 Các thư viện sử dụng luận văn 17 2.2 MongoDB .261 2.2.1 Định nghĩa .261 2.2.2 Lịch sử đời 268 2.2.3 Các đặc điểm MongoDB 295 2.2.4 Ưu điểm MongoDB 371 2.2.5 Ứng dụng MongoDB .395 2.3 Tổng quan về Node.JS 410 2.3.1 Định nghĩa 411 2.3.2 Cài đặt Node.JS .436 2.3.3 Đặc điểm Node.JS 449 2.3.4 Những tính Node.JS .494 2.3.5 Node package manager (NPM) 524 i 2.4 Tổng quan về HTML5 585 2.4.1 Định nghĩa .586 2.4.2 Thành phần cấu trúc .598 2.4.3 Các tính mới HTML5 598 Chương 3: PHƯƠNG PHÁP THỰC HIỆN 642 3.1 Kịch demo .642 3.2 Nền tảng xây dựng .688 3.3 Các giai đoạn xây dựng game 699 3.3.1 Sơ lược các giai đoạn xây dựng game 710 3.4 Xây dựng sơ đồ ca sử dụng (use case) 773 3.5 Xây dựng chi tiết 786 3.5.1 Xây dựng server 791 3.5.2 Xây dựng client 1195 3.6 Xây dựng sơ đồ hoạt động 1440 3.7 Cấu trúc demo .1567 3.8 Demo sau xây dựng hoàn chỉnh 1645 Chương 4: KẾT LUẬN 1649 4.1 Kết đạt .1650 4.2 Hướng phát triển .1679 TÀI LIỆU THAM KHẢO .1703 ii DANH MỤC BẢNG iii DANH MỤC HÌNH VẼ DANH SÁCH CÁC CHỮ VIẾT TẮT, CHỮ TIẾNG ANH Các chữ viết tắt: API (Application Program Interface): giao diện lập trình ứng dụng DOM (Document Object Model): Là mô hình cho phép truy xuất đến thành phần tài liệu có cấu trúc DNS (Domain Name System): hệ thông cung cấp tên miền HTML5 Languag (Hyper Text Markup e): Ngôn ngữ đánh dấu siêu văn phiên thứ iv HTTP (Hypertext Transfer Protocol): Giao thức truyền tải siêu văn JSON (JavaScript Object Notation): Là cú pháp để lưu trữ trao đổi thông tin văn REPL(Read-evel-print-loop): môi trường tương tác chương trình máy tính UDP (user Datagram Protocol) giao thức mạng Các chữ tiếng Anh: Canvas khung hình chữ nhật dùng để vẽ đồ hoạ Client máy nhận hoặc gửi thông tin tới cho máy chủ (server) EaselJS thư viện hỗ trợ HTML5 Canvas MongoDB sở liệu thuộc họ NoSQL Node.JS hệ thống xây dựng tảng engine V8 google Server máy chủ mạng, có quyền điều khiển cung cấp dịch vụ cho máy khác v Sprite lớp EaeslJS giúp tạo hình ảnh chuyển động cách ghép ảnh lại với vi MỞ ĐẦU Ngày nay, nhờ phát triển mạnh mẽ ứng dụng di động mạng xã hội, người ta sử dụng Internet từ đâu, dẫn đến bùng nổ số lượng người truy cập web Theo khảo sát trung tâm nghiên cứu PEW, Mỹ ¾ dân số Mỹ sử dụng điện thoại di động để lướt web Để đáp ứng lượng truy cập lớn vậy, đòi hỏi hệ thống siêu máy chủ phải mở rộng lớn phải có mặt khắp nơi giới Tuy nhiên, với đà tăng trưởng theo cấp số nhân chưa phải giải pháp hữu hiệu Do đó, người ta cho đời Node.JS công nghệ giúp nâng cấp giải pháp xây dựng web cho tương lai Đối với web server truyền thống, tài nguyên web yêu cầu, server tạo luồng riêng biệt hay gọi lên tiến trình để xử lý yêu cầu Nhược điểm cách giải tự giới hạn khả đáp ứng yêu cầu người dùng tính toán thời gian thực Node tiếp nhận yêu cầu, đưa phương pháp đáp ứng cho phù hợp thay tạo luồng hay tiến trình Mặt khác, hầu hết hàm Node không trực tiếp thực nhập xuất nên tiến trình không bị khóa người sử dụng lo lắng vấn đề treo Kiểu xử lý yêu cầu Node ưu tiên đến trước Ngoài ra, ngôn ngữ Node JavaScript nên người dùng sử dụng cách dễ dàng mà không cần phải học thêm ngôn ngữ Hơn nữa, người dùng chọn môi trường phát triển cho Node Chương 1: TỔNG QUAN 1.1 Lý chọn đề tài Plants vs Zombies Popcap game người dùng ưa thích nội dung hay đa dạng cách dàn dựng Tuy nhiên, game hỗ trợ phiên người chơi nên hai người chơi tương tác với Để làm điều này, trước hết phải xây dựng server Node.JS để game chạy server Từ nhu cầu đó, để hiểu rõ cách ứng dụng công nghệ Node.JS, đề tài "Nghiên cứu xây dựng game ứng dụng thời gian thực với Node.JS” thực 1.2 Mục đích yêu cầu 1.2.1 Nhiệm vụ của luận án - Nghiên cứu Node.JS Socket.IO - Nghiên cứu về ngôn ngữ HTML5, thẻ Canvas và thư viện JavaScript hỗ trợ cho thẻ Canvas - Viết Client game sử dụng HMTL5 và thẻ Canvas - Xây dựng mô hình server Node.JS để xử lý liệu cho game 1.2.2 Yêu cầu - Xây dựng game có giao diện thân thiện với người sử dụng - Có thể tương tác qua lại người chơi với - Tốc độ xử lý game phải đáp ứng số lượng lớn người truy cập 1.3 Bố cục đề tài Khoá luận tập trung nghiên cứu vấn đề sau: i g h w a y N o r t h , S e b a s t o p o l , C A 1707 , U S A [ ] J a m e s W i l l i a m s o 1708 n 1 H T M L F i r s t L o o k [ ] 1709 J o e M a r i n i , H T M L : G r a p h i c s a 1710 n d A n i m a t i o n w i t h C a n v a s [ ] J 1711 o s e p h L e B l a n c e 2 N o d e J S 1712 F i r s t L o o k [ ] S h e l l y P o w e r s , 1713 L e a r n i n g N o d e O ’ R e i l l y M e d i 1714 a , I n c 1 0 G r a v e n s t e i 1715 n H i g h w a y N o r t h , S e b a s t o p o l , 1716 C A , U S A [ ] h t t p : / / c r e a t 1717 e j s c o m / D o c s / E a s e l J S / i n d e x h t 1718 m l 1719 s / T w e e n J S / m o d u l e _ T w e e n J S h t m l 1720 1721 [...]... lý do và mục đích của đề tài Chương 2: Cơ sở lý thuyếtchương này tập trung nghiên cứu ngôn ngữ JavaScript, công nghệ Node. JS, HTML5 Canvas, các thư viện hỗ trợ Canvas và cơ sở dữ liệu MongoDB Chương 3: Phân tích và thiết kế - chương này chủ yếu nghiên cứu cơ sở thực tế, yêu cầu và phân tích thiết kế demo, gồm một số nội dung chính sau: • Phân tích các cảnh game, thiết kế giao diện game • Xây dựng sơ... của thân hàm Hàm gọi lại (callback): callback là hàm được thực thi sau khi hàm khác được thực thi Khi gọi một thực thể bên ngoài code Javascript, ví dụ một server, để trả lời phải mất nhiều giây và code thì không thể đợi được Hơn nữa, có những cuộc gọi đòi hỏi phải đáp ứng ngay lập tức và không thể chờ đợi được Khi gọi một hàm trả về một giá trị và nếu giá trị đó không bao giờ trả về code sẽ bị treo Callback... hoặc lớp dẫn xuất Mối quan hệ giữa lớp cha và lớp con còn được gọi là mối quan hệ chấp nhận được để sử dụng tương ứng Một lớp con được thừa kế các đặc tính và phương thức từ cha của chúng trong khi vẫn có thể được bổ sung thêm nhiều đặc tính và phương thức riêng của chúng Lớp con và lớp cha có thể được hiểu là một mối quan hệ Lớp con là lớp cha mà được thêm vào nhiều đặc điểm đặc biệt hơn Ví dụ: cam... mảng r một mới chứa một bản 13 copy nhỏ của mảng này với những mục dữ liệu (item) gắn Tên- liền với nó Gắn mục dữ mảng.push(item…) liệu vào phần cuối của mảng Không giống phương thức concat, nó làm biến đổi mảng và gắn vào tất cả các mục dữ liệu Tên-mảng.pop() của mảng Phương thức pop và push làm mảng hoạt động như một stack Phương thức pop sẽ loại bỏ và trở lại yếu tố sau cùng 14 Tên-mảng.join(giá... điều khiển sự có mặt và dòng đời của biến số và tham số Đó là một hoạt động rất quan trọng đối với người lập trình vì nó làm giảm việc trùng lặp tên và cung cấp quản lý bộ nhớ tự động JavaScript không có phạm vi khối như ngôn ngữ lập trình C, khi tất cả biến sẽ được khai báo trong một khối và không thể thấy được từ ngoài khối Vì vậy, tốt nhất là nên khai báo tất cả các biến được sử dụng trong hàm ở phần... cứu cơ sở thực tế, yêu cầu và phân tích thiết kế demo, gồm một số nội dung chính sau: • Phân tích các cảnh game, thiết kế giao diện game • Xây dựng sơ đồ hoạt động cho game và từng hành động trong game • Xây dựng thư viện cho client và server Chương 4: Kết luận – đây là phần tóm tắt báo cáo, đưa ra những mặt làm được, những hạn chế Từ đó đưa ra hướng phát triển 4 Chương 2: CƠ SỞ LÝ THUYẾT 2.1 Tổng... this.thuoctinhB = "giá trị"; }, phuong_thucB: function() { }}); Mẫu của createjs để thừa kế từ các lớp có sẵn của createjs đối với các lớp hình ảnh //Ví dụ mẫu một lớp thừa kế từ lớp createjs.Container (function(window) { SubClass = function(cacthamso) { this.initialize(cacthamso); } var p = SubClass.prototype = new createjs.Container(); p.Container_initialize = p.initialize; //Khai báo các thuộc tính... lớp cha và lớp con không tồn tại, người dùng không thể sử dụng thừa kế Cam là trái cây, vì vậy có thể viết rằng lớp Cam là lớp con của lớp Trái cây Ngược lại, khi trong bếp có chậu rửa, không thể nói được chậu rửa là bếp hoặc bếp là chậu rửa Trong demo của luận văn tôi sử dụng hai mẫu thừa kế: Mẫu class.extend được viết bởi John Resig, tôi sử dụng mẫu này để viết các lớp dữ liệu cho server và client... đối tượng, và giá trị của nó được xác định bởi mẫu gọi Đối số: tham số thêm luôn có sẵn cho hàm khi chúng được liên kết với mảng đối số Nó làm hàm có thể truy cập tất cả đối số được đưa ra cùng với liên kết, bao gồm cả các đối số thừa ra mà không được liên kết với tham số Điều đó cho phép viết những hàm có nhiều tham số không đặc trưng Vì lỗi thiét kế nên đối số không hẳn là một mảng Nó là... có phương thức mảng Trả về: khi một hàm được liên kết, nó sẽ bắt đầu thực hiện lệnh đầu tiên và sẽ kết thúc bằng } để đóng thân hàm Điều đó khiến hàm phải return lại phần điều khiển đến các phần có liên kết đến hàm Lệnh return được dùng để gọi hàm quay lại nhanh chóng Khi return được dùng, hàm sẽ ngay lập tức trả lại mà không cần thực hiện các lệnh còn lại Một hàm luôn trả về một giá trị Nếu giá trị ... tác với Để làm điều này, trước hết phải xây dựng server Node. JS để game chạy server Từ nhu cầu đó, để hiểu rõ cách ứng dụng công nghệ Node. JS, đề tài "Nghiên cứu xây dựng game ứng dụng thời gian. .. Canvas - Viết Client game sử dụng HMTL5 và thẻ Canvas - Xây dựng mô hình server Node. JS để xử lý liệu cho game 1.2.2 Yêu cầu - Xây dựng game có giao diện thân thiện với người sử dụng - Có thể tương... "Nghiên cứu xây dựng game ứng dụng thời gian thực với Node. JS thực 1.2 Mục đích yêu cầu 1.2.1 Nhiệm vụ của luận án - Nghiên cứu Node. JS Socket.IO - Nghiên cứu về ngôn ngữ HTML5, thẻ Canvas