HTML5 Canvas - Lập Trình Game 2D

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 
2012 
1/7/2012 
YIN YANG 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
2 | P a g e 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
3 | P a g e 
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ữ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ô 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ên 
gặ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ấp 
nhậ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ặc 
SVG 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ôi 
trườ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ệt 
mà 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ất 
kì 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ó HTML 
mớ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ệm 
khó 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 hay 
là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ại 
 hoặc blog  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! 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
4 | P a g e 
Mục lục 
A. GIỚI THIỆU .......................................................................................................................... 9 
B. 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................................................... 20 
1. setTimeout và setInterval............................................................................................ 21 
2. WindowAnimationTiming.......................................................................................... 21 
3. Lợi ích và hiệu quả ..................................................................................................... 22 
4. Sử dụng ....................................................................................................................... 23 
C. Canvas 2D API ..................................................................................................................... 25 
I. Vẽ ảnh và thao tác với pixel............................................................................................... 25 
1. Nạp và vẽ ảnh ............................................................................................................. 25 
2. Thao tác với pixel ....................................................................................................... 26 
II. Vẽ hình bằng chuột ........................................................................................................ 30 
1. Xác định tọa độ chuột ................................................................................................. 30 
2. Lưu nội dung của Canvas ........................................................................................... 31 
III. Chọn và di chuyển đối tượng ......................................................................................... 34 
1. Tạo cấu trúc dữ liệu .................................................................................................... 34 
2. Các phương thức vẽ bằng context .............................................................................. 35 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
5 | P a g e 
3. Các sự kiện chuột của Canvas .................................................................................... 36 
IV. Sử dụng bàn phím .......................................................................................................... 37 
1. Bắt sự kiện bàn phím .................................................................................................. 37 
2. Kiểm tra trạng thái của nhiều phím ............................................................................ 38 
3. Giới hạn các phím được bắt ........................................................................................ 38 
V. Chuyển động trong Canvas ............................................................................................ 39 
1. Cơ bản ......................................................................................................................... 39 
2. Thêm hiệu ứng bóng di chuyển .................................................................................. 41 
3. Kiểm tra va chạm ........................................................................................................ 42 
D. Kĩ thuật lập trình Game – Cơ bản ........................................................................................ 44 
I. Vòng lặp game (Game loop) hoạt động thế nào? .............................................................. 44 
1. Vòng lặp cơ bản .......................................................................................................... 44 
2. Vòng lặp có tính toán thời gian .................................................................................. 45 
3. Giải pháp cuối cùng .................................................................................................... 46 
4. Ví dụ hoàn chỉnh ......................................................................................................... 46 
II. Kiểm tra va chạm: hình tròn và chữ nhật ....................................................................... 47 
1. Giữa hai hình chữ nhật................................................................................................ 47 
2. Giữa hai hình tròn ....................................................................................................... 48 
3. Giữa hình tròn và hình chữ nhật ................................................................................. 48 
III. Kiểm tra một điểm nằm trên đoạn thẳng........................................................................ 50 
IV. Vector 2D cơ bản .......................................................................................................... 51 
1. Khái niệm ................................................................................................................... 51 
2. Vector đơn vị (Unit Vector, Normalized Vector) ....................................................... 51 
3. Tích vô hướng (Dot product, Scalar product)............................................................. 52 
4. Phép chiếu (Projection)............................................................................................... 52 
5. Hiện thực với javascript .............................................................................................. 53 
V. Khoảng cách từ điểm đến đoạn thẳng ............................................................................ 54 
VI. Giao điểm của hai đường thẳng ..................................................................................... 56 
1. Tạo phương trình đường thẳng từ đoạn thẳng ............................................................ 56 
2. Tính giao điểm của hai đường thẳng .......................................................................... 57 
3. Minh họa với HTML5 Canvas.................................................................................... 58 
VII. Va chạm và phản xạ ....................................................................................................... 58 
1. Kiểm tra hai đoạn thẳng cắt nhau ............................................................................... 58 
2. Phương pháp ............................................................................................................... 59 
VIII. Va chạm giữa đường tròn và đoạn thẳng .................................................................... 59 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
6 | P a g e 
1. Va chạm ...................................................................................................................... 59 
2. Phản xạ........................................................................................................................ 60 
IX. Va chạm giữa nhiều đường tròn ..................................................................................... 62 
1. Xử lý va chạm của nhiều đường tròn.......................................................................... 63 
X. Kiểm tra va chạm dựa trên pixel .................................................................................... 64 
1. Một wrapper của Image .............................................................................................. 65 
2. Xác định vùng giao hai hình chữ nhật ........................................................................ 66 
3. Kiểm tra va chạm ........................................................................................................ 67 
E. Kỹ thuật lập trình Game – Nâng cao .................................................................................... 69 
I. Cuộn ảnh nền và bản đồ (Map Scrolling) .......................................................................... 69 
1. Ảnh nền nhiều tầng ..................................................................................................... 69 
2. Cuộn giả ...................................................................................................................... 70 
3.  và cuộn thật ............................................................................................................ 70 
II. Tạo Amimated Sprite ..................................................................................................... 71 
III. Nạp trước hình ảnh và tài nguyên .................................................................................. 75 
IV. Phóng to/thu nhỏ game bằng nút cuộn chuột ................................................................. 76 
1. Sự kiện Mouse Wheel trong javascript....................................................................... 78 
2. Thay đổi kích thước bản đồ ........................................................................................ 78 
3. Vẽ từng vùng bản đồ ................................................................................................... 79 
4. Áp dụng cho các nhân vật trên bản đồ........................................................................ 79 
V. Thay đổi kích thước Canvas theo trình duyệt ................................................................ 80 
1. Điều chỉnh canvas thao kích thước trình duyệt .......................................................... 80 
VI. Sử dụng Full Screen API................................................................................................ 82 
1. Giới thiệu .................................................................................................................... 82 
2. Ví dụ ........................................................................................................................... 84 
VII. Tạo menu và chuyển đổi giữa các màn hình Game ....................................................... 86 
1. Lớp MenuItem ............................................................................................................ 86 
2. Lớp Screen .................................................................................................................. 87 
3. Kiểm tra kết quả....................................................................... ... ft<0 || (b = this.map.colllide(vleft,vtop+6,false) || 
 this.map.colllide(vleft,vbottom-4,false,this.canEat))) // left 
{ 
 if(b && b!=true) 
 this.left = b.right; 
 if(this.speedX<0) 
 this.speedX = this.isAutoMoving? this.speed: 0; 
}else if(this.right>=this.map.width || (b = 
this.map.colllide(vright,vtop+6,false) || 
 this.map.colllide(vright,vbottom-4,false))) // right 
{ 
 if(b && b!=true) 
 this.left = b.left-this.width; 
 if(this.speedX>0) 
 this.speedX = this.isAutoMoving? -this.speed: 0; 
} 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
103 | P a g e 
2. Lớp Monster 
Monster (hay Enemy) là các đối tượng có khả năng hoạt động và có thể được tích hợp AI nhằm 
tiêu diệt hoặc cản trở người chơi. Trong bất kì game nào thì các loại đối tượng này rất đa dạng và 
là thường là nguyên nhân chính tạo ra sự lôi cuốn của game. Vì đây chỉ là phần bắt đầu nên ta 
chỉ tạo một loại Monster duy nhất có khả năng tiêu diệt người chơi thông qua va chạm. 
Bởi vì được thừa kế từ lớp Character bên trên, lớp này chỉ cần một công việc chính là hiện thực 
phương thức draw() để vẽ chính nó: 
function Monster(map,left,top){ 
 // call the super-constructor 
 Character.call(this,map,{ 
 left: left, 
 top: top, 
 width: 20, 
 height: 20, 
 speed: 1, 
 isAutoMoving: true 
 }); 
} 
Monster.prototype = new Character(); 
Monster.prototype.draw = function(context){ 
 context.save(); 
 context.beginPath(); 
 var left = this.left-this.map.offsetX; 
 var top = this.top-this.map.offsetY; 
 var right = left+this.width; 
 var bottom = top+this.height; 
 var hw = this.width/2; 
 var cx = left+hw; 
 context.fillStyle = "violet"; 
 context.arc(cx,top+hw,hw-2,0,Math.PI*2,true); 
 //context.rect(left,top,this.width,this.height); 
 context.fill(); 
 context.stroke(); 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
104 | P a g e 
 context.restore(); 
} 
3. Lớp Player 
Cũng tương tự như Monster, tuy nhiên công việc sẽ phức tạp hơn vì ta cần kiểm tra nhiều thứ và 
phải cung cấp các phím bấm điều khiển. Phương thức update này mặc định trả về 0. Trường hợp 
player hoàn thành vòng chơi, trả về 1; và nếu player chết, trả về 2: 
Player.prototype.update = function(){ 
 if(this.right>=this.map.width){ 
 alert("Game Over!"); 
 return 1; 
 } 
 if(this.isFalling) // die 
 { 
 this.speedY += GRAVITY; 
 this.top += this.speedY; 
 return (this.top>this.map.height)? 2 : 0 ; 
 } 
 Character.prototype.update.call(this); 
 this.collide(this.map.monsters); 
} 
Kiểm tra va chạm với các monster, ta xem player và monster là các hình chữ nhật và chỉ cần 
kiểm tra xem hai hình này có cắt nhau không: 
Player.prototype.collide = function(monsters){ 
 for(m in monsters) 
 { 
 var mon = monsters[m]; 
 if(!mon) 
 continue; 
 if(!(this.left > mon.right || 
 this.right < mon.left || 
 this.top > mon.bottom || 
 this.bottom < mon.top)) 
 { 
 if(this.bottom0) 
 { 
 mon.die(); 
 } 
 else 
 { 
 this.die(); 
 break; 
 } 
 } 
 } 
} 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
105 | P a g e 
4. Lớp Map 
Nếu coi lập trình viên lập trình viên là thượng đế, thì bản đồ chính là một “thế giới” thu nhỏ nơi 
mà thượng đế cho vận hành những quy luật để tạo ra “cuộc sống”. Mặc dù bản đồ có thể rất đơn 
giản trong nhiều game, nhưng đối với dạng game phiêu lưu này, nó đóng vai trò rất quan trọng 
(có thể hơn so với Monster). Một “thế giới” quá nhỏ bé sẽ khiến người chơi nhanh kết thúc vòng 
chơi và không thể khơi lên sự tò mò muốn khám phá của họ. 
Khi một vật thể (chướng ngại vật), ta sẽ xóa vùng tương ứng trên buffer (ảnh bản đồ) và gán giá 
trị lại cho ô đó trong dữ liệu là mặc định (0): 
function clearCell(left,top,col,row) 
{ 
 data[col+row*COLS] = 0; 
 context.save(); 
 context.globalCompositeOperation = "destination-out"; 
 context.fillStyle = "rgba(0,0,0,1)"; 
 context.fillRect(left,top,CELL_SIZE,CELL_SIZE); 
 context.restore(); 
} 
Để kiểm tra va chạm với các chướng ngại vật, ta tạo phương thức collide() với giá trị trả về là 
một đối tượng lưu giữ các giá trị về vị trí, kích thước của chướng ngại vật đó: 
this.colllide = function(x,y,canDestroy){ 
 var b = this.contain(x,y); 
 if(b) 
 { 
 if(canDestroy && b.type==BRICK) 
 { 
 clearCell(b.left,b.top,b.col,b.row); 
 } 
 return b; 
 } 
 return false; 
}; 
this.contain = function(x,y){ 
 var col = Math.floor(x/CELL_SIZE); 
 var row = Math.floor(y/CELL_SIZE); 
 var val = data[col+row*COLS]; 
 if(val>0) 
 { 
 var b = { 
 left: col*CELL_SIZE, 
 top: row*CELL_SIZE, 
 col: col, 
 row: row, 
 type: val, 
 }; 
 b.right = b.left+CELL_SIZE; 
 b.bottom = b.top+CELL_SIZE; 
 return b; 
 } 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
106 | P a g e 
 return false; 
}; 
Trong game này, lớp Map còn là nơi chứa các Monster. Để làm Monster ra liên tục nếu số lượng 
ít hơn một giá trị nào đó. Ta viết phương thức update() như sau: 
this.update = function(){ 
 // generate random monsters 
 if(this.monsters.length<MONSTER_IN_VIEW) 
 this.monsters.push(new 
Monster(this,this.offsetX+Math.random()*this.viewWidth+50,1)); 
 i = 0; 
 var length = this.monsters.length; 
 while(i<length){ 
 if(this.monsters[i].isDead || 
this.monsters[i].left<this.offsetX) 
 { 
 this.monsters.splice(i,1); // remove this monster from 
array 
 length--; 
 }else 
 { 
 this.monsters[i].update(); 
 i++; 
 } 
 } 
}; 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
107 | P a g e 
H. Một số ứng dụng minh họa 
Trong quá trình thực hiện bài báo cáo này, tôi thực hiện một vài dự án nhỏ để minh họa các kiến 
thức đã trình bày. Các dự án này hoàn toàn có thể được phát triển trở thành những game online 
để cung cấp cho người chơi trong thực tế. 
Các dự án này được thực hiện bằng thuần HTML5 và không sử dụng thêm bất kì thư viện nào. 
I. Game đua xe 
1. Các thông số của xe 
Trong game này, ta sẽ sử dụng bốn phím mũi tên để điều khiển xe. Hai phím UP, DOWN để di 
chuyển tiến lùi và LEFT, RIGHT sẽ dùng để quay hướng xe. Một xe đua cơ bản cần các thuộc 
tính sau: 
- max/min speed: tốc độ tối đa/tối thiểu của xe. Nên để tốc độ tối đa có giá trị tuyệt đối cao hơn 
tốc độ tối thiểu. 
- acceleration: Khả năng tăng tốc của xe. Giá trị càng lớn thì xe càng nhanh đạt vận tốc tối đa. 
- rotationAngle: Khả năng điều chỉnh góc quay của xe. 
- friction: độ ma sát của xe trên từng loại địa hình. Giá trị này sẽ giúp xe giảm tốc độ khi người 
chơi không giữ phím di chuyển. 
2. Di chuyển và quay xe 
Với mục đích kiểm tra va chạm, ta sẽ sử dụng một mảng các điểm bao quanh xe hay xảy ra tiếp 
xúc nhất. Ở đây, các điểm mà ta chọn là 4 đỉnh từ vùng bao hình chữ nhật của xe (có thể coi như 
4 bánh xe). Khi xe xoay góc alpha và di chuyển, ta phải tính lại tọa độ các điểm này tương ứng. 
Công thức để tính tọa độ mới của một điểm sau khi xoay góc alpha là: 
x‟ = cos(alpha) * x − sin(alpha) * y 
y‟ = sin(alpha) * x + cos(alpha) * y 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
108 | P a g e 
Ví dụ tại góc 0 độ, với gốc tọa độ nằm ở tâm hình chữ nhật, điểm A có tọa độ là {x: -width/2,y: -
height/2}. Vậy với góc xoay alpha, tọa độ mới của A là: 
x: cos(alpha)*(-width/2) – sin(alpha)*(-height/2) 
y: sin(alpha)*(-width/2) + cos(alpha)*(-height/2) 
3. Kiểm tra va chạm (tiếp xúc) với địa hình 
Với bản đồ là một hình ảnh, ta cần kiểm tra bằng cách dựa vào pixel. Tuy nhiên không phải bằng 
cách lặp mà dựa vào kiểm tra một vài vị trí xác định. Các vị trí này ta chính là 4 điểm thuộc các 
góc của xe mà ta đã xác định trong phần trước. 
- Đầu tiên ta cần lấy đối tượng ImageData của ảnh làm bản đồ. 
- Với mỗi điểm dùng để kiểm tra va chạm của xe, ta tính vị trí alpha của chúng trong ImageData 
((x+y*width)*4+3) và so sánh giá trị alpha với 0 (tương ứng với mặt đường). Thay vì kiểm tra 
giá trị alpha, ta có thể kiểm tra màu sắc tại pixel đó cho từng loại địa hình khác nhau. 
- Tăng, giảm ma sát ứng với từng loại địa hình. 
Trong ví dụ này, ta chỉ tạo bản đồ với hai loại địa hình là đường và bãi cỏ. Độ ma sát sẽ tăng dần 
theo số lượng điểm (bánh xe) tiếp xúc với cỏ: 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
109 | P a g e 
4. Hạn chế xe di chuyển và xoay khi bị va chạm 
Sau khi biết được một điểm va chạm với đá, ta sẽ xác định xem xe có thể di chuyển hoặc xoay 
được hay không. Xem hình vẽ sau, ta xét từng trường hợp điểm va chạm của xe là: 
- 0 hoặc 3: không cho phép xe lùi. 
- 1 hoặc 2: không cho phép xe tiến. 
- 0 hoặc 1: không cho phép xoay trái. 
- 2 hoặc 3: không cho phép xoay phải. 
5. Tạo các checkpoint 
Để biết xe có đi đúng đường và đúng hướng, ta cần tạo ra các điểm kiểm tra trên đường gọi là 
checkpoint. Nếu người chơi muốn “đi tắt” đến checkpoint, hãy đảm bảo rằng họ sẽ đến chậm 
hơn so với đi trên đường chính bằng cách tạo các vật cản hoặc tăng ma sát. 
Với bản đồ trong game này, ta chỉ tạo ra 4 checkpoint. Phương thức reachNextCheckPoint() sẽ 
kiểm tra xem xe có chạm checkpoint tiếp theo hay không. Khi đến checkpoint cuối cùng, ta sẽ 
đưa biến currentCheckPoint về 0 và tăng lap lên 1. 
6. Kết quả 
Online Demo. 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
110 | P a g e 
II. Game bắn đại bác 
1. Bản đồ và địa hình 
Đối với dạng game này, địa hình của bản đồ có thể ảnh hưởng rất lớn đến người chơi. Ví dụ 
người chơi có thể rơi xuống một hố sâu và không thể bắn hay thậm chí “thiệt mạng”. Tuy nhiên 
ở phần 1 này ta chưa cần quan tâm đến những vấn đề này. Phần chính mà ta hướng dẫn là làm 
sao để người chơi có thể tương tác và chịu tác động của địa hình như di chuyển, bắn phá. 
Về vấn đề kiểm tra va chạm với địa hình, không có phương pháp nào khác ngoài việc kiểm tra 
dựa trên pixel (do địa hình có hình dạng phức tạp và bất kì). Vì vậy ta tạo một ImageData từ ảnh 
bản đồ, sau đó thêm một phương thức kiểm tra một điểm có nằm trong vùng ImageDa ta có độ 
alpha bằng 0 hay không. 
this.contain = function(x,y){ 
 if(!imageData) 
 return false; 
 var index = Math.floor((x+y*width)*4+3); 
 return imageData.data[index]!=0; 
} 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
111 | P a g e 
2. Phá hủy một phần địa hình 
Sử dụng phương thức contain bên trên, ta sẽ kiểm tra được va chạm khi đạn bắn hoặc người chơi 
rơi xuống đất. Với trường hợp đạn bắn, ta phải phá hủy vùng địa hình nơi đạn bay vào. Rất may 
là API của Canvas cung cấp một phương pháp dùng để vẽ ra các vùng có độ alpha bằng 0, tương 
tự với việc xóa bỏ hoàn toàn vùng đó. 
Ta thực hiện việc này bằng cách gán hai thuộc tính của context canvas là 
globalCompositeOperation thành “destination-out” và fillStyle thành “rgba(0,0,0,1)”. Và tại vị 
trí bị đạn bắn, ta sẽ vẽ một hình tròn để “khoan” vùng địa hình này. Bạn nên lưu và phục hồi lại 
context khi sử dụng thiết lập này. 
3. Trọng lực và Gió 
Trong dạng game này, đạn khi được bắn ra sẽ chịu tác động cùng lúc của 3 loại lực là: lực bắn, 
trọng lực và gió. Mỗi lực này có thể được minh họa bởi một vector (Lực bắn đã được giới thiệu 
trong phần trước). Tại mỗi thời điểm khi đạn bay trong không gian, vị trí mới của nó sẽ được 
tính bằng cách dùng vị trí hiện tại cộng với vector tổng của 3 lực này. 
Lưu ý: Bạn sẽ thấy rằng tốc độ đạn bay quá nhanh có thể khiến cho việc kiểm tra va chạm không 
chính xác (do trong game là đạn “biến” từ nơi này đến nơi khác). Vì vậy cần giảm tốc độ đạn lại 
và tăng FPS lên một giá trị thích hợp. Để tạo gió, ta sử dụng một vector với hai giá trị x,y thay 
đổi ngẫu nhiên sau một khoảng thời gian khoảng 20 giây. 
4. Di chuyển Cannon 
Do có địa hình phức tạp, việc di chuyển cannon sẽ tương đối phức tạp và còn tùy thuộc vào hình 
dạng của nó. Việc cần quan tâm ở đây là cách để cannon có thể đi lên địa hình dốc vừa phải. Một 
mẹo nhỏ mà ta làm ở đây là sử dụng cách “nhảy cóc” thay vì đi. Như vậy mỗi bước đi theo chiều 
ngang ta cũng đồng thời nâng cao vị trí của cannon hơn một chút. Nếu cannon đi xuống dốc, nó 
sẽ rơi xuống vị trí thấp hơn (nhờ phương thức update()); nếu cannon đi lên dốc, nó sẽ ở vị trí cao 
hơn. Đối với dốc có độ nghiêng lớn, ta sẽ kiểm tra một tọa độ bên trái (hoặc phải tùy theo hướng 
di chuyển) xem nó có chạm vào mặt địa hình không. Nếu có, ta sẽ không cho phép cannon di 
chuyển theo hướng đó. 
5. Sát thương của đạn 
Mỗi khi đạn trúng đất hoặc bất kì cannon nào, nó sẽ phát nổ mà gây sát thương cho các cannon 
nằm trong phạm vi nhất định. Sức sát thương của đạn còn bị ảnh hưởng bởi tốc độ của nó khi 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
112 | P a g e 
trúng mục tiêu. Vậy ta tạo một thuộc tính lưu trữ năng lượng của viên đạn khi đang bay dựa vào 
công thức động lượng (E = 1/2*m*v^2). 
Lượng hp bị tổn thất của cannon khi trúng đạn sẽ được tính bằng tổng của động năng viên đạn và 
sát thương khi phát nổ. Lực khi phát nổ ta sẽ cho giá trị từ 0 đến 100 với mọi phạm vi sát thương 
khác nhau của đạn. Với cách tính này, bạn có thể đảm bảo rằng khi sử dụng một loại đạn có 
phạm vi sát thương lớn thì mức độ sát thương của nó cũng chỉ tương đương với loại có phạm vi 
sát thương nhỏ hơn (cần phân biệt lực và phạm vi sát thương của đạn). 
6. Hỗ trợ nhiều người chơi 
Bởi vì game không chơi qua mạng nên nhiều người phải chia sẻ cùng một màn hình. Mỗi khi đạn 
phát nổ hoặc bay ra khỏi bản đồ, ta sẽ thực hiện chuyển lượt chơi đến người tiếp theo. Nếu như 
người chơi tiếp theo đã chết, tiếp tục gọi đệ quy với điều kiện dừng là số người chơi còn sống 
nhỏ hơn 1 (_alivePlayers<1). 
Ngoài nhiệm vụ chính trên, phương thức changeTurn() dưới đây còn có nhiệm vụ hiển thị hiệu 
ứng nổ tại vị trí của viên đạn, bởi vì đây là thời điểm ngay sau khi nó phát nổ. 
7. Kết quả 
Online Demo. 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
113 | P a g e 
III. Game Mario 
Đây là kết quả của việc phát triển “Một nền tảng game 2D side-scrollong” từ phần trước. 
Online Demo. 
Yin Yang HTML5 Canvas - Lập trình Game 2D 
114 | P a g e 
I. Lời kết 
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 các ứng dụng rich user experience và không cần phải đắn đo trong 
việc lựa chọn các thư viện hỗ trợ. 
Các nội dung trình bày trong sách này chưa thật sự nâng cao và tập trung vào việc phát triển các 
dự án thành một sản phầm game thực sự có thể cạnh tranh trên thị trường. Tuy nhiên đây là bước 
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. 
Kết hợp với mô hình client-server, ta có thể phát triển các game nhiều người chơi (MMO) và lưu 
trữ dữ liệu trực tiếp của người chơi trên server. Đây là điều mà tôi chưa đề cập tới trong báo cáo 
này. 
J. Tài liệu tham khảo 
1. HTML 5 Tutorial ( 
2. Dive Into HTML 5 ( 
3. HTML 5 Specification ( 
4. HTML 5 Rocks ( 
5. HTML 5 Doctor ( 
6. HTML 5 Demos and Examples ( 
7. Mozilla Development Netword – HTML 5 ( 
https://developer.mozilla.org/en/html/html5/) 
8. Google.com.