Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng. NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN. …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… 1 | Sinh viên thực hiện: Trần Xuân Mạnh. Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng. * MỤC LỤC. * MỤC LỤC. 2 * DANH MỤC CÁC TỪ VIẾT TẮT. 3 * DANH MỤC CÁC HÌNH. 3 GIỚI THIỆU. 4 Chương I: Tổng quan công nghệ HTML5 và CSS3. 6 1. Cơ bản về HTML5 và CSS. 6 2. Từ HTML đến HTML5. 6 3. CSS3 và Javascript. 12 4. HTML5 và CSS3. 13 a. Video và hiệu ứng Flash 13 b. Công cụ thiết kế mới 14 c. Khả năng tương thích HTML5 15 5. Kết luận. 16 Chương II: Canvas 2D API. 16 1. Vẽ ảnh và thao tác với pixel. 17 a. Nạp và vẽ ảnh. 18 b. Thao tác với pixel. 18 2. Chọn và di chuyển đối tượng. 19 a. Tạo cấu trúc dữ liệu. 19 b. Các phương thức vẽ bằng context. 20 c. Các sự kiện chuột của Canvas. 21 Chương III: Lập trình game xếp hình. 23 1. Giới thiệu game xếp hình. 23 2. Tổng quát vài nét xây dựng game xếp hình. 24 a. Xây dựng giao diện cho trò chơi. 24 b. Xây dựng các hàm trong game. 27 2 | Sinh viên thực hiện: Trần Xuân Mạnh. Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng. KẾT LUẬN. 32 * TÀI LIỆU THAM KHẢO. 33 * 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 13 Hình 2: Ứng dụng HTML5 trong mobile 14 Hình 3: Các trình duyệt hỗ trợ HTML5 và CSS3 15 Hình 4: Mô tả các pixel trong ảnh gồm các giá trị RGBA 19 Hình 5: Kết quả mô tả đoạn code trên 23 Hình 6: Giao diện chính trò chơi xếp hình 24 3 | Sinh viên thực hiện: Trần Xuân Mạnh. Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng. Hình 7: Giao diện cơ bản của game 27 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 4 | Sinh viên thực hiện: Trần Xuân Mạnh. Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hư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 nhập địa chỉ email. Các trình duyệt cũ không hỗ trợ các loại email input sẽ xem nó như là một văn bản thông thường, và hình thức vẫn làm việc không có thay đổi đánh dấu hoặc kịch bản hack. Điều này có nghĩa là bạn có thể bắt đầu cải thiện các hình thức web của bạn ngày hôm nay, ngay cả khi một số khách truy cập vào web của bạn. Rất dễ dàng để bắt đầu: "Nâng cấp" lên HTML5 có thể đơn giản chỉ bằng việc thay đổi thẻ DOCTYPE của bạn. DOCTYPE cần phải nằm trong dòng đầu tiên của tất cả các trang HTML. Các phiên bản trước của HTML được định nghĩa rất nhiều loại doctype, và lựa chọn một doctype đúng rất rắc rối. Trong HTML5 chỉ có một DOCTYPE: <!DOCTYPE html> Nâng cấp lên DOCTYPE HTML5 sẽ không phá vỡ cấu trúc tài liệu của bạn, bởi vì các thẻ lỗi thời trước đây được định nghĩa trong HTML 4 vẫn được vẽ ra trong HTML5. Nhưng nó cho phép bạn sử dụng và xác nhận các thẻ mới như <article> <section> , <header> , và <footer>… 5 | Sinh viên thực hiện: Trần Xuân Mạnh. Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng. Chương I: Tổng quan công nghệ HTML5 và CSS3. 1. Cơ bản về HTML5 và CSS. Cascading Style Sheets, hay còn gọi tắt là CSS, là những file hỗ trợ cho trình duyệt Web trong việc hiển thị một trang HTML. Về cơ bản, các trang HTML như bộ xương - khuôn khổ cơ bản - của một trang web - trong khi các file CSS sẽ cụ thể hóa các thành phần của một trang nên được hiển thị như thế nào. CSS cho phép bạn kiểm soát phông chữ, màu chữ, kiểu nền , của một trang HTML. CSS làm cho việc thiết kế và xây dựng một trang Web trở nên dễ dàng hơn. Trước khi có CSS, bạn phải sử dụng HTML để thực hiện tất cả các tiêu đề cũng như các thành phần của một trang Web. Mặc dù đã có một số cách khác nhưng HTML vẫn thường xuyên được sử dụng và các nhà thiết kế Web sẽ phải thay đổi từng thành phần riêng lẻ trên mỗi trang. CSS đã giúp cho việc thay đổi phong cách của một trang Web đơn giản hơn và đỡ tốn thời gian hơn, bạn có thể thực hiện sự thay đổi trên một mục nào đó và sau đó apply sự thay đổi này trên toàn bộ trang Web thay vì phải thực hiện trên từng mục riêng lẻ như trước đây. 2. Từ HTML đến HTML5. HTML ra đời từ những năm 1989, do Tim Berners-Lee phát triển, sau đó nhanh chóng phổ biến nhờ tính dễ học và dễ sử dụng. HTML sử dụng các tag để đánh dấu từng đoạn văn bản. Một ví dụ đơn giản như: <p> This is a paragraph </p> 6 | Sinh viên thực hiện: Trần Xuân Mạnh. Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng. Phiên bản HTML đầu tiên của Tim Berners-Lee rất khác với những gì chúng ta đang sử dụng ngày nay, chẳng hạn như thiếu hẳn các chức năng định dạng văn bản. Tuy nhiên nhờ sự đơn giản của các tag này mà HTML được chấp nhận rộng rãi, và được đưa lên thành chuẩn. Trong vòng tám năm (1989 – 1997), HTML đã phát triển qua bốn cột mốc chính, với phiên bản gần đây nhất là HTML4. Phiên bản này cũng đánh dấu việc CSS1 được công nhận là chuẩn để định dạng trang web, và DOM trở thành chuẩn cho phép các ứng dụng JavaScript chạy thống nhất trên mọi trình duyệt. Với sự tăng trưởng ngày càng mạnh mẽ của Internet, các thuật ngữ như Web 2.0 và RIA (Rich Internet Application) hầu như hiện diện ở khắp nơi. Người sử dụng, được trang bị phần cứng nhanh hơn và băng thông mạng tốt hơn, cũng thường xuyên đặt ra những yêu cầu phức tạp. Web hiện đại không phải chỉ là để sử dụng được, mà còn phải bắt mắt và giàu khả năng tương tác. Trước thực tế đó, rõ ràng HTML cũng cần phải thay đổi, và sự thay đổi đó là cả một quá trình dài! Hơn 13 năm kể từ khi HTML4 xuất hiện, HTML5 mới đang tập tễnh những bước đi đầu tiên! Mặc dù vậy, HTML5 mang trong mình đủ sức hấp dẫn để gây nên sự chú ý (hảy thử search google để xem có bao nhiêu kết quả về HTML5). HTML5 được xây dựng để thỏa mãn bốn tiêu chí sau: a. Khả năng tương thích: đây là một tin vui cho những ai đã quen thuộc với việc sử dụng HTML: bạn không cần phải học lại gì cả! HTML5 vẫn giữ lại các cú pháp truyền thống trước đây, và nếu một vài tính năng mới nào đó của HTML5 chưa được trình duyệt hỗ trợ thì nó phải có một cơ chế fall back để render trong các trình duyệt cũ. Đương nhiên là, HTML5 không thể xóa bỏ tất cả những gì đã có suốt hơn 20 năm chỉ trong một ngày. Mặc dù điều này cũng không đồng nghĩa với việc HTML5 hỗ trợ tất cả các trình duyệt, nhưng nếu bạn có một trình duyệt đủ cũ để không tương thích với HTML5, có lẽ đã đến lúc bạn nâng cấp trình duyệt mới! 7 | Sinh viên thực hiện: Trần Xuân Mạnh. Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng. b. Tính tiện dụng: đặt người dùng lên hàng đầu nên cú pháp của HTML5 khá thoải mái (dù chưa được chặt chẽ như XHTML), thiết kế hỗ trợ sẵn bảo mật, và sự tách biệt giữa phần nội dung và trình bày ngày càng thể hiện rõ: công việc định dạng hầu hết do CSS đảm nhiệm, HTML5 không còn hỗ trợ phần lớn các chức năng định dạng trong các phiên bản HTML trước đây. c. Khả năng hoạt động xuyên suốt giữa các trình duyệt: HTML5 cung cấp các khai báo đơn giản hơn và một API mạnh mẽ. Một ví dụ dễ thấy là khai báo DOCTYPE: HTML4: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”“http://www.w3.org/TR/html4/loose.dtd“> HTML5: <!DOCTYPE html> So với các phiên bản trước, đặc tả HTML5 dài hơn đáng kể nhằm chi tiết hóa mọi hành vi để đảm bảo chúng thống nhất giữa các trình duyệt khác nhau. d. Khả năng truy xuất rộng rãi: HTML5 mang lại sự hỗ trợ tốt hơn cho các ngôn ngữ và cho người khuyết tật, đồng thời cũng có thể hoạt động trên các thiết bị và nền tảng khác nhau. Vậy HTML5 đem lại những gì? Điểm đặc trưng đầu tiên của một ngôn ngữ đánh dấu (markup language) là các thẻ. Và ở mặt này thì HTML5 được bổ sung rất nhiều cái mới, từ các thẻ tổ chức nội dung (article, aside, title…) đến các thẻ hỗ trợ tương tác và multimedia (video, audio…). Trong HTML5 cũng xuất hiện một khái niệm gọi là semantic markup, tức là các thẻ có mang ngữ nghĩa. Các thẻ này ra đời từ việc khảo sát các trang web và nhận diện một số thói quen đặt tên phổ biến (một số phần của trang web thường luôn được đặt một cái tên như “header”, “footer”, “nav”). 8 | Sinh viên thực hiện: Trần Xuân Mạnh. Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng. Ngoài sự rõ ràng, sử dụng các semantic markup còn có thể đem lại lợi thế khi các công cụ tìm kiếm trong tương lai tận dụng chúng để phân loại kết quả. Bên cạnh đó, thẻ <form> của HTML5 cũng được xem là một cải tiến lớn. Giờ đây với Form 2.0 (một cách gọi form trong HTML5), tất cả những chức năng mà bạn cần (định dạng, validate data…) đã được xây dựng trực tiếp vào trong HTML. Bạn không còn cần đến Ajax, Flash hay các công nghệ hỗ trợ để làm công việc này nữa! * Cấu trúc của trang HTML: <body> <! Phần chứa logo > <div id="header">HEADER</div> <! Phần chứa menu ngang > <div id="nav">NAVIGATION</div> <! Phần thân 2 cột, kiểu 1 > <div class="section"> <! Cột trái > <div class="aside">SLIDEBAR LEFT</div> <! Nội dung chính > <div class="article">CONTENT</div> </div> <! Phần thân 2 cột, kiểu 2 > <div class="section"> <! Nội dung chính > <div class="article">CONTENT</div> <! Cột phải > <div class="aside">SLIDEBAR RIGHT</div> 9 | Sinh viên thực hiện: Trần Xuân Mạnh. Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng. </div> <! Phần thân 3 cột, kiểu 1 > <div class="section"> <! Cột trái > <div class="aside">SLIDEBAR LEFT</div> <! Nội dung chính > <div class="article">CONTENT</div> <! Cột phải > <div class="aside">SLIDEBAR RIGHT</div> </div> <! Phần thân 3 cột, kiểu 2 > <div class="section"> <! Nội dung chính > <div class="article">CONTENT</div> <! Cột trái > <div class="aside">SLIDEBAR LEFT</div> <! Cột phải > <div class="aside">SLIDEBAR RIGHT</div> </div> <div id="footer">FOOTER</div> </body> * Cấu trúc của trang HTML5. <body> <! Phần chứa logo > <header>HEADER</header> <! Phần chứa menu ngang > <nav>NAVIGATION</nav> 10 | Sinh viên thực hiện: Trần Xuân Mạnh. [...]... khởi đầu vững chắc cho tương lai của việc phát triển game trên mạng với công nghệ HTML5 * TÀI LIỆU THAM KHẢO 1 HTML5 Canvas – Lập trình Game 2D – YinYang 2 http://www.w3schools.com /html/ default.asp 3 HTML 5 Demos and Examples (http:/ /html5 demos.com/) 4 HTML 5 Tutorial (http:/ /html5 tutorial.net/) 5 http://www.google.com.vn 33 | Sinh viên thực hiện: Trần Xuân Mạnh ... = false; } * Kết quả 22 | Sinh viên thực hiện: Trần Xuân Mạnh Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng Hình 5: Kết quả mô tả đoạn code trên Chương III: Lập trình game xếp hình 1 Giới thiệu game xếp hình HTML5 đang phát triển mỗi ngày Một số trò chơi đã và đang xây dựng lên sử dụng HTML5 Nên tôi nghĩ nên tạo trò chơi xếp hình sử dụng HTML 5 Nó là trò chơi rất nổi tiếng để sắp... năng sẽ trở thành một cặp đôi ăn ý, nhất là khi mà HTML5 đang đi theo hướng tách biệt giữa nội dung và giao diện Trách nhiệm trình bày một trang web sẽ từ từ được nhường lại cho CSS3 12 | Sinh viên thực hiện: Trần Xuân Mạnh Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng Song song với chuyện đó, DOM trong HTML5 cũng được hoàn thiện với bộ Selectors API mới đơn giản hơn, cung cấp nhiều... 14 | Sinh viên thực hiện: Trần Xuân Mạnh Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng làm cho mọi thứ trở nên sát với những gì mà nhà thiết kế tưởng tượng trong đầu hơn c Khả năng tương thích HTML5 Mặc dù HTML5 và CSS3 vẫn chưa được hoàn tất, nhưng chúng đã làm thay đổi bộ mặt của trang Web Một số trình duyệt - như các phiên bản hiện hành của Safari và Chrome - đã thực hiện một... một số tính năng từ các phiên bản dự thảo của HTML5 và CSS3 Và với việc sử dụng những trình duyệt này bạn có thể xem nhiều trang web mà trong đó cũng sử dụng HTML5 và CSS3 như CNN.com, The New York Times, YouTube (trong phiên bản beta) và Vimeo Hình 3: Các trình duyệt hỗ trợ HTML5 và CSS3 Phiên bản hiện tại của Internet Explorer, trình duyệt IE 8, hỗ trợ HTML5 rất hạn chế, tuy nhiên, IE 9 sẽ hỗ trợ H264... việc tương thích chuẩn này Tuy nhiên, với việc Microsoft chính thức tuyên bố hỗ trợ HTML5 trong IE9 (các kết quả thử nghiệm gần đây cho thấy tốc độ HTML5 trên IE9 rất khả quan), có thể nói rằng tất cả các trình duyệt lớn đều đã sẵn sàng chào đón HTML5 Điều đó vừa cho thấy sức cuốn hút công nghệ mới này, đồng thời hứa hẹn một tương lai tốt đẹp cho HTML5 cất cánh HTML5 dự kiến sẽ ra mắt chính thức vào năm... phức tạp duyệt qua từng phần tử như trước Cộng với việc các trình duyệt hiện đại đã tăng tốc thực thi JavaScript đáng kể, hơn nữa còn cung cấp các công cụ debug tiện lợi, việc phát triển ứng dụng với JavaScript đã trở nên nhẹ nhàng hơn bao giờ hết 4 HTML5 và CSS3 HTML5 và CSS3 là các chương trình mới nhất cho việc thiết kế Web Các tính năng video của HTML5 – cho phép đơn giản hoá việc thêm một video... 10.1 - đang trong phiên bản beta – có thể giúp giải 13 | Sinh viên thực hiện: Trần Xuân Mạnh Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng quyết vấn đề này) Sau cùng, nó chỉ là một trong nhiều phần mềm đang chạy và chiếm tài nguyên hệ thống Với HTML5 , tính năng video đã được xây dựng sẵn trong đó Hình 2: Ứng dụng HTML5 trong mobile Tính năng video mới này chắc chắn sẽ là một sự trợ... để thành một bức ảnh hoàn chỉnh HTML5 rất thuận tiện và cách hiệu quả để biểu hiện hình ảnh * Giao diện của trong chơi xếp hình: 23 | Sinh viên thực hiện: Trần Xuân Mạnh Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng Hình 6: Giao diện chính trò chơi xếp hình 2 Tổng quát vài nét xây dựng game xếp hình a Xây dựng giao diện cho trò chơi ... mySelf.ClearGame(); }, 100); setInterval(function () } KẾT LUẬN Hiện tại đã có rất nhiều sản phẩm game cũng như các ứng dụng mang tính đồ họa tương tác cao được làm trên nền tảng HTML5 Các thiết bị di động và hệ điều hành mới như Windows 8 cũng tập trung vào hỗ trợ và sử dụng công nghệ HTML5 Kỉ nguyên của HTML5 có thể mở ra một tiêu chuẩn thống nhất cho 32 | Sinh viên thực hiện: Trần Xuân Mạnh Lập trình game . Sinh viên thực hiện: Trần Xuân Mạnh. Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng. Hình 7: Giao diện cơ bản của game 27 LẬP TRÌNH GAME VỚI HTML5 GIỚI THIỆU. HTML5 được hỗ. nếu bạn có một trình duyệt đủ cũ để không tương thích với HTML5 , có lẽ đã đến lúc bạn nâng cấp trình duyệt mới! 7 | Sinh viên thực hiện: Trần Xuân Mạnh. Lập trình game với HTML 5 Giáo viên hướng. CSS3. 12 | Sinh viên thực hiện: Trần Xuân Mạnh. Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng. Song song với chuyện đó, DOM trong HTML5 cũng được hoàn thiện với bộ Selectors