BÁO CÁO THỰC TẬP-Lập trình game với HTML 5

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”“ />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.
Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng.
<! Phần thân 2 cột, kiểu 1 >
<section>
<! Cột trái >
<aside>SLIDEBAR LEFT</aside>
<! Nội dung chính >
<article>CONTENT</article>
</section>
<! Phần thân 2 cột, kiểu 2 >
<section>
<! Nội dung chính >
<article>CONTENT</article>
<! Cột phải >
<aside>SLIDEBAR RIGHT</aside>
</section>
<! Phần thân 3 cột, kiểu 1 >

<section>
<! Cột trái >
<aside>SLIDEBAR LEFT</aside>
<! Nội dung chính >
<article>CONTENT</article>
<! Cột phải >
<aside>SLIDEBAR RIGHT</aside>
</section>
<! Phần thân 3 cột, kiểu 2 >
<section>
<! Nội dung chính >
<article>CONTENT</article>
11 | 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.
<! Cột trái >
<aside>SLIDEBAR LEFT</aside>
<! Cột phải >
<aside>SLIDEBAR RIGHT</aside>
</section>
<footer>FOOTER</footer>
</body>
Không chỉ dừng lại ở các tag, HTML5 bao gồm một tập các API hấp dẫn. Vài
API thú vị có thể kể đến như:
• Canvas
• Geolocation
• WebSocket
• Web Storage
• WebWorkers
• …
3. CSS3 và Javascript.

Cũng như HTML5, CSS3 vẫn đang trong giai đoạn phát triển, nhưng những tính
năng của nó đã làm cho nhiều người phải háo hức. CSS3 cho phép thực hiện
một cách dễ dàng những điều mà trước đây phải tốn rất nhiều công sức, chẳng
hạn như các đường viền (border) với các góc cạnh được bo tròn, hay thậm chí là
xoay đối tượng theo các hướng khác nhau. HTML5 và CSS3 có nhiều tiềm 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 phương thức truy xuất chính
xá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ệ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 vào trang
Web - đã đượ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ác
nhà 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 plugin
như 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ứng

hardware-accelerated Flash 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ợ giúp tuyệt vời cho
những người sử dụng Apple iPhone bởi vì Apple phải từ chối khá nhiều để bất
kỳ sự điều khiển của nó trên iPhone sẽ được chuyển giao tới cho một ứng dụng
khác (dạng điều khiển này thường được biết đến như là một chế độ absolute
monarchy). Nhưng cũng hy vọng HTML5 sẽ có lợi cho điện thoại Blackberry,
loại điện thoại mà hầu hết là không có khả năng hỗ trợ flash. Trong thực tế, tính
năng HTML5 video của Apple đã được khẳng định chắc chắn đến mức họ có
hẳn một trang làm nổ bật cái gọi là các Website "iPad-ready".
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ấp
dẫ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à
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 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 video, âm thanh nhúng, đồ họa
vector 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 Wed
hiệ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 động
của bất kỳ trang web nếu được sử dụng đúng. Hai ngôn ngữ sẽ cách mạng hóa
15 | 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.
cá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).
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ệt
Internet Explorer, hiện chiếm thị phần lớn nhất thế giới, vốn không có mấy quan
tâm đến 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 2012, và đạt đến mức tương
thí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ưng
những lợi ích mà HTML5 đem lại có thể đảm bảo cho nó một thành công không

kém các phiên bản trước. HTML5 được dự đoán sẽ phổ biến như HTML4 hiện
nay vào một ngày không xa. Dù không thể kết luận rằng HTML5 sẽ thay thế các
công nghệ hiện tại (Silverlight, Flash…) như nhiều nguồn tin đang đồn thổi, đây
vẫ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ình
chữ 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
16 | 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 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)
Chúng ta có thể vẽ cả hình 2D và 3D (WebGL). 2D có sẵn trong tất cả các trình
duyệ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ách
nhanh 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ác
hì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ớ.
Một số tính năng cả Canvas:
- Vẽ hình ảnh.
- Tô màu.
- Tạo hình học và các kiểu mẫu.
- Văn bản.
- Sao chép, hình ảnh, video, những canvas khác.

- Thao tác điểm ả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 ta
không thể chỉ sử dụng cả thuộc tính và phương thức có sẵn của đối tượng
context. Chính vì vậy, chúng ta sẽ vẽ ảnh và thao tác với pixel từ đối tượng
ImageData.
17 | 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.
a. Nạp và vẽ ảnh.
Để vẽ một ảnh ra canvas, ta tạo một đối tượng image và thực hiện
phương thức context.drawImage() trong sự kiện load của image. Như vậy để
đảm bảo rằng hình ảnh chỉ được vẽ sau khi đã được nạp hoàn tất. Ngoài ra, ta
nên đặt sự kiện load trước khi gán đường dẫn cho ảnh. Nếu không image có thể
được load xong trước khi bạn gắn sự kiện load cho nó.
Phương thức drawImage() có ba overload sau:
- Vẽ image tại một vị trí destX, destY:
context.drawImage(image,destX,destY);
- Vẽ image tại vị trí destX, destY và kích thước destWidth, destHeight:
- Cắt image tại vị trí [sourceX, sourceY, sourceWidth, sourceHeight] và
vẽ tại [destX, destY, destWidth, destHeight]:
b. Thao tác với pixel.
Một ảnh bao gồm một mảng các pixel với các giá trị red, green, blue và
alpha (RGBA). Trong đó alpha là giá trị xác định độ mờ đục (opacity) của ảnh.
Giá trị alpha càng lớn thì độ màu sắc càng rõ nét và màu sắc sẽ trở nên trong
suốt nếu alpha là 0. Trong Canvas 2D API, dữ liệu ảnh được lưu trong một đối
tượng ImageData với 3 thuộc tính là width, height và data. Trong đó data là một
18 | Sinh viên thực hiện: Trần Xuân Mạnh.
context.drawImage(image,destX,destY,destWidth,destHeight)
;

