Trò chơi đổi màu với JavaScript

Trong phần này, bạn sẽ cùng với sự trợ giúp của tôi triển khai một trò chơi. Trò chơi sẽ là một bảng, các ô của nó được tô màu ngẫu nhiên với các màu sắc khác nhau.

Giả sử có một bộ màu xác định, ví dụ: đỏ, xanh lá cây, xanh dương. Mỗi lần nhấp chuột vào một ô sẽ thay đổi màu của nó theo vòng tròn. Mục tiêu của trò chơi là sử dụng số lần nhấp chuột ít nhất để biến tất cả các ô trong bảng thành cùng một màu - bất kỳ màu nào.

Hãy bắt tay vào triển khai. Đầu tiên hãy tạo sân chơi dưới dạng bảng <table>:

<table id="field"></table>

Thêm một số mã CSS để làm giao diện đẹp hơn:

#field td {
	width: 50px;
	height: 50px;
	border: 1px solid black;
	text-align: center;
	font-weight: bold;
}

Bây giờ hãy thảo luận cách tiếp cận để triển khai trò chơi của chúng ta. Như bạn có thể thấy, nhiệm vụ này đã đủ lớn để không thể giải quyết ngay lập tức. Do đó, nên chia nó thành một số bước - các nhiệm vụ con, thực hiện từng bước sẽ dần dần giải quyết được nhiệm vụ chính của chúng ta.

Bắt đầu, bước hợp lý nhất sẽ là viết một tập lệnh tạo ra các ô của bảng. Giả sử, ví dụ, kích thước của sân chơi được lưu trữ trong các biến sau:

let rows = 3;
let cols = 3;

Hãy sao chép mã HTML và CSS đã cho. Viết mã để tạo ra một bảng với kích thước đã xác định.