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

Mặt khác, hầu hết hàm trong Node không trực tiếp thực hiện nhập xuất nên tiến trình sẽ không bị khóa và người sử dụng sẽ không phải lo lắng về vấn đề treo.. Ngoài ra, ngôn ngữ chính của

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 2

1.1Lý do chọn đề tài 2

1.2 Mục đích và yêu cầu 3

1.2.1 Nhiệm vụ của luận án 3

1.2.2 Yêu cầu 3

1.3 Bố cục đề tài 3

Chương 2: CƠ SỞ LÝ THUYẾT 5

2.1 Tổng quan về ngôn ngữ JavaScript 5

2.1.1 Định nghĩa 5

2.1.2 Các yếu tố trong JavaScript 6

2.1.2 Các thư viện sử dụng trong luận văn 17

2.2 MongoDB 261

2.2.1 Định nghĩa 261

2.2.2 Lịch sử ra đời 268

2.2.3 Các đặc điểm chính của MongoDB 295

2.2.4 Ưu điểm của MongoDB 371

2.2.5 Ứng dụng của 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 của Node.JS 449

2.3.4 Những tính năng của Node.JS 494

2.3.5 Node package manager (NPM) 524

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 năng mới trong HTML5 598

Chương 3: PHƯƠNG PHÁP THỰC HIỆN 642

3.1 Kịch bản 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 các sơ đồ hoạt động 1440

3.7 Cấu trúc của demo 1567

3.8 Demo sau khi xây dựng hoàn chỉnh 1645

Chương 4: KẾT LUẬN 1649

4.1 Kết quả đạt được 1650

4.2 Hướng phát triển 1679

TÀI LIỆU THAM KHẢO 1703

DANH MỤC BẢNG

DANH MỤC HÌNH VẼ

DANH SÁCH CÁC CHỮ VIẾT TẮT, CHỮ TIẾNG ANHCá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ột mô hình cho phép truy xuất

đến các thành phần của một tài liệu

có cấu trúc

DNS (Domain Name System): là hệ

thông cung cấp tên miền

