Lập trình game 2D trên HTML5, Phần 1: Giới thiệu
Snail Bait
Điều tuyệt vời khi phát triển phần mềm là bạn có thể đưa bất cứ điều gì sống động mà bạn có thể
tưởng tượng ra lên màn hình, miễn là chúng có lý. Do không bị vướng vào những hạn chế vật lý
đã cản trở các kỹ sư trong các ngành khác, nên các nhà phát triển phần mềm từ lâu đã sử dụng
các bộ công cụ API đồ họa và giao diện người dùng (UI) để thực hiện các ứng dụng sáng tạo và
hấp dẫn. Người ta có thể cho rằng dạng phát triển phần mềm sáng tạo nhất là lập trình trò chơi;
một vài nỗ lực đáng làm theo quan điểm sáng tạo còn hơn cả việc biến cái nhìn của bạn về trò
chơi trở thành hiện thực.
Các trò chơi video nhảy bậc thềm (Platform Games - PG)
Donkey Kong, Mario Bros., Sonic the Hedgehog và Braid tất cả đều là các trò chơi nổi tiếng, bán
chạy nhất và tất cả chúng đều là những trò chơi nhảy bậc thềm. Có lúc các trò chơi nhảy bậc
thềm đã chiếm 1/3 doanh thu của tất cả trò chơi video. Hiện nay, thị phần của chúng đã thấp hơn
đáng kể, nhưng vẫn còn có nhiều trò chơi nhảy bậc thềm thành công.
Tuy nhiên, điều đáng làm không có nghĩa là dễ làm; thực ra, thường là ngược lại. Việc thực hiện
các trò chơi, đặc biệt là các trò chơi video, đòi hỏi phải có một sự hiểu biết tốt về lập trình, hiểu
biết tốt về các hình ảnh đồ họa và ảnh động và rất nhiều kiến thức toán học pha trộn với liều
lượng đáng kể về tính nghệ thuật và tính sáng tạo. Và đó chỉ là sự khởi đầu. Các nhà phát triển
trò chơi thành công dành rất nhiều thời gian để trau chuốt trò chơi của mình bằng cách tinh lọc
cách chơi trò chơi và các hình ảnh đồ họa, ngoài việc thực hiện nhiều khía cạnh của trò chơi
không liên quan gì đến cách chơi — chẳng hạn như các bảng ghi điểm, các hướng dẫn, các hình
ảnh động giữa các vòng đời và các mức chơi và các trình tự kết thúc trò chơi.
Mục đích của loạt bài này là giới thiệu cho bạn cách thực hiện một trò chơi video HTML5 để bạn
có thể bắt đầu làm việc với một trò chơi riêng của mình.
��<div class="ibm-container"> <h2>Gi�-i thi�-u</h2> <div class="ibm-container-body">
<div class="ibm-youTube-container-alternate" align="center"> <iframe width="620"
height="332" src=" frameborder="0"
allowfullscreen title="L�-p tr�nh game 2D tr�n HTML5"></iframe> </div> </div> </div>
Hãy xem nội dung video "Giới thiệu về loạt bài này" ở đây.
Trò chơi: Snail Bait
Trong loạt bài này, tôi sẽ hướng dẫn bạn cách thực hiện một trò chơi video nhảy bậc thềm trước

Theo quy ước, các trò chơi máy tính thường sử dụng các phím w, a, s và d để điều khiển trò chơi.
Quy ước đó được phát triển chủ yếu là vì nó cho phép những người chơi thuận tay phải sử dụng
chuột và bàn phím đồng thời. Nó cũng để cho tay phải tự do để nhấn phím spacebar hoặc các
phím bổ trợ chẳng hạn như phím Ctrl hoặc ALT. Snail Bait không sử dụng các phím WASD vì
nó không nhận đầu vào từ chuột hoặc các phím bổ trợ. Nhưng bạn có thể dễ dàng sửa đổi mã của
trò chơi để sử dụng bất kỳ tổ hợp các phím nào.
'Những kẻ xấu' thường được treo lơ lửng đâu đó để trực chờ nhân vật của chúng ta chạm vào
chúng. Tuy nhiên, ốc sên thì lâu lâu lại bắn các bom ốc sên (quả bóng bạc được hiển thị gần giữa
Hình 1). Các quả bom, cũng giống như những kẻ xấu khác, làm nổ tung nhân vật nếu như vô tình
chạm vào chúng.
Trò chơi kết thúc theo một trong hai cách: bạn mất tất cả ba mạng hoặc bạn đưa nhân vật đến bậc
thềm đung đưa (bạn sẽ được điểm thưởng khi đáp xuống nút nhấn màu vàng). Dù bằng cách nào
đi nữa, trò chơi sẽ kết thúc bằng danh sách những người đã thực hiện trò chơi được thể hiện
trong Hình 2:

Hình 2. Danh sách những người đã thực hiện trò chơi

