Game Khủng long Dino T-Rex là một game khá thú vị. Mỗi khi bạn dùng trình duyệt Chrome để lướt web, nhưng mất wifi, sẽ hiển thị game này.
Hoặc chơi thử tại đây
Bài viết này sẽ hướng dẫn các bạn các bước chi tiết để vẽ và lập trình Game Dino (cơ bản).
Chuẩn bị sprite để lập trình
Game Dino Chrome sẽ có các sprite chú khủng long, đám mây, mặt đất, game over. Các bạn nên tự vẽ, hoặc tải bản mẫu tại đây.
Hướng dẫn vẽ sprite Cloud (đám mây)
Chọn Choose a Sprite -> Paint, đặt tên sprite là Cloud, click vào tab costume để bắt đầu vẽ đám mây.
Chọn chế độ Convert to Bitmap, click nút zoom + khoảng 8 lần để có thể vẽ từng chi tiết nhỏ.
Dùng công cụ brush (cọ vẽ), chọn màu xám, và điều chỉnh kích thước cọ bằng 2 để vẽ. Có thể dùng tẩy (kích thước bằng 2) để xoá, hoặc dùng fill (hình hộp mực) để đổi màu đã vẽ.
Sau khi vẽ xong, lưu ý chung cho tất cả các costume tự vẽ, sử dụng nút Selection (chọn) kéo chọn toàn bộ costume, rê định vị vào giữa khung hình (2 dấu + trùng nhau).
Hướng dẫn vẽ Ground (mặt đất, con đường)
Chọn Choose a Sprite -> Paint -> Đặt tên sprite Ground -> Convert to Bitmap -> Sử dụng công cụ line (đường kẻ) để vẽ đường nối liên 2 cạnh màn hình và các đoạn ngắn tượng trưng cho đất đá gồ ghề ở giữa.
Sau khi vẽ xong, nhớ lưu ý định vị giữa màn hình (vị trí dấu +)
Hướng dẫn vẽ sprite Catus (cây xương rồng)
Tương tự cách vẽ các sprite trên, tạo sprite mới, đặt tên là Catus, sử dụng công cụ brush, chọn màu xám để vẽ cây xương rồng kích thước khoảng 20×45.
Hướng dẫn vẽ nhân vật chính Dinosaur T-Rex
Chọn Choose a Sprite -> Paint -> Convert to Bitmap, sau đó zoom +, chọn brush để vẽ. Sau khi vẽ costume thứ nhất đang đi bộ (walk), đặt tên là Dinosaur-walk. Chọn tiếp Choose a Costume -> Paint -> Convert to Bitmap để vẽ thêm 2 costume, Dinosaur-run 1 và Dinosaur-run 2, lưu ý thay đổi vị trí bàn chân ở tư thế đang chạy nhé.
Hướng dẫn vẽ sprite Game Over
Tạo sprite mới, đặt tên là game over, sử dụng chức năng Text để gõ chữ Game over.
Phần 2 – Hướng dẫn lập trình game Dino Chrome
Hướng dẫn lập trình sprite Cloud (đám mây)
Đám mây sẽ bay từ phía phải màn hình (toạ độ x = 240) sang trái màn hình (toạ độ -240), cố định độ cao (toạ độ y).
Trên màn hình chính dự kiến sẽ có 2 đám mây cùng bay ở 2 toạ độ khác nhau. Đám mây dưới thấp bay nhanh hơn đám mây trên cao.
Trước hết sẽ lập trình cho sprite Cloud đã vẽ ở trên. Sử dụng lệnh change x by -5 để lập trình đám mây bay từ phải sang trái. Khi đến rìa bên trái, đám mây sẽ biến mất và xuất hiện lại ở rìa bên phải, độ cao ngẫu nhiên từ 90 đến 110.
Click chuột phải vào sprite Cloudy, nhấn Duplicate để tạo thêm 1 bản sao, đặt tên là Cloud 2. Điều chỉnh thông số lập trình Cloud 2 này: ẩn sau 3 giây mới xuất hiện, bay ở tốc độ nhanh hơn, ở toạ độ y thấp hơn đám mây kia.
Click Green Flag để thử tốc độ, toạ độ của 2 đám mây đã hợp lý chưa, nếu cần thì điều chỉnh thông số trên cho phù hợp.
Hướng dẫn lập trình sprite Ground
Điểm cần lưu ý là sprite Ground có độ dài lớn = 480, do kéo dài từ bên phải màn hình sang bên trái màn hình. Do đó cần lập trình các thông số như hình ảnh sau:
Đồng thời cần Duplicate thêm một sprite Ground 2, để con đường này nối tiếp với con đường trước, tạo sự nối tiếp liên tục khi chuyển động.
Lưu ý toạ độ y của Ground 2 chính là toạ độ y của sprite ground đã thiết lập trên – y position of ground.
Lập trình cho sprite Catus (cây xương rồng)
Cây xương rồng sẽ nằm ở toạ độ bằng với mặt đất. Đồng thời sẽ xuất hiện ngẫu nhiên 1 đến 3 cây liền kề nhau, và di chuyển nhanh từ phía phải sang phía trái.
Để xác định được toạ độ x, y phù hợp cho cây xương rồng. Chọn sprite Catus, vào màn hình hiển thị, click chuột kéo rê cây xương rồng đến vị trí sát mặt đất. Toạ độ x, y sẽ tự động thay đổi theo. Vào motion, chọn go to x … y – lúc này đã tự động cập nhật toạ độ mong muốn trên.
Trong ví dụ này, x = 58, y = -72.
Cây xương rồng này sẽ di chuyển từ phải sang trái, xuất hiện ngẫu nhiên 1 lần từ 1 đến 4 cây đứng cạnh nhau.
Sử dụng chức năng create clone of my self để lập trình cây xương rồng, xuất hiện ngẫu nhiên 1-4 cây. Khoảng cách giữa 2 lần xuất hiện là 1-3 giây. Và khoảng cách giữa 2 cây là 0.05 giây, đảm bảo cây đứng sát nhau khi cùng xuất hiện.
Lập trình cho clone cây xương rồng theo các bước dưới đây:
Hướng dẫn lập trình Dinosaur
Đầu tiên chọn sprite Dinosaur, nhìn vào màn hình chính, kích chuột kéo Dinosaur đứng ngay trên vạch đen của mặt đất, nhìn thông số x, y hoặc vào Motions -> go to x, y sẽ lấy được toạ độ xuất phát của Dinosaur.
Bước đầu tiên sẽ thiết lập ngoại hình Dinosaur, điều chỉnh thông số Set size để có kích thước phù hợp với game của bạn. Next costumes sau mỗi 0.05 giây giúp tạo hiệu ứng Dinosaur chạy liên tục trên đường.
Dinosaur sẽ cố định tại toạ độ x = -159, sẽ nhảy lên để vượt qua cây xương rồng khi bấm phím mũi tên up hoặc phím space, sau đó rơi trở lại mặt đất.
Tạo 2 biến, grounded và y speed, vào Variable -> Make a Variable -> Đặt tên biến, thiết lập 2 biến với giá trị 0 khi bắt đầu.
Sau đó broadcast fall, tạo hiệu ứng rơi lúc ở trên không trung.
Tiếp tục lập trình các bước dưới đây, để Dinosaur rơi xuống mặt đất sau khi nhảy.
Click Green Flag chạy thử nghiệm, xem bước nhảy 12 qua chiều cao Catus đã phù hợp chưa để có điều chỉnh chiều cao của cây xương rồng, hoặc tăng giảm bước nhảy phù hợp.
Hướng dẫn lập trình sprite Game Over
Khi Dinosaur chạm cây xương rồng hoặc ngược lại, sẽ phát lệnh broadcast game over. Ở sprite Game Over này, bình thường sẽ ẩn (hide) và xuất hiện (show) khi nhận được thông điệp trên – when receive game over.
Như vậy chúng ta đã lập trình xong game scratch Dino Chrome. Bạn có thể chơi thử bản lập trình mẫu
Hoặc xem cách lệnh lập trình tại đây
Lời kết
Bản vẽ sprite của mỗi bạn sẽ khác nhau, do đó khi lập trình cần thử nghiệm, điều chỉnh các thông số cho phù hợp.
Để tăng độ khó cho Game Dino, có thể tăng tốc độ di chuyển cây xương rồng, tăng chiều cao hoặc số lượng cây xương rồng… Suy nghĩ và thử nghiệm nhé.