Đồ Án Lập trình game với HTML 5

* MỤC LỤC.* MỤC LỤC. 2
* DANH MỤC CÁC TỪ VIẾT TẮT. 4
* DANH MỤC CÁC HÌNH. 4
* GIỚI THIỆU. 5
Chương I: Tổng quan công nghệ HTML5 và CSS3. 7
1. Cơ bản về HTML5 và CSS. 7
2. Từ HTML đến HTML5. 7
a. Khả năng tương thích. 8
b. Tính tiện dụng. 8
c. Khả năng hoạt động xuyên suốt giữa các trình duyệt 9
d. Khả năng truy xuất rộng rãi 9
3. CSS3 và Javascript. 13
4. HTML5 và CSS3. 14
a. Video và hiệu ứng Flash. 15
b. Công cụ thiết kế mới 16
c. Khả năng tương thích HTML5. 16
5. Kết luận. 17
Chương II: Canvas 2D API. 18
1. Vẽ ảnh và thao tác với pixel. 19
a. Nạp và vẽ ảnh. 19
b. Thao tác với pixel. 20
2. Chọn và di chuyển đối tượng. 21
a. Tạo cấu trúc dữ liệu. 21
b. Các phương thức vẽ bằng context. 22
c. Các sự kiện chuột của Canvas. 23
Chương III: Lập trình game xếp hình. 25
1. Giới thiệu game xếp hình. 25
2. Tổng quát vài nét xây dựng game xếp hình. 25
a. Xây dựng giao diện cho trò chơi. 25
b. Xây dựng các hàm trong game. 29
* KẾT LUẬN. 34
* TÀI LIỆU THAM KHẢO. 35









* DANH MỤC CÁC TỪ VIẾT TẮT. HTML (HyperText Markup Language): Ngôn ngữ Đánh dấu Siêu văn bản.
HTML DOM (Document Object Model for HTML).
CSS (Cascading Style Sheet).
DOM (Document Object Model).
API (Application Programming Interface).
RIA (Rich Internet Application).
* DANH MỤC CÁC HÌNH.Hình 1: Minh họa CSS. 11
Hình 2: Ứng dụng HTML5 trong mobile. 12
Hình 3: Các trình duyệt hỗ trợ HTML5 và CSS3. 13
Hình 4: Mô tả các pixel trong ảnh gồm các giá trị RGBA 17
Hình 5: Kết quả mô tả đoạn code trên. 21
Hình 6: Giao diện chính trò chơi xếp hình. 22
Hình 7: Giao diện cơ bản của game. 25




LẬP TRÌNH GAME VỚI HTML5
GIỚI THIỆU.HTML5 được hỗ trợ hầu trên tất cả trình duyệt. Nó là một tập hợp các tính năng đặc biệt. nhưng ta có thể tìm thấy hỗ trợ cho một số phần đặc trưng như canvas, video hoặc định vị địa lý. Những đặc điểm kỹ thuật HTML5 cũng xác định làm thế nào những dấu ngoặc nhọn tương tác với JavaScrip, thông qua các tài liệu thông qua các tài liệu Object Model (DOM) HTML5 không chỉ xác định một tag <video>, đó cũng là một DOM API tương ứng cho các đối tượng video trong DOM. Bạn có thể sử dụng API này để tìm kiếm hỗ trợ cho các định dạng video khác nhau, nghe nhạc, tạm dừng một đoạn video, mute audio , theo dõi bao nhiêu video đã được tải về, và mọi thứ khác bạn cần phải xây dựng một trải nghiệm người dùng phong phú xung quanh tag <video> .
Không cần phải vứt bỏ bất kì thứ gì:
Ta không thể phủ nhận rằng HTML 4 là các định dạng đánh dấu thành công nhất từ trước đến nay. HTML5 được xây dựng dựa trên thành công đó. Bạn không cần phải bỏ những đánh dấu hiện có. Bạn không cần phải học lại những điều bạn đã biết. Nếu ứng dụng web của bạn trước đây sử dụng HTML 4, nó vẫn sẽ hoạt động trong HTML5.
Bây giờ, nếu bạn muốn cải thiện các ứng dụng web, bạn đã đến đúng nơi. Ví dụ cụ thể: HTML5 hỗ trợ tất cả các hình thức kiểm soát từ HTML 4, nhưng nó cũng bao gồm điều khiển đầu vào mới. Một số trong số này là quá hạn bổ sung như các thanh trượt và date pickkers, những thành phần khác tinh tế hơn.
Ví dụ, các loại email input trông giống như một textbox, nhưng các trình duyệt linh động sẽ tùy biến bàn phím trên màn hình của họ để có thể dễ dàng hơn khi