Tìm hiểu căn bản lập trình game 2D với HTML5 qua game Rắn ăn mồi

by **miamor** 11/6/2013, 11:26 am

HTML5 không còn lạ gì đối với coders và cả fm-ers nữa nhỉ Cười nhe răng

Tuy nhiên thì để sử dụng thành thục HTML5 thì không phải ai cũng có thể.
và để tự học HTML5 cũng khá là khó.
HTML5 được sử dụng với nhiều mục đích, nhưng mục đích lớn nhất mình nghĩ là để lập trình game 2d~ (Hình như cũng có 3d rồi nhưng mà chưa hoàn chỉnh)

Mình cũng chả hiểu biết gì nhiều về lĩnh vực này, nhưng cũng mạo muội làm cái bài hướng dẫn này cho anh em XD
Mình định dịch, nhưng ngôn ngữ lập trình dịch qua tiếng việt mình thấy khá bựa =w= có lẽ là do mình bíp biết dịch thế nào =v=
Nên mình viết theo ý mình, có tham khảo tài liệu http://jdstraughan.com/2013/03/05/html5-snake-with-source-code-walkthrough/
(mình khuyên các bạn nên đọc chỉ 1 bài thôi, và nên là bài tiếng anh Cười nghiêng ng

Đọc bài anh xog chuyển qua bài này mình sợ các bạn phọt máu mà chết x__X)

[*] Bài viết khá dài, bạn nào đủ kiên nhẫn thì hẵng đọc, còn ai không đọc thì chỉ cần kéo sang bên phải bấm nút like là xong
[*] Bài viết hướng đến đối tượng gà mờ, giai đoạn đầu học hỏi HTML5, không dành cho dân chuyên. x___X
[*] Nếu có sai sót mong được lượng thứ
[*] Mình không muốn nhận được những cmt kiểu: Dài thế bố ai mà đọc được, Dài thế này viết làm *abc* gì, có ai đọc đâu, Chả giúp ích gì,... bleh bleh bleh.. Không đọc, không giúp ích gì cho bạn thì phắn *abc* đi, lởn vởn cmt linh tinh ngứa hết cả mắt

Ok... bài hướng dẫn này được viết trên nền game Rắn săn mồi, game đơn giản nhất, sử dụng ít thuật toán nhất.
Demo: http://invision.chinhphuc.info/h194-page hoặc http://invision.chinhphuc.info/h84-page (đương nhiên thì mình chả viết cái nào trong 2 cái đấy cả mắc cỡ

)
Bài viết này phân tích theo demo 1 (trang /h194- )

HTML
Trang HTML cho game chỉ cần 1 thẻ canvas là đủ.

Code:: <canvas id="the-game" width="320" height="240">

Các bạn có thể thêm chút style:

