HTML5 Canvas Lập Trình Game 2D

Flash là một công nghệ rất hiệu quả, phổ biến và cho phép lập trình viên có thể tạo ra những ứng dụng với đầy đủ các hiệu ứng hình ảnh, âm thanh đặc sắc. Những công nghệ tương tự như Java Applet hay một “đứa con” sáng giá của Microsoft là Silverlight cũng không thể đứng vững và cạnh tranh được với Flash. Nhưng một vấn đề nảy sinh ở đây là khả năng tương tác giữa các công nghệ này với các thành phần xung quanh nó (như các thẻ HTML) dường như không thể. Chúng bị cô...
Nội dung trích xuất từ tài liệu:
HTML5 Canvas Lập Trình Game 2D YIN YANG2012 HTML5 Canvas - Lập Trình Game 2D v1.0 Lý thuyết và demo thực hành về lập trình game 2D với API Canvas trong Html5 http://vietgamedev.net/ http://yinyangit.wordpress.com/ 1/7/2012Yin Yang HTML5 Canvas - Lập trình Game 2D 2 |P ageYin Yang HTML5 Canvas - Lập trình Game 2D LỜI TỰA Flash là một công nghệ rất hiệu quả, phổ biến và cho phép lập trình viên có thể tạo ra nhữngứng dụng với đầy đủ các hiệu ứng hình ảnh, âm thanh đặc sắc. Những công nghệ tương tự nhưJava Applet hay một “đứa con” sáng giá của Microsoft là Silverlight cũng không thể đứng vữngvà cạnh tranh được với Flash. Nhưng một vấn đề nảy sinh ở đây là khả năng tương tác giữa cáccông nghệ này với các thành phần xung quanh nó (như các thẻ HTML) dường như không thể.Chúng bị cô lập và hoạt động độc lập với thế giới bên ngoài. Giải pháp là quay trở lại sử dụng thuần HTML, Javascript và CSS, lập trình viên vẫn có thểtạo được ra ứng dụng với hiệu ứng đặc biệt và không bị các giới hạn mà những công nghệ trêngặp phải. Nhưng trở ngại lớn nhất là không có đủ API để tạo ra được những ứng dụng tương tựnhư trên Flash. Và tốc độ của các ứng dụng thuần HTML khá chậm, hầu như không thể chấpnhận được với một game có yêu cầu cấu hình trung bình. Nhưng với sự ra đời của HTML5 cùng với các thành phần và API mới, giới hạn trên đã bị phábỏ và đang từng bước thay thế dần các công nghệ như Flash. Với các ứng dụng cần những hiệuứng đồ họa và chuyển động đặc biệt, lập trình viên có thể sử dụng Canvas với kiểu bitmap hoặcSVG với kiểu vector. Không chỉ áp dụng cho việc thiết kế các trang web trực quan, HTML5 cònđược áp dụng để tạo ra các thư viện đồ họa giúp tạo ra các ứng dụng đồ thị, game trong cả môitrường 2D và 3D như những ứng dụng trên desktop. Một điều đáng mừng nữa là HTML, Javascript và CSS không còn bị giới hạn trên trình duyệtmà có thể được triển khai trên desktop dưới dạng các widget, trên các thiết bị di động và có thểbất kì thiết bị nào. Như vậy, lập trình viên không cần sử dụng hay yêu cầu người dùng cài đặt bấtkì thư viện nào để có thể chạy được các ứng dụng của họ. Một lợi thế rất lớn mà chỉ có HTMLmới có thể đạt được. Tuy nhiên việc xây dựng game trên trình duyệt có thể là một trải nghiệmkhó khăn vì phải cân nhắc giữa việc chọn lựa giữa các thư viện hiện đại, đầy đủ chức năng haylàm theo các API cấp thấp của HTML (thông qua Javascript). Quá trình thực hiện sách này không thể tránh khỏi sai sót, bạn đọc có thể gửi phản hồi tạihttp://vietgamedev.vn hoặc blog http://yinyangit.wordpress.com hoặc gửi email trực tiếp cho tôi(yinyang.it@gmail.com) để thắc mắc, trao đổi cũng như giúp tôi sửa đổi, cập nhật nếu cần thiết.Xin cảm ơn! 3 |P ageYin Yang HTML5 Canvas - Lập trình Game 2DMục lụcA. GIỚI THIỆU .......................................................................................................................... 9B. HTML5 và các API mới....................................................................................................... 10 I. Web Storage (DOM Storage)............................................................................................. 10 1. Giới thiệu .................................................................................................................... 10 2. Interface Storage ......................................................................................................... 10 3. Local Storage và Session Storage ............................................................................... 11 4. Sử dụng ....................................................................................................................... 12 5. Storage event .............................................................................................................. 14 6. Thêm các phương thức vào Storage ........................................................................... 15 II. Web SQL Database ........................................................................................................ 16 1. Giới thiệu .................................................................................................................... 16 2. Open Database ............................................................................................................ 16 3. Transaction ................................................................................................................. 17 4. Execute SQL ............................................................................................................... 17 III. Web Worker ................................................................................................................... 18 1. Giới thiệu .................................................................................................................... 18 2. Ví dụ đơn giản nhất: ................................................................................................... 19 3. Kết luận....................................................................................................................... 20 IV. Tạo chuyển động với WindowAnimationTiming API.................................... ...