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>:

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

Mari tambahkan kod CSS untuk mencantikkan rupa:

css#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:

javascriptlet rows = 3;
let cols = 3;