Điều bạn không thể nhìn thấy trong Hình 1 là mọi thứ — trừ nhân vật do bạn đang điều khiển di
chuyển — một cách liên tục. Chuyển động cuộn này tiếp tục phân loại Snail Bait như là một trò
chơi nhảy bậc thềm cuộn sang bên cạnh. Tuy nhiên, đó không phải là chuyển động duy nhất
trong trò chơi này để dẫn tôi đến các hình ảnh 2D (hai chiều) và các hành vi của chúng.
Về đầu trang
Các hình ảnh 2D: Phân vai các nhân vật
Hiệu năng của HTML5 Canvas
Gần đây, hầu hết các trình duyệt đều thực hiện tăng tốc phần cứng cho các quá trình chuyển tiếp
CSS nhưng vẫn chưa làm được như vậy với Canvas. Canvas đã luôn tương đối nhanh, đặc biệt là
so với các hệ thống đồ họa khác như Scalable Vector Graphics (SVG - Đồ họa Vectơ co giãn
được), nhưng Canvas không có sự tăng tốc phần cứng là không khớp với bất cứ thứ gì có tăng
tốc phần cứng.
Bây giờ, tất cả các trình duyệt hiện đại đều tăng tốc phần cứng cho các phần tử Canvas. iOS 5

chúng theo một cách nào đó tùy thuộc vào các điều kiện của trò chơi. Ví dụ, khi bạn nhấn phím k
để di chuyển nhân vật sang bên phải, hành vi di chuyển sang bên của nhân vật sau đó sẽ di
chuyển nhân vật về bên phải trong mỗi khung hình của hình ảnh động cho đến khi bạn thay đổi
hướng của nhân vật. Một hành vi khác, chạy tại chỗ, định kỳ thay đổi hình ảnh của nhân vật để
nó xuất hiện như là nhân vật đang chạy tại chỗ. Cả hai hành vi đó kết hợp lại để làm cho hình
ảnh đó xuất hiện như là nhân vật đang chạy hoặc sang trái hoặc sang phải.
Bảng 1 liệt kê các hình ảnh 2D của trò chơi và các hành vi tương ứng của chúng:

Bảng 1. Các hình ảnh 2D và các hành vi trong Snail Bait
Hình ảnh 2D

Các hành vi
Bậc thềm
 Di chuyển theo chiều ngang (tất cả các hình
ảnh 2D ngoại trừ cô bé đang chạy và bom
ốc
sên di chuyển hòa hợp với các bậc thềm)
Nhân v
ật
 Chạy tại chỗ
 Di chuyển sang bên
 Nhảy
 Rơi xuống
 Va chạm vào kẻ xấu và nổ tung
 Va chạm vào những thứ tốt và nhận được
điểm
Ong và dơi
 Bay lượn
 Vỗ cánh
Nút nh

};

var runner = new Sprite('runner', // name
runnerPainter, // painter
[ runInPlace, ]); // behaviors

Một đối tượng runInPlace được định nghĩa và được chuyển cho hàm tạo hình ảnh 2D của nhân
vật trong cùng một mảng với các hành vi khác. Khi trò chơi đang chạy, nó gọi phương thức
execute() của đối tượng runInPlace cho mỗi khung hình của hình ảnh động.
Về đầu trang
Các hướng dẫn tốt nhất về phát triển trò chơi với HTML5
Tài sản có sẵn miễn phí
Hầu hết các nhà phát triển trò chơi cần sự trợ giúp nào đó với các hình ảnh đồ họa, các hiệu ứng
âm thanh và âm nhạc của mình. May mắn thay, có nhiều tài nguyên có sẵn miễn phí theo các
thỏa thuận cấp phép khác nhau.
Snail Bait sử dụng:
 Các hiệu ứng âm thanh từ freesound.org.
 Các đoạn ghi âm thanh từ soundclick.com.
 Hình ảnh 2D cô bé đang chạy từ panelmonkey.org (trang web này đã bị tấn công).
 Tất cả các hình ảnh đồ họa khác từ Replica Island.
Tôi sẽ thảo luận các hướng dẫn thực hành tốt nhất về phát triển trò chơi trong suốt loạt bài này,
bắt đầu từ đây với năm phần cụ thể cho HTML5:
 Tạm dừng các trò chơi khi cửa sổ mất tiêu điểm.
 Thực hiện đếm ngược khi cửa sổ lấy lại tiêu điểm.
 Sử dụng các quá trình chuyển tiếp CSS3.
 Phát hiện và phản ứng với các trò chơi chạy chậm.
 Kết hợp các tính năng xã hội.
Tôi sẽ xem xét năm phần trên một cách chi tiết trong các bài tiếp theo của loạt bài này; bây giờ
tôi sẽ giới thiệu qua từng phần.
1. Tạm dừng trò chơi khi cửa sổ mất tiêu điểm

