LẬP TRÌNH GAME với HTML5

Lắp ráp,cài đặt và sữa chữa máy tính

Trang 1

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN.

………

Trang 2

* 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

Trang 3

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

Trang 4

* 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

Trang 5

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àmthế 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ệuthông qua các tài liệu Object Model (DOM) HTML5 không chỉ xác định mộttag <video>, đó cũng là một DOM API tương ứng cho các đối tượng videotrong DOM Bạn có thể sử dụng API này để tìm kiếm hỗ trợ cho các định dạngvideo khác nhau, nghe nhạc, tạm dừng một đoạn video, mute audio , theo dõibao 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ảinghiệ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ôngnhất từ trước đến nay HTML5 được xây dựng dựa trên thành công đó Bạnkhô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ổ sungnhư 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ệtlinh độ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 khinhập địa chỉ email Các trình duyệt cũ không hỗ trợ các loại email input sẽ xem

Trang 6

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ảithiệ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 truycậ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ẻ DOCTYPEcủa bạn DOCTYPE cần phải nằm trong dòng đầu tiên của tất cả các trangHTML 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ộtDOCTYPE:

<!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ẽ ratrong 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>…

Trang 7

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ìnhduyệt Web trong việc hiển thị một trang HTML Về cơ bản, các trang HTMLnhư 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 CSScho 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ũngnhư các thành phần của một trang Web Mặc dù đã có một số cách khác nhưngHTML 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 đổiphong 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êntoà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 đó nhanhchóng phổ biến nhờ tính dễ học và dễ sử dụng HTML sử dụng các tag để đánhdấu từng đoạn văn bản Một ví dụ đơn giản như:

<p> This is a paragraph </p>

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ănbản Tuy nhiên nhờ sự đơn giản của các tag này mà HTML được chấp nhậnrộ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à

Trang 8

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ụngJavaScript 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ũngthườ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 đangtập tễnh những bước đi đầu tiên! Mặc dù vậy, HTML5 mang trong mình đủ sứchấp dẫn để gây nên sự chú ý (hảy thử search google để xem có bao nhiêu kếtquả 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 HTML5chưa được trình duyệt hỗ trợ thì nó phải có một cơ chế fall back để render trongcá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 đồngnghĩ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ìnhduyệt đủ cũ để không tương thích với HTML5, có lẽ đã đến lúc bạn nâng cấptrình duyệt mới!

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

Trang 9

định dạng hầu hết do CSS đảm nhiệm, HTML5 không còn hỗ trợ phần lớn cácchứ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áoDOCTYPE:

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óamọ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ácthiế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ácthẻ 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à semanticmarkup, tức là các thẻ có mang ngữ nghĩa Các thẻ này ra đời từ việc khảo sátcá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ủatrang web thường luôn được đặt một cái tên như “header”, “footer”, “nav”).Ngoài sự rõ ràng, sử dụng các semantic markup còn có thể đem lại lợi thế khicá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

Trang 10

mà bạn cần (định dạng, validate data…) đã được xây dựng trực tiếp vào trongHTML Bạn không còn cần đến Ajax, Flash hay các công nghệ hỗ trợ để làmcông việc này nữa!

* Cấu trúc của trang HTML:

Trang 11

<div class="aside">SLIDEBAR LEFT</div>

Trang 13

sẽ trở thành một cặp đôi ăn ý, nhất là khi mà HTML5 đang đi theo hướng táchbiệ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.

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 phương thức truy xuất chínhxác đến từng phần tử trên trang web mà không cần các vòng lặp phức tạp duyệtqua 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

Trang 14

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ínhnăng video của HTML5 – cho phép đơn giản hoá việc thêm một video vào trangWeb - đã được nhận được nhiều sự chú ý, không những thế HTML5 còn cónhiều tính năng làm nó trở nên tuyệt vời đối với người sử dụng cũng như cácnhà phát triển Web

Hình 1: Minh họa CSS.

a Video và hiệu ứng Flash

HTML5 sẽ cho phép bạn xem video mà không cần sử dụng một pluginnhư Flash hoặc Silverlight

