Permainan Tukar Warna dalam JavaScript

Dalam bahagian ini, anda akan melaksanakan sebuah permainan dengan bantuan saya. Permainan ini akan berupa satu jadual, di mana sel-selnya diwarnakan dengan warna rawak yang berbeza.

Katakan terdapat satu set warna tertentu, contohnya, merah, hijau, biru. Setiap kali klik pada satu sel akan menukar warnanya secara berpusing. Matlamat permainan - dengan jumlah klik yang paling sedikit menjadikan keseluruhan jadual itu satu - sebarang - warna.

Mari kita mulakan pelaksanaannya. Untuk permulaan, marilah kita buatkan padang permainan dalam bentuk jadual <table>:

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

Mari tambahkan kod CSS untuk mencantikkan rupa:

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

Sekarang, mari kita bincangkan pendekatan untuk melaksanakan permainan kita. Seperti yang anda lihat, tugas ini sudah cukup besar untuk diselesaikan secara terus. Oleh itu, ia harus dipecahkan kepada beberapa peringkat - subtugas, yang dengan melaksanakannya kita secara beransur-ansur akan menyelesaikan tugas utama kita.

Sebagai permulaan, langkah yang paling logikal adalah menulis skrip yang mencipta sel-sel jadual. Katakan, sebagai contoh, saiz padang permainan disimpan dalam pembolehubah berikut:

let rows = 3;
let cols = 3;

Salin kod HTML dan CSS yang diberikan. Tulis kod yang akan mencipta jadual dengan saiz yang ditentukan.