Không giống như các trò chơi có bàn điều khiển, chạy trong một môi trường có điều khiển chặt
chẽ, các trò chơi HTML5 chạy trong một môi trường rất hay thay đổi, không thể đoán trước
được và hỗn loạn. Trò chơi của bạn thường hay chạy chậm không thể chấp nhận được khi những
người chơi đang chạy các video của YouTube trong ô cửa sổ khác hoặc nếu không thì họ đang sử
dụng quá nhiều CPU hay GPU. Và luôn có khả năng là những người chơi của bạn sẽ sử dụng
một trình duyệt không thể hỗ trợ theo kịp trò chơi được.
Là một nhà phát triển trò chơi, bạn phải lường trước được chỗ rẽ không may của các sự kiện và
phản ứng cho phù hợp. Snail Bait liên tục giám sát tốc độ khung hình và khi nó phát hiện rằng
tốc độ khung hình đã hạ xuống dưới một ngưỡng cụ thể rất nhiều lần trong nhiều giây, nó hiển
thị thông báo chạy chậm trong Hình 5:

Hình 5. Phát hiện ra các khung hình chậm mỗi giây

5. Kết hợp các tính năng xã hội
Hầu như tất cả các trò chơi thành công đều kết hợp với các khía cạnh xã hội, chẳng hạn như gửi
số điểm lên Twitter hoặc Facebook. Khi một người chơi Snail Bait nhấn chuột lên liên kết Tweet
my score (Điểm số của tôi trên Tweet) thường xuất hiện ở cuối trò chơi (xem Hình 2), Snail Bait
chuyển đến một ô cửa sổ riêng của Twitter và tự động tạo ra một thông báo tweet về số điểm,
giống như ô cửa sổ trong Hình 7:

Hình 7. Văn bản thông báo của Tweet

Bây giờ bạn có một sự hiểu biết ở mức cao về trò chơi này, đây là lúc để xem xét viết mã.
Về đầu trang
Mã HTML và CSS của Snail Bait
Số liệu thống kê mã của Snail Bait
Các dòng mã:
 HTML: 276
 CSS: 410
 JavaScript: 3,898

margin-top: -35px;
float: right;
margin-right: 12px;
padding: 2px;
color: blue;
text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
font-size: 0.8em;
}

.explanation {
color: #ff0;
text-shadow: 1px 1px 1px rgba(0,0,0,1.0);
display: inline;
margin-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 2px;
}

#game-canvas {
border: 2px inset rgba(0,0,80,0.62);
-webkit-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
-moz-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
-o-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
}

#instructions {
height: 30px;
margin-right: 8px;

color: #ff0;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
background: rgba(0,0,0,0.1);
border-radius: 5px;
border: thin solid rgba(0,0,0,0.20);
padding-top: 2px;
padding-bottom: 2px;
z-index: 1;
}

#wrapper {
margin: 0 auto;
margin-top: 20px;
padding: 5px;
width: 817px;
height: 520px;
}

Như bạn có thể thấy trong Liệt kê 3, có liệt kê mã HTML như trong Hình 8, mã HTML của trò
chơi là một loạt các DIV và một khung nền ảnh, có một vài hình ảnh và một số hộp chọn:

Liệt kê 3. Tệp game.html (đoạn trích)
<!DOCTYPE html>
<html>
<! Head >

<head>
<title>Snail Bait</title>
</head>


</canvas>

<! Sound and music >

<div id='sound-and-music'>
<div class='checkbox-div'>
Sound <input id='sound-checkbox'
type='checkbox' checked/>
</div>

<div class='checkbox-div'>
Music <input id='music-checkbox'
type='checkbox' checked/>
</div>
</div>

<! Instructions >

<div id='instructions'>
<div class='keys'>
d / k

<div class='explanation'>
move left/right
</div>
</div>

<div class='keys'>
f / j


<script src='game.js'></script>
</body>
</html>

Phần tử canvas (khung nền ảnh) là nơi tất cả hành động diễn ra. Phần tử canvas đó đi kèm với
một bối cảnh 2D với một API mạnh mẽ để thực hiện các trò chơi 2D và nhiều thứ khác nữa. Văn
bản bên trong phần tử canvas là văn bản dự phòng mà trình duyệt sẽ hiển thị chỉ khi nó không
hỗ trợ Canvas của HTML5.
Một lưu ý cuối cùng về mã HTML và CSS của trò chơi: Lưu ý rằng chiều rộng và chiều cao của
khung nền ảnh được chỉ rõ trong các thuộc tính width (chiều rộng) và height của phần tử
canvas. Những thuộc tính đó liên quan đến kích thước của phần tử canvas và kích thước của bề
mặt vẽ chứa trong phần tử đó.
Mặt khác, việc sử dụng CSS để thiết lập chiều rộng và chiều cao của phần tử canvas chỉ thiết lập
kích thước của phần tử canvas thôi. Bề mặt vẽ vẫn duy trì ở chiều rộng và chiều cao mặc định
của nó tương ứng là 300 và 150 điểm ảnh. Điều đó có nghĩa là rất có thể bạn có một sự không
khớp giữa kích thước phần tử canvas và kích thước của bề mặt vẽ của nó và khi điều đó xảy ra
trình duyệt sẽ co giãn bề mặt vẽ cho phù hợp với phần tử đó. Trong hầu hết trường hợp, đó là
một hiệu ứng không mong muốn, nên một ý tưởng tốt là không bao giờ thiết lập kích thước của
phần tử canvas bằng CSS.