HTML5 (Hyper Text Markup

siêu văn bản phiên bản thứ 5

HTTP (Hypertext Transfer

Protocol): Giao thức truyền tải siêu

văn bản

JSON (JavaScript Object Notation):

Là cú pháp để lưu trữ và trao đổi

thông tin văn bản

Client là máy nhận hoặc hoặc gửi

thông tin tới cho máy chủ (server)

EaselJS là thư viện hỗ trợ HTML5

Canvas

MongoDB là cơ sở dữ liệu thuộc họ

NoSQL

Node.JS là hệ thống được xây dựng

trên nền tảng engine V8 của google

Server là máy chủ trên mạng, có

quyền điều khiển hoặc cung cấp

dịch vụ cho các máy khác

Sprite là một lớp của EaeslJS giúp

tạo hình ảnh chuyển động bằng cách

ghép các ảnh lại với nhau

bùng nổ về số lượng người truy cập

web Theo khảo sát của trung tâm

nghiên cứu PEW, Mỹ thì ¾ dân số

Mỹ sử dụng điện thoại di động để

lướt web Để đáp ứng được lượng

truy cập lớn như vậy, đòi hỏi hệ

thống siêu máy chủ phải được mở

rộng lớn hơn và phải có mặt ở khắp

nơi trên thế giới Tuy nhiên, với đà

tăng trưởng theo cấp số nhân như

vậy thì đây vẫn chưa phải là giải

pháp hữu hiệu Do đó, người ta đã

cho ra đời Node.JS như một công

nghệ mới giúp nâng cấp các giải

pháp xây dựng web cho tương lai

Đối với các web server truyền

thống, mỗi khi tài nguyên web được

yêu cầu, server sẽ tạo ra một luồng

riêng biệt hay gọi lên một tiến trình

mới để xử lý yêu cầu Nhược điểm

của cách giải quyết này là tự giới

hạn khả năng đáp ứng yêu cầu của

người dùng và không thể tính toán

được thời gian thực Node khi tiếp

nhận một yêu cầu, nó sẽ đưa ra

phương pháp đáp ứng sao cho phù

hợp thay vì tạo luồng hay tiến trình

mới Mặt khác, hầu hết hàm trong

Node không trực tiếp thực hiện nhập

xuất nên tiến trình sẽ không bị khóa

và người sử dụng sẽ không phải lo

lắng về vấn đề treo Kiểu xử lý yêu

cầu của Node là ưu tiên những cái

đến trước Ngoài ra, ngôn ngữ chính

của Node là JavaScript nên người

dùng có thể sử dụng một cách dễ

dàng mà không cần phải học thêm

ngôn ngữ mới Hơn nữa, người dùng

còn có thể chọn môi trường phát

triển cho Node

Chương 1: TỔNG QUAN1.1 Lý do chọn đề tài

Plants vs Zombies của Popcap là

một game rất được người dùng ưa

thích vì nội dung hay và đa dạng về

cách dàn dựng Tuy nhiên, game chỉ

hỗ trợ phiên bản 1 người chơi nên

hai người cùng chơi sẽ không thể

tương tác được với nhau Để làm

được điều này, trước hết phải xây

dựng server Node.JS để game có thể

chạy trên nền server Từ nhu cầu đó,

và để hiểu rõ cách ứng dụng của

công nghệ Node.JS, đề tài "Nghiên

cứu và xây dựng game ứng dụng

thời gian thực với Node.JS” được

thực hiện

1.2 Mục đích và yêu cầu

1.2.1 Nhiệm vụ của luận án

Socket.IO

HTML5, thẻ Canvas và thư viện

JavaScript hỗ trợ cho thẻ Canvas

HMTL5 và thẻ Canvas

Node.JS để xử lý dữ liệu cho game

1.2.2 Yêu cầu

thân thiện với người sử dụng

- Có thể tương tác qua lại giữa

các người chơi với nhau

ứng được 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 các

vấn đề sau:

Chương 1: Giới thiệu lý do và

mục đích của đề tài

Chương 2: Cơ sở lý thuyết-

chươ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:

kế giao diện game

game và từng hành động trong

game

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

Chương 2: CƠ SỞ LÝ THUYẾT2.1 Tổng quan về ngôn ngữ JavaScript

2.1.1 Định nghĩa

JavaScript là ngôn ngữ kịch bản

dùng để tạo client, server-side

scripts được phát triển bởi hãng Sun

Microsystems và Netcape

JavaScript làm cho việc tạo các

trang web động và dễ tương tác hơn

Các ứng dụng của JavaScript chạy

trên trình duyệt web như Firefox,

Chrome…

JavaScript có thể được nhúng vào

file HTML theo một trong những

- Sử dụng trong các trình điều

khiển sự kiện

2.1.2 Các yếu tố trong JavaScript

2.1.2.1 Đối tượng

Những kiểu đơn giản trong

JavaScript là số, chuỗi, Boolean,

null và undefined Tất cả giá trị khác

đều là đối tượng Số, chuỗi và

Boolean cũng là đối tượng có

phương thức, nhưng chúng không

thay đổi Trong JavaScript, mảng,

hàm, biểu thức thông thường là đối

tượng và dĩ nhiên đối tượng là đối

tượng

Một đối tượng bao gồm nhiều thuộc

tính Tên của thuộc tính có thể là

chuỗi bất kỳ hoặc chuỗi rỗng, thuộc

tính có thể có bất kỳ giá trị trừ

undefined

Đối tượng trong JavaScript là lớp tự

do Không có hạn chế về số lượng

tên của thuộc tính mới hay giá trị

của thuộc tính Đối tượng dùng để

thu thập và sắp xếp dữ liệu Đối

tượng có thể chứa đối tượng khác, vì

vậy chúng có thể dễ dàng đại diện

cho cấu trúc cây hay cấu trúc đồ

họa

JavaScript bao gồm đặc điểm liên

kết prototype cho phép một đối

tượng thừa kế từ thuộc tính của đối

tượng khác Nếu sử dụng tốt, nó có

thể làm giảm thời gian khai báo đối

tượng và giảm tiêu thụ bộ nhớ

Cách tạo đối tượng thường được

dùng hiện nay là đối tượng thuần

Ưu điểm của nó là cung cấp một

kiểu rất tiện lợi để tạo ra những giá

trị cho đối tượng mới

Ví dụ: Một giá trị của thuộc tính có

thể chứa bất kỳ biểu thức, kể cả đối

tượng thuần

 Các đặc tính của đối tượng

Lấy giá trị Có thể lấy giá trị từ đối tượng bằng cú pháp

Tên-object[“tên-thuộc-tính”] // “ giá-trị-thuộc-tính”

Tên-object[“tên-thuộc-tính”] = ”giá-trị-muốn-cập-nhật”

thừa kế thuộc tính

Kiểm tra thuộc

2.1.2.2 Hàm

Các hàm trong JavaScript đều là các đối tượng nên nó cũng có thể được dùng như bất cứ giá trị nào khác Hàm có thể được lưu trữ trong biến, đối tượng và mảng Hàm có thể được truyền như là đối số của một hàm khác và hàm cũng có thể được trả về từ một hàm khác Ngoài ra hàm cũng là đối tượng nên nó cũng có thể có phương thức và có thuộc tính là prototype

Một hàm thuần chia ra 4 phần Phần đầu là từ đặt trước hàm Phần thứ 2 là tên hàm Phần thứ 3 là thiết lập tham số hàm, được bao trong ngoặc () Phần thứ 4 là thiết lập các lệnh, được bao trong ngoặc {} Những câu lệnh này là thân hàm, chúng thực thi khi hàm

dc gọi

Hàm có thể xuất hiện ở bất cứ nơi nào có khai báo Hàm cũng có thể được định nghĩa bên trong một hàm khác Vì vậy, hàm con có thể truy cập tham số và biến không chỉ của chính nó mà còn của hàm mà nó lồng vào

Gọi Hàm: việc gọi một hàm sẽ làm dừng hàm đang thực thi, truyền điều khiển và

tham số đến hàm mới Thêm vào tham số được khai báo thì mỗi hàm nhận được 2 tham số thêm: this và những đối số Tham số this thì rất quan trọng trong lập trình hướng đố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à một đối tượng giống mảng Đối số cũng có tài nguyên length nhưng không 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ị của return không đặc biệt, nó sẽ trả về undefined

Đệ quy: hàm đệ quy là hàm có thể tự gọi chính nó, dù là trực tiếp hay gián tiếp Đệ

quy là một kỹ thuật lập trình mạnh mẹ mà trong đó các vấn đề sẽ được chia nhỏ ra thành các set gồm nhiều vấn đề nhỏ giống nhau, mà mỗi set sẽ được giải quyết bằng các giải pháp rất đơn giản Nhìn chung, hàm đệ quy sẽ tự gọi chính nó để giải quyết các vấn đề của nó Hàm đệ quy hiệu quả trong việc điều khiển các cấu trúc dạng cây phân nhánh như trình tìm kiếm DOM Mỗi lần gọi đệ quy sẽ đưa ra một mảnh nhỏ hơn của cây phân nhánh để hoạt động

Phạm vi: trong ngôn ngữ lập trình đ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 trên 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 giúp giải quyết vấn đề đó, hàm sẽ không bao giờ được gọi cho đến khi kết quả đã sẵn sàng

Ví dụ: Hàm addEventListener được gắn cho nhiều mục đích khác nhau Cú pháp:

được gọi là lớp con 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 là trái cây thuộc họ cam quýt nhưng vẫn có thể được gọi chung là trái cây Chó chăn cừu cũng là một giống chó nhưng có thể gọi chung là động vật Nếu mối quan

hệ giữa 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

//Tạo một lớp với Class.extend()

var A = Class.extend({

//Lớp dẫn xuất

init: function(thamso_1, thamso_2, thamso_n ) {

//Khai báo các thuộc tính của lớp A

//Thừa kế thuộc tính lớp A

this._super(thamso_1, thamso_2, thamso_n);

//Khai báo các thuộc tính của lớp B

//Khai báo các thuộc tính của lớp

p.thuoctinh = "giá trị khởi tạo";

2.1.2.4 Mảng

Mảng trong JavaScript cung cấp một

đối tượng có một số đặc điểm giống

mảng thông thường Nó chuyển đổi

thành phần của mảng thành chuỗi

dùng làm thuộc tính Việc lấy giá trị

và cập nhật thuộc tính của mảng

giống như đối tượng

Việc gọi một hàm sẽ làm dừng hàm

đang thực thi, truyền điều khiển và

tham số đến hàm mới Thêm vào

tham số được khai báo thì mỗi hàm

nhận được 2 tham số thêm: this và

những đối số Tham số this thì rất

quan trọng trong lập trình hướng đối

tượng, và giá trị của nó được xác

định bởi mẫu gọi Cũng như đối

tượng thuần, mảng thuần cung cấp

một cách rất tiện lợi cho việc tạo ra

giá trị mới của mảng

Trong hầu hết các ngôn ngữ, các yêu

tố trong mảng phải cùng kiểu Tuy

nhiên JavaScripts cho phép một

mảng có thể chứa nhiều kiểu dữ liệu

khác nhau

 Các đặc tính của mảng

Đặc tính Mô tả

dài mảng) hạn Mảng sẽ tự động tăng chiều dài nếu yếu tố được lưu trữ có phần

tử lớn hơn giá trị hiện tại

Giá trị thuộc tính là giá trị integer tên thuộc tính trong mảng + 1.Delete(xoá) Vì mảng là đối tượng nên có thể loại bỏ các yếu tố từ mảng

các thuộc tính trong mảng Nhưng có một số trường hợp không bảo đảm thứ tự thuộc tính Tuy nhiên vòng lặp for của JavaScript có thể hoạt động như ngôn ngữ C

mảng Các phương thức là những hàm được lưu trữ trong Array.prototype

Mảng mới với [] sẽ có giá trị rỗng và khi truy cập sẽ nhận được giá trị undefined

Mảng nhiều chiều

JavaScript không có mảng nhiều chiều, nhưng có thể tạo mảng trong mảng

Bảng 2 2 Các đặc tính của mảng

2.1.2.5 Phương thức

Một số phương thức trong JavaScript:

 Các phương thức của mảng

Tên phương thức Mô tả

mảng.concat(item…)

Tên-Tạo r một mảng mới chứa một bản

copy nhỏ của mảng nàyvới những mục dữ liệu (item) gắn liền với nó Tên-

mảng.push(item…)

Gắn mục dữ liệu vào phần

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ữ

mảng

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 của mảng.Tên-mảng.join(giá trị

phân cách)

Phương thức join làm ra

một chuỗi từ một mảng, phân cách giữa chúng mặc định là

“,”

shift loại bỏ yếu tố đầu

mảng

Bảng 2 3 Các phương thức của mảng

 Các phương thức của số

Tên phương thức Mô tả

toFixed(fractionDigits)

Chuyển số thành một chuỗi dạng thập phân.Trong khoảng từ 0 đến 20 Số mặc định là 0

Bảng 2 4 Các phương thức của số

 Các phương thức của chuỗi

hơn 0 và lớn hơn giá trị chuỗi, trả về chuỗi rỗng

trả về một trị nguyên của điểm giá trị của ký tự

về vị trí pos trong chuỗi

chuỗi

Tên-chuỗi.IndexOf(chuỗi tìm, vị trí) Tìm chuỗi bên trong một chuỗi lớn Nếu tìm

thấy, nó sẽ trả về vị trí của ký tự đầu tiên trùng lặp, ngược lại nó sẽ trả về giá trị -1

Tên-chuỗi.lastindexOf(searchString, position)

Tương tự như indexOf trừ việc nó tìm kiếm từ cuối chuỗi thay vì đầu chuỗi

Bảng 2 5 Các phương thức của chuỗi

 Các phương thức của đối tượng

Tên phương thức Mô tả

Object.hasOwnProperty(Name)

Trả về giá trị true nếu đối tượng chứa thuộc

name

Phương thức này sẽ không sử dụng được khi name là hasOwnProperty

Bảng 2 6 Các phương thức của đối tượng

2 1 2

C a

c

t h ư

v i ê

n

s ư

̉ d u

n g

viện

đồ

hoạ

thuộc

nhómt

viện

CreateJS

hỗ

trợ

choH

Canvas,

cung

cấp

mộtcá

để

làm

việc

với

danh

sách

đối

tượng

trong

Canvasvà

lý

chúng

một

cách

dễdà

lớp

trong

easelJS:

L ớ p

D i s p l a y O b j e c t :

DisplayObject

lớp

trừu

tượng

không

phải

xây

dựng

trực

tiếp

màth

vì

vậy

là

các

lớp

con

như

Bitmap

và

Shape.D

là

lớp

cơ

bảnch

tất

cả

những

lớp

hiển

thịt

thư

viện

EaselJS

Nó

địn