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.

* 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> .

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 để

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 >

<! 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 >

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

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

- 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)
;

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);

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