В данном разделе вы с моей помощью реализуете игру. Игра будет представлять собой таблицу, ячейки которой окрашены в разные случайные цвета.
Пусть есть определенный набор цветов, например, красный, зеленый, синий. Пусть каждый клик на ячейку меняет ее цвет по кругу. Цель игры - за наименьшее количество кликов сделать таблицу одного - любого - цвета.
Давайте приступим к реализации. Для начала
сделаем игровое поле в виде таблицы <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 коды. Напишите код, который создаст таблицу заданного размера.