context.drawImage(image, sourceX, sourceY, sourceWidth,
sourceHeight, destX, destY, destWidth, destHeight);
Lập trình game với HTML 5 Giáo viên hướng dẫn: Nguyễn Quang Hưng.
mảng một chiều chứa các pixel. Mỗi pixel chứa 4 phần tử tương ứng là
R,G,B,A. Như vậy với một ảnh có kích thước 10×20 ta sẽ có 200 pixel và có
200*4=400 phần tử trong mảng ImageData.data.
Hình 4: Mô tả các pixel trong ảnh gồm các giá trị RGBA
2. Chọn và di chuyển đối tượng.
Thay vì lưu trữ nội dung của Canvas dưới dạng ImageData, ta có thể lưu trữ các
đối tượng đồ họa dưới dạng cấu trúc dữ liệu và thực hiện vẽ từng phần tử lên
Canvas.
a. Tạo cấu trúc dữ liệu.
Đầu tiên ta sẽ tạo một lớp Rect dùng để chứa dữ liệu của một hình chữ
nhật. Lớp này ngoài các biến lưu trữ tọa độ, kích thước và trạng thái (selected)
thì cần một phương thức dùng để kiểm tra xem một tọa độ [x,y] có nằm bên
trong nó không. Ta gọi phương thức này là isContain() và có kiểu trả về là
boolean. Mã nguồn của lớp này có dạng:
function Rect() {
this.isSelected = false;
this.x = 0;
19 | 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.
this.y = 0;
this.width = 1;
this.height = 1;
}
Rect.prototype.isContain = function(x,y){
var right = this.x + this.width;
var bottom = this.y + this.height;
x > this.x && x < right &&

y > this.y && y < bottom;
}
Tiếp theo, ta tạo một lớp ShapeList dùng để chứa các đối tượng Rect
trong một kiểu dữ liệu mảng. Ngoài ra, ShapeList sẽ có thêm một biến dùng để
chỉ ra đối tượng Rect đang được chọn (selectedItem), và hai biến dùng để lưu vị
trí của chuột khi click lên một đối tượng Rect (offsetX, offsetY). Hai biến offset
này dùng để tính tọa độ chính xác khi người dùng sử dụng chuột để di chuyển
đối tượng Rect.
ShapeList còn có hai phương thức:
- addItem: thêm một đối tượng Rect vào danh sách.
- selectAt: tìm và chọn đối tượng Rect chứa tọa độ [x,y].
Ta sẽ duyệt ngược từ cuối mảng để đảm bảo các đối tượng nằm sau sẽ
được chọn trước trong trường hợp nhiều Rect cùng chứa điểm [x,y].
b. Các phương thức vẽ bằng context.
function draw(){
clear();
20 | 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.
for (var i = _list.items.length-1;i>=0; i ) {
drawRect(_list.items[i]);
}
}
function drawRect(rect){
_context.fillRect(rect.x,rect.y,rect.width,rect.height);
if(rect.isSelected)
{
_context.save();
_context.strokeStyle = "red";
_context.strokeRect(rect.x,rect.y,rect.width,rect.hei
ght);

_context.restore();
}
}
c . Các sự kiện chuột của Canvas.
Trong các sự kiện này, ta sẽ dùng cờ _ismoving để xác định xem một đối
tượng có đang được chọn hay không và thực hiện di chuyển đối tượng
ShapeList.selectedItem trong mousemove. Giá trị _ismoving này sẽ được xác
định trong sự kiện mousedown và bị hủy khi mouseup.
function canvas_mousedown(e){
var x = e.pageX - _canvas.offsetLeft;
var y = e.pageY - _canvas.offsetTop;
_list.selectAt(x,y)
if(!_list.selectedItem)
21 | 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.
_list.addItem(x-RECT_SIZE,y-
RECT_SIZE,RECT_SIZE*2,RECT_SIZE*2);
_ismoving = true;
draw();
}
function canvas_mousemove(e){
if(_ismoving && _list.selectedItem){
var x = e.pageX - _canvas.offsetLeft;
var y = e.pageY - _canvas.offsetTop;
_list.selectedItem.x = x - _list.offsetX;
_list.selectedItem.y = y - _list.offsetY;
draw();
}
}
function canvas_mouseup(e){

_ismoving = 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 xếp những mãnh ghép để 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.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<div>
<table cellpadding="0" cellspacing="0"
width="100%">
<tr>

<td>
< Nút chọn ! >
24 | 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.
<span>
<input id="rd1" type="radio"
value="Easy" name="r1" />
Easy
<input id="rd2" type="radio"
value="Medium" name="r1" checked />
Medium
<input id="rd3" type="radio"
value="Hard" name="r1" />
Hard</span>
</td>
<td width="150px">
< Button ! >
<span >
<input type="button" value="Hiển thị
hình ảnh gốc"/>
</span>
</td>
</tr>
</table>
</div>
< Canvas ! >
<div>
<canvas id="XepHinh" width="850"
height="575" style="border: black solid 2px;"></canvas>
</div>

</td>
<td width="20px">
&nbsp;
25 | Sinh viên thực hiện: Trần Xuân Mạnh.