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 코드를 복사하세요. 주어진 크기의 표를 생성하는 코드를 작성하십시오.