Vậy thì những gì là lợi ích lớn với tính năng video của HTML5 là gì?Thứ nhất, nó là miễn phí và không cần phần mềm Adobe Flash plugin Thứ hai,Flash có thể làm chậm máy tính của bạn (mặc dù phần mềm tăng tốc phần cứnghardware-accelerated Flash 10.1 - đang trong phiên bản beta – có thể giúp giảiquyế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ẵntrong đó

Trang 15

b Công cụ thiết kế mới

HTML5 và CSS3 cũng làm cho các ứng dụng Web và các trang Web hấpdẫn hơn HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựngứng dụng web dễ dàng hơn rất nhiều Ví dụ như nhiều màu sắc hơn và hỗ trợđường cong, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sửdụng các hình ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ offline.Tất cả những điều này là một trang Web trở nên dễ nhìn hơn, bắt mắt hơn và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 đầuhơn

Trang 16

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àmthay đổi bộ mặt của trang Web Một số trình duyệt - như các phiên bản hiệnhành của Safari và Chrome - đã thực hiện 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ợ HTML5rất hạn chế, tuy nhiên, IE 9 sẽ hỗ trợ H264 video, âm thanh nhúng, đồ họavector tỷ lệ và CSS3

Không kể HTML5 vẫn còn đang trong giai đoạn "thử nghiệm" mà ngay

cả một số công nghệ đang được áp dụng cho các trình duyệt và các trang Wedhiện nay vẫn chưa phải là đã kết thúc về mặt kỹ thuật

HTML5 và CSS3 – được kết hợp với các công nghệ Web khác nhưJavaScript - có thể rất hữu ích cho phong cách, định dạng và tốc độ hoạt độngcủa bất kỳ trang web nếu được sử dụng đúng Hai ngôn ngữ sẽ cách mạng hóacách chúng ta lập trình và xem internet với các tính năng cải tiến all-in-one, cóthể loại bỏ việc phải sử dụng nhiều ứng dụng của bên thứ ba (ví dụ như Flash)

Trang 17

5 Kết luận.

Một trong những khó khăn ngăn cản việc phổ biến HTML là trình duyệtInternet Explorer, hiện chiếm thị phần lớn nhất thế giới, vốn không có mấy quantâm đến việc tương thích chuẩn này Tuy nhiên, với việc Microsoft chính thứctuyê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 2012, và đạt đến mức tươngthích giữa các trình duyệt vào năm 2022 Dù chặng đường có thể còn dài, nhưngnhững lợi ích mà HTML5 đem lại có thể đảm bảo cho nó một thành công khôngkém các phiên bản trước HTML5 được dự đoán sẽ phổ biến như HTML4 hiệnnay vào một ngày không xa Dù không thể kết luận rằng HTML5 sẽ thay thế cáccông nghệ hiện tại (Silverlight, Flash…) như nhiều nguồn tin đang đồn thổi, đâyvẫn sẽ là một công nghệ đáng để ta học hỏi!

Chương II: Canvas 2D API.

HTML5 xác định <canvas> như một bitmap phụ thuộc vào độ phân giải, được

sử dung để vẽ đồ thị, đồ họa game hoặc hình ảnh trực quan khác Canvas là hìnhchữ nhật trên trang và có thể sử dụng JavaScript để vẽ bất cứ điều gì bạn muốn.HTML5 định nghĩa một tập các chức năng ( canvas API) để vẽ hình dạng, xácđịnh đường dẫn, tạo gradient

HTML5 Canvas là một JavaScript API để mã hóa các bản vẽ Canvas API cho

phép định nghĩa một đối tượng canvas như là thử <canvas> trên trang HTML ,chúng ta có thể vẽ bên trong nó <canvas> là một khối không gian vô

hình, mặc định là 300x250 pixels (trên tất cả trình duyệt)

Trang 18

Chúng ta có thể vẽ cả hình 2D và 3D (WebGL) 2D có sẵn trong tất cả các trìnhduyệt Web hiện đại, IE9, và thông qua thư viện excanvas.js trong các phiên bản

IE hiện tại

Canvas 2D cung cấp một API đơn giản nhưng mạnh mẽ để có thể vẽ một cáchnhanh chóng trên bề mặt bitmap 2D Không có định dạng tập tin, và bạn chỉ cóthể vẽ bằng cách sử dụng script Bạn không có bất kỳ các nút DOM cho cáchình khối bạn vẽ - bạn đang vẽ pixels, không phải vectơ và chỉ là các điểm ảnhđược ghi nhớ

- Xuất nội dung của một thẻ <canvas> sang tập tin ảnh tĩnh.

1 Vẽ ảnh và thao tác với pixel.

Muốn tạo ra những hiệu ứng đồ họa đặc biệt khi sử dụng canvas, chúng takhông thể chỉ sử dụng cả thuộc tính và phương thức có sẵn của đối tượngcontext Chính vì vậy, chúng ta sẽ vẽ ảnh và thao tác với pixel từ đối tượngImageData

Định dạng
Số trang	34
Dung lượng	488 KB