Code:: <style>article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { background-color: #CCC; } h1 { text-align: center; } p { text-align: center; } canvas { display: block; margin: 0 auto; background-color: #666; }</style>

Không có gì đang nói nhé?! Ok.

Quan trọng nhất là js viết xoay quanh thẻ canvas này.

Để cho dễ hiểu, ta sẽ chia js này thành 6 phần nhỏ để phân tích:

game (object)
snake (object)
food (object)
some helpers/service methods
an event listener
the game loop

Trước hết, trong thẻ script, điều cốt yếu ta cần là cái này:

Code:: var canvas = document.getElementById("the-game"); var context = canvas.getContext("2d");

Đây là 2 dòng cơ bản khi lập trình game với HTML5.
Nhiệm vụ của nó là để vẽ lên thẻ canvas có id the-game thông qua một đối tượng context được trả về từ phương thức canvas.getContext(id) - mà ở đây id là 2d

Và giờ thì chúng ta bước vào tìm hiểu 6 lớp nhỏ như phần đã giới thiệu

Game Object

Spoiler:

Lớp này gồm phần điều khiển điểm số, tình trạng (game over), và vài thứ linh tinh khác bạn muốn thêm vào.

Code:: game = { score: 0, fps: 8, over: false, message: null, start: function() { game.over = false; game.message = null; game.score = 0; game.fps = 8; snake.init(); food.set(); }, stop: function() { game.over = true; game.message = 'GAME OVER - PRESS SPACEBAR'; }, drawBox: function(x, y, size, color) { context.fillStyle = color; context.beginPath(); context.moveTo(x - (size / 2), y - (size / 2)); context.lineTo(x + (size / 2), y - (size / 2)); context.lineTo(x + (size / 2), y + (size / 2)); context.lineTo(x - (size / 2), y + (size / 2)); context.closePath(); context.fill(); }, drawScore: function() { context.fillStyle = '#999'; context.font = (canvas.height) + 'px Impact, sans-serif'; context.textAlign = 'center'; context.fillText(game.score, canvas.width/2, canvas.height * .9); }, drawMessage: function() { if (game.message !== null) { context.fillStyle = '#00F'; context.strokeStyle = '#FFF'; context.font = (canvas.height / 10) + 'px Impact'; context.textAlign = 'center'; context.fillText(game.message, canvas.width/2, canvas.height/2); context.strokeText(game.message, canvas.width/2, canvas.height/2); } }, resetCanvas: function() { context.clearRect(0, 0, canvas.width, canvas.height); } };

Tên các thuộc tính cũng đã nói lên được vai trò của chúng rồi nhỉ Cười nhe răng

game.score số điểm hiện tại của trò chơi, ban đầu là 0
game.fps thời gian mỗi frame được duy trì (tính theo giây) (đại khái là như kiểu vận tốc í). Giá trị này tỉ lệ thuận với độ khó của levels.
game.over
game.message hiển thị tin nhắn đến người chơi khi chết - Vd "game over. click to restart.", "loser, bet u can play again. click to lose again.",.. bleh bleh..
Hàm game.start() khá dễ hiểu. Nó đặt trạng thái trò chơi thông qua game.over = false, xóa game.message (dòng "Game over"), đặt lại fps, và thực hiện hàm init() trên snake và food (sẽ đề cập trong lớp sau)
Hàm game.stop() thì chỉ đơn thuần là đưa trò chơi về dạng "over" (vật chủ die) và hiển thị dòng game.message
Ba hàm tiếp theo là thuật vẽ trong trò chơi. Phương thức vẽ hộp (drawBox) có thể dử dụng để vẽ con mồi, và những đoạn nối của con rắn. Hàm drawBox() cần nhận 4 thông số: tọa độ x, tọa độ y, kích cỡ, và màu. Nó có thể di chuyển đến tọa độ x, tọa độ y, vẽ hộp có kích cỡ, màu sắc tương ứng với các thông số đã khai báo.
Hàm drawScore() cách viết có chút khác biệt, nhưng đơn giản hơn so với việc vẽ hộp.
Còn hàm drawMessage() thì chỉ thêm dòng kiểm tra nếu game.message có hiển thị trên màn hình thì thực hiện lệnh vẽ nó ra. Hết.
*Trong các hàm draw này các bạn cần biết nhiều về các câu lệnh context.[...] như là context.fillStyle, context.moveTo, context.lineTo,...
Hàm cuối cùng là hàm resetCanvas()

Snake Object

Spoiler:

Code:: snake = { size: canvas.width / 40, x: null, y: null, color: '#0F0', direction: 'left', sections: [], init: function() { snake.sections = []; snake.direction = 'left'; snake.x = canvas.width / 2 + snake.size / 2; snake.y = canvas.height /2 + snake.size / 2; for (i = snake.x + (5 * snake.size); i >= snake.x; i-=snake.size) { snake.sections.push(i + ',' + snake.y); } }, move: function() { switch(snake.direction) { case 'up': snake.y-=snake.size; break; case 'down': snake.y+=snake.size; break; case 'left': snake.x-=snake.size; break; case 'right': snake.x+=snake.size; break; } snake.checkCollision(); snake.checkGrowth(); snake.sections.push(snake.x + ',' + snake.y); }, draw: function() { for (i = 0; i < snake.sections.length; i++) { snake.drawSection(snake.sections[i].split(',')); } }, drawSection: function(section) { game.drawBox(parseInt(section[0]), parseInt(section[1]), snake.size, snake.color); }, checkCollision: function() { if (snake.isCollision(snake.x, snake.y) === true) { game.stop(); } }, isCollision: function(x, y) { if (x < snake.size/2 || x > canvas.width || y < snake.size/2 || y > canvas.height || snake.sections.indexOf(x+','+y) >= 0) { return true; } }, checkGrowth: function() { if (snake.x == food.x && snake.y == food.y) { game.score++; if (game.score % 5 == 0 && game.fps < 60) { game.fps++; } food.set(); } else { snake.sections.shift(); } } };

Lớp này phức tạp hơn lớp trước rồi, và nó cũng là căn bản cho phần game con rắn của mình Cười nhe răng

Đầu tiên là lớp này khởi tạo snake.size property, và ta đặt size cho con rắn là: canvas.width / 40 (canvas.width là chiều rộng của thẻ canvas đã khai báo trong html => snake.size tỉ lệ thuận với canvas.width và / 40 thì chắc chả phải nói..
VD: width ban đầu trong ví dụ này là 320 => snake.size sẽ là 320/40 = 8
Chú ý là giá trị size ở đây đại diện cho độ rộng mỗi cạnh luôn, vậy nên nó sẽ luôn có dạng hình vuông, và như đây thì sẽ là hình vuông 8x8.
Tiếp theo chúng ta khởi tạo giá trị tọa độ x và y cho con rắn, và thiết lập các hướng đi mặc định khi bắt đầu.
Cuối cùng, và quan trọng nhất, là mảng snake.sections. Không như các nhân vật game khác chỉ di chuyển, con rắn trong game này có thân rất dài, và mỗi khi đổi hướng, đầu nó sẽ đổi trước, và theo đó thì từng mẩu thân nó mới đổi theo, và để quay một góc thì có thể sẽ mất nhiều hơn 1 bước di chuyển. Để thực hiện điều này, ta tạo con rắn bởi một dãy các tọa độ, và shift() hay push() các tọa độ ra và vào mảng để thay đổi vị trí của từng mẩu tương ứng. (trong phần init() ngay phía dưới)

Hàm init() được sử dụng để tạo nên con rắn từ mảng và các phần tử trong đó. Hàm này chỉ bắt đầu chạy khi chắc chắn phần mảng trống và hướng đi mặc định đã được định sẵn. Sau đó nó mới thực hiện, và thực hiện theo các bước sau:
- Đầu tiên là đặt con rắn vào vị trí giữa khung trò chơi, và để thực hiện điều đó:
  Code:
  snake.x = canvas.width / 2 + snake.size / 2; snake.y = canvas.height /2 + snake.size / 2;
  Phần trên khá dễ hiểu. Nó chỉ là cách đặt con rắn vào vị trí chính giữa khung thôi. Vì gốc tọa độ là vị trí trên cùng bên trái của canvas (xem hình~ https://i.servimg.com/u/f81/17/70/31/89/html-510.png) nên vị trí chính giữa của khung sẽ là (canvas.width/2, canvas.height/2) và vì con rắn có chiều rộng, cũng như chiều cao, nên sẽ còn phải tính cả snake.size/2 nữa. Ai vẫn chưa hiểu có thể xem tiếp hình + hướng dẫn dưới này:
  - https://i.servimg.com/u/f81/17/70/31/89/test1010.png
    Tưởng tượng tọa độ như hình vẽ, con rắn màu xanh, chấm đỏ là điểm ở giữa => đáng ra chấm đỏ là vị trí giữa, nhưng vì con rắn có kích cỡ => phải bù trừ, mà gốc tọa độ trên cùng bên trái => phép tính thực hiện bù trừ là phép tính + => tọa độ để đặt con rắn là dấu chấm xanh.
- Và cuối cùng, hàm init() thực hiện các dòng lệnh để bước đầu tạo nên con rắn (tạo con rắn theo dạng mảng):
  Code:
  for (i = snake.x + (5 * snake.size); i >= snake.x; i-=snake.size) { snake.sections.push(i + ',' + snake.y); }
  3 dòng trên tạo 5 phần tử mảng để tạo nên con rắn ban đầu, mỗi phần tử có chứa 1 cặp tọa độ (x, y).
Tiếp đó là hàm snake.move()
- Hàm này sẽ kiểm tra snake.direction (sẽ đề cập sau) và sau đó thay đổi vị trí đầu con rắn cho phù hợp. Di chuyển lên, thì cần tọa độ y ( y ) giảm (tưởng tượng theo hình vẽ nhé), di chuyển xuống thì tăng, sang trái ( x ) giảm, phải ( x ) tăng.
- Sau khi thay đổi vị trí của phần đầu, snake.move() gọi hàm snake.checkCollision() để kiểm tra sự va chạm. nghĩa là nếu như mẩu đầu đó đụng phải thành box, hay với một mẩu nào đó của con rắn, thì game.stop().
  Đi sâu vào phần checkCollision() và isCollision(). Hàm checkCollision() có gọi hàm isCollision() để thực hiện thao tác kiểm tra va chạm để dừng game.
  Và hàm isCollision() là phần ta cần phân tích sâu chút.
  Code:
  isCollision: function(x, y) { if (x < snake.size/2 || x > canvas.width || y < snake.size/2 || y > canvas.height || snake.sections.indexOf(x+','+y) >= 0) { return true; } },
  Thực ra đoạn code trên không phức tạp. Nó chỉ là phép kiểm đơn giản dựa vào vị trí tọa độ. Bạn theo dõi lại hình ảnh tọa độ phái trên có thể sẽ dễ hình dung hơn.
  - 4 phép kiểm đầu tiên xác định xem mẩu đầu của con rắn đã ra ngoài canvas hay chưa (x > canvas.width || x < snake.size/2 || y < snake.size/2 || y > canvas.height).
  - Phép kiểm cuối cùng kiểm tra xem con rắn có ăn phải chính mình hay không bằng cách kiểm tra xem tọa độ của các phần tử trong mảng có trùng nhau hay không (snake.sections.indexOf(x+','+y) >= 0).
- Tiếp, hàm .move() gọi đến hàm snake.checkGrowth(), hàm này sẽ cho phép con rắn lớn thêm nếu đụng phải con mồi, và kiểm tra việc con rắn đụng con mồi bằng cách kiểm tra vị trí của mẩu đầu với vị trí của con mồi, nếu trùng nhau thì ok, con rắn thêm một mẩu nữa.
  Code:
  checkGrowth: function() { if (snake.x == food.x && snake.y == food.y) { game.score++; if (game.score % 5 == 0 && game.fps < 60) { game.fps++; } food.set(); } else { snake.sections.shift(); } }
  Hàm này sẽ bắt đầu chạy nếu như tọa độ của mẩu đầu con rắn và tọa độ con mồi trùng nhau.
  - Lúc này game.score sẽ tăng thêm 1 đơn vị giá trị (++), đồng thời sẽ gọi hàm food.set() để tạo con mồi mới, và tiếp tục kiểm tra nếu số điểm chia hết cho 5 thì fps sẽ tăng thêm 1 đơn vị giá trị (++).
  - Và nếu như không đụng phải con mồi, con rắn sẽ tự động shift() mất một phần tử (cuối cùng). Chỗ này các bạn để ý trong hàm move(), ta có đề cập đến snake.sections.push(snake.x + ',' + snake.y) - đó là để thêm vào mảng tạo nên con rắn 1 phần tử. Song tại hàm đó ta chưa cho shift() đi một phần tử để bảo đảm chiều dài của nó không đổi. Vì thế ta thực hiện hành động xóa 1 phần tử tại hàm này, khi không ăn mồi. Nếu ăn mồi, hành động này không xảy ra => tăng thêm 1 phần tử.
  => Rắn theo dạng mảng (bước đầu) hoàn tất.
Tiếp theo ta sẽ đề cập tới 2 hàm draw() và drawSection(), 2 hàm này không có gì đáng nói, chỉ là dùng để vẽ, chứ không sử dụng thuật toán gì hết. Hàm draw() gọi hàm drawSection() để các mẩu con rắn, và hàm drawSection() gọi hàm drawBox() để vẽ. Từ đó, các phần tử trong mảng sẽ được biểu diễn theo như cách vẽ đã trình bày trong hàm drawBox() => rắn hoàn tất.

Food Object

Spoiler:

Phần này thì thư thả được rồi cười lớn

Ngắn thôi, không có gì quá phức tạp như trên đâu.

Code:: food = { size: null, x: null, y: null, color: '#0FF', set: function() { food.size = snake.size; food.x = (Math.ceil(Math.random() * 10) * snake.size * 4) - snake.size / 2; food.y = (Math.ceil(Math.random() * 10) * snake.size * 3) - snake.size / 2; }, draw: function() { game.drawBox(food.x, food.y, food.size, food.color); } };

Khá giống với lớp snake, food cũng cần các giá trị x, y, size, color. Điều đáng nói duy nhất trong lớp này là hàm .set()

Khi hàm food.set() được gọi:
- Đầu tiên là kích cỡ con mồi sẽ được thiết lập để phù hợp với kích thước của con rắn.
- Tiếp, các tọa độ (x, y) của con mồi sẽ được sắp đặt ngẫu nhiên. Tuy nhiên, không phải tùy ý một cách vô tội vạ. Vì con rắn của chúng ta chỉ có thể di chuyển đến những tọa độ mà phù hợp với những phần tử có kích cỡ đã khai báo ban đầu, chứ không phải với mọi pixel trên canvas. (ví dụ đơn giản, con rắn tạo bởi dãy các phần tử hình vuông 8x8, ta chia canvas của ta thành 1 mạng lưới tọ bởi các hình vuông 8x8 => con rắn có thể di chuyển trên các cột ô vuông, chứ không thể di chuyển chèn lên dòng kẻ từ bên cột này sang cột nọ => miếng mồi cũng phải nằm trong các ô vuông.) Vì thế, ta cần để ý những dòng sau:
  Code:
  food.x = (Math.ceil(Math.random() * 10) * snake.size * 4) - snake.size / 2; food.y = (Math.ceil(Math.random() * 10) * snake.size * 3) - snake.size / 2;
  Ta biết rằng phép toán Math.ceil(Math.random() * 10 dùng để trả về 1 số nguyên ngẫu nhiên từ 1 -> 10. Còn phần sau thì các bạn theo dõi hình mình họa bảng canvas trong tọa độ để hiểu hơn những gì mình lảm nhảm: Tiếp tục giả sử canvas được chia thành các ô vuông, và ở phần trên mình giả sử cho con rắn di chuyển trên các ô vuông. Nhưng thực tế thì ngược lại, chương trình được viết để cho con rắn di chuyển trên những dòng kẻ, và chèn lên từ ô này sang ô khác. (vì các bạn để ý phần tọa độ của con rắn ban đầu: snake.x = canvas.width / 2 + snake.size / 2; với hình vẽ minh họa: https://i.servimg.com/u/f81/17/70/31/89/test1010.png ) => khi đặt vị trí của food sẽ phải tính cả phần bù trừ đi nữa => thực hiện phép tính bù trừ.
  - Để hiểu hơn các bạn theo dõi tiếp hình minh họa: https://i.servimg.com/u/f81/17/70/31/89/html-510.png và https://i.servimg.com/u/f81/17/70/31/89/test1010.png . Con rắn di chuyển trên đường kẻ đỏ trong hình 1. Vậy giả sử phép Math.ceil(Math.random() * 10) * snake.size * 4 trả về giá trị 12 (đơn vị độ dài ô vuông) và Math.ceil(Math.random() * 10) * snake.size * 3 trả về giá trị 9 (đơn vị độ dài ô vuông) => con mồi nằm trong ô vuông thứ 12 từ trái qua phải, và ô vuông thứ 9 từ trên xuống dưới. Tuy nhiên, như mình vừa nói, con rắn di chuyển trên những đường kẻ, nên tính phép bù trừ với snake.size / 2 để đặt vị trí con mồi vào giữa những dòng kẻ.
Hàm cuối cùng trong lớp này là hàm draw(), hàm này không có gì đặc biệt, vẫn sử dụng game.drawBox() (lớp đầu tiên) để vẽ nên hình dạng con mồi.

Helpers

Spoiler:

Event Listener

Spoiler:

Game của chúng ta sắp hoàn chỉnh rồi. Giờ chỉ còn Game Loop - phần quan trọng nhất của bất kì một game nào.

Game loop

Spoiler:

Cuộc hành trình của chúng ta sắp xong. Chỉ còn nốt ván này nữa thôi. Nếu đã đọc đến đây rồi, đọc tiếp đi Vui

Sau khi tạo tất cả các lớp cơ bản cho game rắn săn mồi của ta, ta cần bước tối quan trọng là gộp chúng lại thành 1 thể và compile thành 1 game có thể chơi được.

Code:: var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame; function loop() { if (game.over == false) { game.resetCanvas(); game.drawScore(); snake.move(); food.draw(); snake.draw(); game.drawMessage(); } setTimeout(function() { requestAnimationFrame(loop); }, 1000 / game.fps); }; requestAnimationFrame(loop);

Đầu tiên, trong lớp này ta có requestAnimationFrame, ừm.. phần này là đòi hỏi một trình duyệt thích hợp hỗ trợ HTML5, thích hợp nhất là FF.
Khi requestAnimationFrame được thiết lập, nó cho phép ta gọi, và thực hiện refresh game mỗi 60 fps.
Xem xét kĩ loop(), ta thấy đầu tiên là hàm này thực hiện kiểm tra trạng thái trò chơi, xem có .over hay không. Nếu trò chơi đang hoạt động (không .over) thìmột loạt các hành động sẽ xảy đến: (đây là lúc sử dụng các hàm ta đã viết ở trên)

game.resetCanvas() - Làm trống canvas
game.drawScore() - Viết điểm lên nền canvas
snake.move() - Tính điểm đầu của con rắn,...
food.draw() - Đặt vị trí con mồi
snake.draw() - Vẽ con rắn bằng cách nối các phần tử trong mảng.
game.drawMessage() - Hiển thị game.messagge, khi thua.

Bằng cách thực hiện những động tác này nhiều lần trong 1 giây => sẽ có cảm giác rắn đang chuyển động. Và để làm được điều này, ta cần phải tạo môt vòng lặp vô hạn.
Chính là chỗ này:

Code:: setTimeout(function() { requestAnimationFrame(loop); }, 1000 / game.fps);

Phải biết là không ai có thể cho con rắn chuyển động 60 phát/s => để giảm tốc độ, ta điều chỉnh requestAnimationFrame chạy n lần/s bằng cách sử dụng hàm setTimeout() mặc định của javascript. Nhớ là chúng tôi khởi tạo game.fps ban đầu là 8, vì vậy setTimeout() sẽ cho phép requestAnimationFrame thực hiện 8 lần/s, và nó sẽ tăng dần cùng với game.fps để làm cho con rắn di chuyển nhanh hơn để tăng cấp, tăng độ khó cho trò chơi.

Và cuối cùng! Game hoàn thành tung bông

! Thêm dòng này vào cuối cùng:

Code:: requestAnimationFrame(loop);

Xong! Game con rắn (kiểu cổ điển) đến đây là kết thúc. yeah yeah

Ngoài ra các bạn hoàn toàn có thể tạo game con rắn kiểu ma trận giống như nokia 1200,.. bằng cách tạo thêm lớp Map để thêm vật cản. Tuy nhiên, mình chưa đủ trình viết ra mắc cỡ

mà cũng chưa thấy ai làm nó cả 8-} nên thôi. ko có gì hết

Nhưng có thể biết đâu sau này sẽ có ai đó trong ChinhPhuc

này làm bài hướng dẫn game con rắn ma trận ngại quá

Tuy nhiên ngoài việc tạo lớp map mới ra thì sẽ cần phải để ý thêm đến tọa độ của con mồi trong hàm set() nữa.
Các bạn có thể tham khảo cách lớp Map và vật cản cũng như một đống kiểu viết mới nữa trong loạt serie hướng dẫn làm game mario ở đây:
Part 1: http://yinyangit.wordpress.com/2012/05/31/html5-canvas-viet-game-mario-part-1/
Part 2: http://yinyangit.wordpress.com/2012/06/02/html5-canvas-viet-game-mario-part-2/
Part 3: http://yinyangit.wordpress.com/2012/06/04/html5-canvas-viet-game-mario-part-3/
Part 4: http://yinyangit.wordpress.com/2012/06/06/html5-canvas-viet-game-mario-part-4/
Part 5 (end) : http://yinyangit.wordpress.com/2012/06/07/html5-canvas-viet-game-mario-part-5-end/
Hoặc tìm hiểu cách tạo game = HTML5 tại đây: http://yinyangit.wordpress.com/category/game-dev/html5-canvas/

Download ebook tại đây: Ọt ọt ọt

Tiếng Anh (recommend):
http://it-ebooks.info/tag/html5/
http://it-ebooks.info/book/415/ (căn bản)
http://it-ebooks.info/book/504/ (nâng caoo))
Tiếng Việt:
http://yinyangit.wordpress.com/2012/07/08/ebook-html5-canvas-lap-trinh-game-2d-free/

Spoiler:

by **arikbna** 11/6/2013, 11:41 am

game online hả bác

by **miamor** 11/6/2013, 11:46 am

arikbna đã viết:game online hả bác

là lập trình game = html5, chơi online, nhưng khi chơi game chưa có sao lưu dữ liệu. Tuy nhiên, bạn hoàn toàn có thể làm game theo kiểu 1 mình mình chơi với máy rồi so điểm với nhau, chứ nhiều người chơi trên 1 server nối vào nhau thì mình k chắc mắc cỡ

)

by **GaKon** 11/6/2013, 12:03 pm

hay wa, tks thớt 2 phát lun
bữa nào rãnh ngồi vọc, lúc trc cũng định học mấy cái này nhưng toàn tiếng anh nên đâm ra chán ràu bỏ, hi vọng pác viết bài đều đều thôi mà

by **nightWalker** 11/6/2013, 12:21 pm

cắn răng

by **K.-Kun** 11/6/2013, 12:27 pm

kingLeonidas đã viết:cắn răng

Ây da! Vừa nhìn Commet cắn trúng lưỡi rồi

P/s: Đừng có mở nhé!:

by **Ocean Sapphire** 11/6/2013, 1:29 pm

Chà chà, ít khi wan tâm đến cái HTML5 (tại mức độ rộng lớn của nó

) Nhưng đọc xong bài này thấy hấp dẫn quá BigClap

1 like

by **baivong** 11/6/2013, 4:54 pm

Phần CSS, ngoài canvas thì các tag khác không nằm trong bài sao đưa vào làm gì?
Trong bài nhiều đoạn dịch, hướng dẫn, không phân biệt rõ biến(variables), hàm(function), phương thức(method) mà cái quan trọng nhất là method thì lại không đả động đến.
Trong bài này chỉ thuần giải thích cách tác giả viết game rắn săn mồi, gà mờ thì chẳng thể xem nổi "bài căn bản" này.

by **mrtienduc1999** 11/6/2013, 5:08 pm

Nếu làm game = Html5 thì có cần cài thêm gì không vậy bác. Nếu mà không thì .... Tớ nghĩ làm game = Html5 sẽ được ưa thích hơn so với flash nhỉ.

by **baivong** 11/6/2013, 5:22 pm

Cần cài... trình duyệt... có hỗ trợ HTML5 Tôi thích em

by **Draudrey** 11/6/2013, 5:35 pm

Hồi trước có làm 1 game bắn bóng nhưng chán quá nên bỏ...

by Sponsored content

Tìm hiểu căn bản lập trình game 2D với HTML5 qua game Rắn ăn mồi

Tìm hiểu căn bản lập trình game 2D với HTML5 qua game Rắn ăn mồi

Re: Tìm hiểu căn bản lập trình game 2D với HTML5 qua game Rắn ăn mồi

Re: Tìm hiểu căn bản lập trình game 2D với HTML5 qua game Rắn ăn mồi

Re: Tìm hiểu căn bản lập trình game 2D với HTML5 qua game Rắn ăn mồi

Re: Tìm hiểu căn bản lập trình game 2D với HTML5 qua game Rắn ăn mồi

Re: Tìm hiểu căn bản lập trình game 2D với HTML5 qua game Rắn ăn mồi

Re: Tìm hiểu căn bản lập trình game 2D với HTML5 qua game Rắn ăn mồi

Re: Tìm hiểu căn bản lập trình game 2D với HTML5 qua game Rắn ăn mồi

Re: Tìm hiểu căn bản lập trình game 2D với HTML5 qua game Rắn ăn mồi

Re: Tìm hiểu căn bản lập trình game 2D với HTML5 qua game Rắn ăn mồi

Re: Tìm hiểu căn bản lập trình game 2D với HTML5 qua game Rắn ăn mồi

Re: Tìm hiểu căn bản lập trình game 2D với HTML5 qua game Rắn ăn mồi