เกมเปลี่ยนสีด้วย JavaScript

ในส่วนนี้ คุณจะได้นำเกมไปใช้ ด้วยความช่วยเหลือจากฉัน เกมจะแสดงเป็นตาราง ซึ่งเซลล์ถูกระบายด้วยสีสุ่มต่าง ๆ

สมมติว่ามีชุดสีที่กำหนดไว้ เช่น สีแดง, สีเขียว, สีน้ำเงิน สมมติว่าทุกครั้งที่คลิก ที่เซลล์จะเปลี่ยนสีของเซลล์นั้นไปเรื่อยๆ เป้าหมายของเกม คือ ทำให้ตารางทั้งหมดเป็นสีเดียวกัน - สีใดก็ได้ - ด้วยจำนวนคลิกที่น้อยที่สุด

มาเริ่มต้นการนำไปใช้กันเถอะ ก่อนอื่น สร้างสนามเกมในรูปแบบตาราง <table>:

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

เพิ่มโค้ด CSS บางส่วนเพื่อให้สวยงาม:

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

มาพูดคุยกันเกี่ยวกับวิธีการเข้าใกล้การนำ เกมของเราไปใช้ อย่างที่คุณเห็น ปัญหานี้ค่อนข้าง ใหญ่พอที่จะแก้ไขได้ในทันที ดังนั้นจึงควรแบ่งมันออกเป็นบาง ขั้นตอน - งานย่อย โดยการทำให้เสร็จเราจะค่อยๆ แก้ไขงานหลักของเรา

เริ่มแรก ขั้นตอนที่สมเหตุสมผลที่สุดคือการเขียน สคริปต์ที่สร้างเซลล์ของตาราง สมมติว่า ตัวอย่างเช่น ขนาดของสนามเกมถูกเก็บไว้ ในตัวแปรต่อไปนี้:

let rows = 3;
let cols = 3;

คัดลอกโค้ด HTML และ CSS ที่ให้ไว้ เขียนโค้ดที่สร้างตารางด้วยขนาดที่กำหนด