Lập trình

Lập trình game line98 bằng html5 canvas

Line 98 là một trong những trò chơi cực hay và hấp dẫn thuộc thể loại game trí tuệ.

Giao diện game Line cổ điển là 1 hình vuông gồm 9 hàng ngang và 9 hàng dọc, tạo thành 81 hình vuông nhỏ, có nhiều trái bóng với màu sắc khác nhau như: cam, đỏ, xanh, vàng… Luật chơi đơn giản như sau:

  • Khởi đầu game với 3 quả bóng to và 3 quả bóng nhỏ với vị trí và màu sắc ngẫu nhiên
  • Người chơi game có thể di chuyển quả bóng to bất kỳ đến một vị trí trống hoặc đè vào vị trí quả bóng nhỏ trên gao diện. Quả bóng chỉ có thể di chuyển theo hàng ngang hoặc dọc sao cho các ô trên đường đi không được có bóng to nào
  • Nếu có lớn hơn hoặc bằng 5 quả bóng to cùng màu liền kề nhau theo hàng ngang, hoặc hàng dọc, hoặc đường chéo thì các quả bóng đó sẽ biến mất, người chơi sẽ được điểm theo số quả bóng biến mất đó
  • Nếu số ô trống không còn đủ để tạo ra bóng nhỏ mới thì kết thúc game

Game thủ cần tính toán cũng như sắp xếp hết sức khôn khéo để số lượng bóng biến mất lớn hơn lượng bóng sinh ra, ngược lại chúng sẽ chiếm hết tất cả 81 ô vuông và người chơi sẽ bị thua.

Để lập trình được game này ta phải vẽ được các ô, vẽ được bóng to, vẽ được bóng nhỏ, xóa bóng, tạo màu ngẫu nhiên, tìm vị trí ngẫu nhiên, tìm đường đi cho quả bóng, tính điểm…và các xử lý khác.

1. Cấu trúc dữ liệu: ta coi các ô vuông là các đỉnh của đồ thị vô hướng, đối với mỗi đỉnh thì tồn tại các cạch đến các đỉnh liền kề theo hàng ngang, hoặc dọc. Như vậy ta sẽ lưu đồ thị này thành một mảng trong javascript. Mỗi phần tử mảng là một đỉnh, mỗi đỉnh sẽ bao gồm các thông tin sau:

  • id: là số thứ tự của ô tính từ trái qua phải, từ trên xuống dưới bắt đầu từ 0
  • cell: là một mảng 2 phần tử, phần tử thứ nhất là mảng chứ tọa độ góc trái trên của ô theo canvas, phần tử thứ 2 là mảng chứa tọa độ góc phải dưới của ô theo canvas. Tọa độ ở đây là tọa độ 2d tính từ góc trái trên(left, top)
  • status: trang thái bóng. Quy ước 0 là không có bóng, 1 là bóng nhỏ, 2 là bóng to
  • color: màu của bóng

2. Giải thuật:

Tạo ra các biến và hằng để lưu các thông số cấu hình và trạng thái game. Code như sau:

Hàm lấy vị trí ngẫu nhiên và tạo màu ngẫu nhiên từ danh sách màu

Hàm vẽ các dòng kẻ để tạo thành các ô để bóng. Hàm chỉ gọi 1 lần trong ván chơi.

Hàm khởi tạo bóng khi bắt đầu chơi. Hàm này sẽ tạo ra ngẫu nhiên số bóng to với số lượng bằng số lượng bóng tiếp theo, và bóng nhỏ ngẫu nhiên tiếp theo. Hàm chỉ gọi chạy 1 lần trong ván chơi.

Hàm vẽ từng quả bóng. Hàm vẽ này sẽ kết hợp với lắc quả bóng khi quả bóng đó là quả bóng to được click đầu tiên.

Hàm vẽ tất cả quả bóng đang có tại bước đi hiện tại

Các hàm bổ trợ để lấy ra bóng trong sự kiện click chuột của người chơi

Các hàm lấy ra bóng thông qua tọa độ hoặc id

Hàm duyệt đồ thị tìm đường đi cho quả bóng. Hàm này được gọi khi người chơi click vào bóng to sau đó click vào một ô không có bóng to bất kỳ.

Hàm cập nhật lại mảng lưu các ô không bóng và các ô bóng nhỏ sau mỗi lần xử lý di chuyển bóng. Vì sau mỗi lần di chuyển bóng sẽ tạo ra các bóng thỏa mãn điều kiện xóa bóng ăn điểm.

Hàm thực hiện ăn bóng tính điểm

Code lắng nghe việc phát sinh sự kiện click bóng

Code chạy game

OK, đến đây việc code cho game đã hoàn thành 98%. Phần còn lại là dựng mã html để cho javascript chạy. Mã cuối cùng như sau:

Vậy là đã hoàn thành game line98 mời bạn chơi thử line2018. Xin cảm ơn các bạn đã theo dõi!

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.