Как создать свой сайт | Статьи по HTML, CSS, JS, PHP, MySQL
Программирование на C++ для начинающих
Бесплатный курс по C++ даст Вам отличный старт для начала программирования на этом языке. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.
Чтобы получить Видеокурс,
заполните форму
| E-mail: | |
| Имя: | |
Другие курсы
Этапы создания и продвижения лендинга
После семинара:
— Вы увидите мои лендинги и их результаты.
— Вы узнаете, какие этапы создания и продвижения у лендингов.
— Вы получите 2 различных пошаговых бизнес-плана, основанных на создании лендингов.
— Вы узнаете, как автоматизировать продвижение: создали лендинг, настроили продвижение, и годами он работает уже без Вас.
Записаться
Другие курсы
И после плохого урожая надо сеять.
Сенека
Свежие статьи
01
июль
Создание перспективы в CSS
Здравствуйте! Как известно,эффект перспективы и связанное с ней 3D пространство может сделать интерфейс сайта для конечного пользователя, более удобным и понятным. Возьмем в качестве примера flip переходы или же барабанную прокрутку. Но при этом, сам процесс их создания может немного запутать. И в сегодняшней статье мы рассмотрим два свойства ответственных за данные эффекты. Это — transform и perspective.
Прочитать- Михаил Русаков
- 0 комментариев
- CSS
- CSS3
30
июнь
Аватар внутри круга на CSS
Сегодня мы сделаем эффектный аватар внутри круга, используя псевдоэлементы before и after.
Прочитать
- Михаил Русаков
- 0 комментариев
- CSS
- CSS Основы
29
июнь
Многострочные строки в Java
При написании программ на Java, может возникнуть потребность в использовании многострочных констант. Для тех, только начинает изучать язык Java это может оказаться нетривиальной задачей, так как чем длиннее будет строка, тем сложнее будет ее понять.
Прочитать- Михаил Русаков
- 0 комментариев
- Java Основы
Я создал экшн-игру на чистом HTML, CSS и JavaScript
Введение в HTML, CSS, JavaScript и как работают веб-сайты? | Учебники по веб-разработке #1
Учебник по HTML: установка VS Code и Live Server | Учебники по веб-разработке #2
Учебник по HTML: базовая структура веб-сайта | Учебники по веб-разработке #3
Учебник по HTML: заголовок, сценарий, ссылка и метатеги | Учебники по веб-разработке #4
Учебник по HTML: заголовки и абзацы | Учебники по веб-разработке #5
Учебник по HTML: теги Img и Anchor | Учебники по веб-разработке #6
Учебник по HTML: списки и таблицы | Учебники по веб-разработке #7
Учебник по HTML: формы и теги ввода | Учебники по веб-разработке #8
Учебник по HTML: встроенные и блочные элементы | Учебники по веб-разработке #9
Учебник по HTML: Идентификаторы и классы в HTML | Учебники по веб-разработке #10
Учебник по HTML: Объекты HTML | Учебники по веб-разработке #11
Учебник по HTML: семантические теги в HTML| Учебники по веб-разработке #12
Учебник по CSS: Введение в CSS | Учебники по веб-разработке #13
Учебник по CSS: Встроенный, внутренний и внешний CSS | Учебники по веб-разработке #14
Учебник по CSS: Селекторы в CSS | Учебные пособия по веб-разработке #15
Учебное пособие по CSS: Использование инструментов разработчика Chrome | Учебные пособия по веб-разработке #16
Учебное пособие по CSS: Шрифты в CSS | Учебники по веб-разработке #17
Учебник по CSS: Цвета в CSS | Учебники по веб-разработке #18
Учебник по CSS: границы и фон | Учебники по веб-разработке #19
Учебное пособие по CSS: блочная модель CSS, поля и отступы | Учебные пособия по веб-разработке #20
Учебное пособие по CSS: Float & Clear объяснил | Учебники по веб-разработке #21
Учебник по CSS: Стилизация ссылок и кнопок | Учебники по веб-разработке #22
Учебник по CSS: Создание меню навигации | Учебные пособия по веб-разработке #23
Учебное пособие по CSS: Свойство отображения CSS | Учебники по веб-разработке #24
Учебник по CSS: абсолютное, относительное, фиксированное и липкое положение в CSS | Учебники по веб-разработке #25
Проект 1: Создание веб-сайта тренажерного зала с использованием HTML5 и CSS3 | Учебники по веб-разработке #26
Учебник по CSS: Объяснение видимости и z-index | Учебные пособия по веб-разработке #27
Учебное пособие по CSS Flexbox на хинди | Учебники по веб-разработке #28
Учебник по CSS: единицы em, rem, vh и vw + Объяснение адаптивного дизайна | Учебные пособия по веб-разработке #29
Учебное пособие по CSS: объяснение медиа-запросов | Учебные пособия по веб-разработке #30
Учебное пособие по CSS: Дополнительные сведения о селекторах CSS | Учебники по веб-разработке #31
Учебное пособие по CSS: псевдоселекторы атрибутов и n-го потомка | Учебники по веб-разработке #32
Учебник по CSS: до и после псевдоселекторов | Учебные пособия по веб-разработке #33
Учебное пособие по CSS: тень блока и тень текста | Учебники по веб-разработке #34
Учебник по CSS: переменные и пользовательские свойства | Учебники по веб-разработке #35
Учебник по CSS: Создание анимации и ключевых кадров | Учебные пособия по веб-разработке #36
Учебное пособие по CSS: Создание переходов в CSS | Учебники по веб-разработке #37
Учебное пособие по CSS: преобразование свойств в CSS | Учебные пособия по веб-разработке #38
Создание проекта полностью адаптивного веб-сайта с использованием HTML и CSS на хинди | Учебники по веб-разработке #39
CSS Grid: введение и создание базовой сетки | Учебники по веб-разработке #40
CSS Grid: создание строк и пробелов в сетке | Учебники по веб-разработке #41
CSS Grid: объединение нескольких строк и столбцов в сетке | Учебники по веб-разработке #42
CSS Grid: Autofit & MinMax | Учебники по веб-разработке #43
CSS Grid: создание макетов с использованием области шаблонов сетки | Учебники по веб-разработке #44
Использование медиа-запросов с CSS Grid | Учебники по веб-разработке #45
Введение в JavaScript для внешнего и внутреннего интерфейса | Учебники по веб-разработке #46
Написание JavaScript в браузере и консоль разработчика | Учебники по веб-разработке #47
Переменные, типы данных и операторы в JavaScript | Учебники по веб-разработке #48
Строки в JavaScript | Учебники по веб-разработке #49
Строковые функции в JavaScript | Учебники по веб-разработке #50
Область действия, условия «если-иначе» и регистр переключения в JavaScript | Учебники по веб-разработке #51
Массивы и объекты в JavaScript | Учебники по веб-разработке #52
Функции в JavaScript | Учебные пособия по веб-разработке #53
Учебное пособие по JavaScript: Взаимодействие — Оповещение, Подсказка, Подтверждение | Учебники по веб-разработке #54
Учебник по JavaScript: циклы for, while, forEach, Do While | Учебники по веб-разработке #55
Учебник по JavaScript: Навигация по DOM | Учебники по веб-разработке #56
Учебник по JavaScript: события и прослушивание событий | Учебники по веб-разработке #57
Учебник по JavaScript: setInterval и setTimeOut | Учебники по веб-разработке #58
Учебник по JavaScript: дата и время в JavaScript | Учебники по веб-разработке #59
Учебник по JavaScript: стрелочные функции в JavaScript | Учебники по веб-разработке #60
Учебник по JavaScript: математический объект в JavaScript | Учебники по веб-разработке #61
Учебник по JavaScript: работа с JSON в JavaScript | Учебные пособия по веб-разработке #62
Учебное пособие по серверной части: Введение и установка Node.
Js | Учебные пособия по веб-разработке #63
Учебное пособие по серверной части: модули Node.Js с примерами | Учебные пособия по веб-разработке #64
Учебное пособие по серверной части: блокировка и неблокирующее выполнение | Учебные пособия по веб-разработке #65
Учебное пособие по серверной части: блокировка и неблокирующее выполнение | Учебные пособия по веб-разработке #66
Учебное пособие по серверной части: создание пользовательской серверной части с использованием NodeJs | Учебники по веб-разработке #67
Backend Tutorial: Создание пользовательских модулей в узле с помощью NodeJs | Учебные пособия по веб-разработке #68
Учебное пособие по серверной части: npm: Учебное пособие по диспетчеру пакетов Node | Учебные пособия по веб-разработке #69
Учебное пособие по серверной части: установка Express и Postman | Учебные пособия по веб-разработке #70
Учебное пособие по серверной части: написание нашего первого экспресс-приложения | Учебные пособия по веб-разработке #71
Учебное пособие по серверной части: статические файлы и установка механизма шаблонов Pug | Учебники по веб-разработке #72
Backend Tutorial: Использование необработанного HTML в шаблонизаторе Pug | Учебные пособия по веб-разработке #73
Учебное пособие по серверной части: Завершение серверной части NodeJs нашего веб-сайта Gym | Учебные пособия по веб-разработке #74
Учебное пособие по серверной части: танцевальный веб-сайт с использованием Pure Pug + NodeJs | Учебные пособия по веб-разработке #75
Учебное пособие по серверной части: разработка карт с использованием Pure Pug + NodeJs | Учебные пособия по веб-разработке #76
Учебное пособие по серверной части: веб-сайт Continuing Dance с использованием Pug + NodeJs | Учебники по веб-разработке #77
Backend Tutorial: Добавление спонсорского раздела с помощью Pug + NodeJs | Учебные пособия по веб-разработке #78
Учебное пособие по серверной части: добавление контактной формы с помощью Pug + NodeJs | Учебные пособия по веб-разработке #79
Учебное пособие по MongoDb: Введение в MongoDb + установка | Учебные пособия по веб-разработке #80
Учебное пособие по MongoDb.
Вставка данных в базу данных Mongo | Учебные пособия по веб-разработке #81
Учебное пособие по MongoDb. Поиск/запрос данных из базы данных Mongo | Учебники по веб-разработке #82
Учебное пособие по MongoDb. Удаление данных из базы данных Mongo | Учебные пособия по веб-разработке #83
Учебное пособие по MongoDb. Обновление данных из базы данных Mongo | Учебники по веб-разработке #84
MongoDb Tutorial: MongoDb Compass и установка Mongoose | Руководства по веб-разработке #85
MongoDb Tutorial: Использование Mongoose в NodeJs | Учебники по веб-разработке #86
Отображение случаев заражения коронавирусом на карте мира — интерактивная информационная панель с использованием JavaScript и MapBox
Backend Tutorial: Сохранение данных в базе данных с помощью Pug + NodeJs | Учебные пособия по веб-разработке #88
Учебное пособие по хостингу: Где разместить свой веб-сайт? | Учебные пособия по веб-разработке #89
Учебное пособие по хостингу: создание нашего первого VPS | Учебные пособия по веб-разработке #90
Учебное пособие по хостингу: установка Putty + основные команды Linux | Учебные пособия по веб-разработке #91
Учебное пособие по хостингу: Установка веб-сервера Apache2 на VPS | Учебные пособия по веб-разработке #92
Учебное пособие по хостингу: информационный веб-сайт CoronaVirus с хостингом | Учебники по веб-разработке #93
Учебное пособие по хостингу: использование Filezilla и WinSCP для загрузки файлов | Учебные пособия по веб-разработке #94
Учебное пособие по хостингу: привязка домена к серверу веб-хостинга | Учебные пособия по веб-разработке #95
Учебное пособие по хостингу: размещение нескольких веб-сайтов на одном сервере хостинга | Учебные пособия по веб-разработке#96
Учебное пособие по хостингу: развертывание приложений NodeJs в рабочей среде на Linux VPS | Учебники по веб-разработке#97
Установка MongoDb и размещение нашего танцевального веб-сайта на Ubuntu VPS | Учебники по веб-разработке #98
Получите бесплатный SSL-сертификат https для вашего домена на Ubuntu VPS | Учебники по веб-разработке #99
Учебник по Git: Как загрузить свои проекты на Git и GitHub | Учебники по веб-разработке #100
Прозрачная форма входа с использованием HTML и CSS | Учебники по веб-разработке #101
Я создал приложение для чата в реальном времени с использованием NodeJs и SocketIO
Создание адаптивного веб-сайта с использованием HTML, CSS и JavaScript на хинди
Аналоговые часы с использованием чистого HTML, CSS и JavaScript
Анимация движущегося автомобиля Lamborghini с использованием чистого HTML, CSS и JavaScript
Я создал экшн-игру на чистом HTML, CSS и JavaScript Шаблон CheatSheet с использованием HTML, CSS и JavaScript
Кодирование игры в змейку на JavaScript
Я создал Windows 11 с использованием HTML, CSS и JavaScript
Простая игра в крестики-нолики на JavaScript для начинающих
Игра «Крестики-нолики» на JavaScript — это простой пример игр, которые можно запрограммировать на JavaScript.
Игры можно разрабатывать на многих языках программирования, но наиболее популярными для них являются C++, JavaScript и C#.
Если вы хотите учиться, одновременно развлекаясь или просто избавляясь от скуки, создание простой игры на JavaScript и HTML/CSS — это то, что вам нужно. В этой статье мы покажем вам, как создать простую игру «Крестики-нолики» на JavaScript, дизайн и игровой процесс, которые впоследствии вы сможете расширить до более подробной и сложной игры. Нам в CodeBrainer очень нравятся простые игры на JavaScript, потому что они образовательные и веселые.
Учебник состоит из трех частей. В HTML-части нашего кода мы будем назначать идентификаторы и классы элементам нашей доски. JavaScript позаботится обо всех взаимодействиях в нашей игре. Наконец, таблица стилей CSS позволит нам персонализировать внешний вид нашей игры.
Крестики-нолики — это игра для двух игроков, в которой игроки заполняют девять пустых прямоугольников на столе символами X или O, когда наступает их ход.
Как только кому-то удается выстроить свой знак вертикально или горизонтально без перерыва, этот игрок побеждает. С нашей помощью вы сможете сделать многопользовательскую браузерную игру, в которую можно будет играть с другом.
Начало
Чтобы сохранить организованность и оптимизацию при создании игр, вы должны разделить разные части кода на разные файлы. Для нашей игры Tic-Tac-Toe JavaScript мы будем использовать только три разных файла, так как это простая игра. В index.html мы назначим классы всем отдельным конструкторам нашей игры. Мы будем стилизовать нашу игру в стиле style.css. И последнее, но не менее важное: мы напишем наш скрипт в script.js.
Игровой процесс начнется с символа x, так что x автоматически становится первым игроком.
HTML для JavaScript-игры в крестики-нолики
Начнем с HTML. Это самая простая и короткая часть нашего кода. Здесь мы назначим классы и идентификаторы нашим элементам HTML. Так как эта игра состоит из доски с ячейками внутри, мы построим ячейки с помощью элемента
Это означает, что мы просто создадим общие контейнеры, стилизовать которые будем позже. Наша доска будет максимально простой.Как вы, наверное, уже знаете, для игры в крестики-нолики требуется 9клетки (3х3). Вместо полноценного меню мы просто добавим сообщение в конце с кнопкой перезагрузки. Это то, что мы создадим в теле нашего HTML. Вот как будет выглядеть наш HTML:
HTML
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
Голова остается простой. Здесь мы только что назвали нашу веб-страницу и подключили index.html к таблице стилей и сценарию.
HTML
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
В теле мы создали нашу доску и назвали ее класс и идентификатор. Мы также присвоили класс «ячейка» ячейкам внутри доски. Мы добавили еще несколько элементов
Чтобы узнать немного больше об основах HTML, прочитайте нашу статью «Что такое HTML?» статья.
JavaScript для игры в крестики-нолики
Теперь мы создадим код для игры в крестики-нолики JavaScript. Именно эта часть делает игру веселой. Если вы новичок и нуждаетесь в некотором введении в JavaScript, вам следует ознакомиться с нашей статьей о том, что такое JavaScript.
JavaScript
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
В первых нескольких строках нашего скрипта мы создаем постоянную переменную для наших символов x и o. В таблице ниже представлены комбинации ходов для победы в игре. Эти комбинации помогут нам определить, окончена игра или нет, проверив, соответствует ли какая-либо из комбинаций текущему игровому процессу.
JavaScript
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
Здесь мы использовали теги id, которые мы назначили в index., чтобы сохранить значения всех элементов доски, сообщение о победе и кнопку перезапуска. Для этого мы использовали метод JavaScript 
html getElementById() . Для элемента текста победившего сообщения мы использовали метод querySelector() , который возвращает первый элемент в документе, соответствующий указанному селектору. Мы также использовали квадратные скобки ([]) для обозначения атрибута ячейки данных .
JavaScript
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись
В этой части скрипта мы создали функцию для запуска игры с именем gameStart() . Мы устанавливаем для переменной isPlayer_O_Turn значение false , что означает, что первым будет играть символ x. Остальная часть функции удаляет всех персонажей, оставшихся от предыдущего игрового процесса. Здесь мы также запускаем события, которые могут произойти на нашей доске, а именно щелчки мышью.
JavaScript
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
В функции handleClick мы обрабатываем события щелчка мышью для ячеек на доске. Большинство вызываемых здесь функций будут объяснены отдельно. Короче говоря, переменная currentClass сохраняет символ (X или O), чей ход в данный момент. Другая функция используется в операторе if, чтобы проверить, выиграл ли кто-то уже, путем сравнения выигрышных комбинаций с игровым процессом. Таким образом определяется, есть ничья или нет.
JavaScript
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
Функция gameEnd() упоминалась ранее. Это функция, которая завершает игру. Функция может отображать либо сообщение о победителе, в котором указывается, какой персонаж выиграл, либо сообщение о том, что победителя нет — это ничья, в зависимости от результата оператора if.
JavaScript
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
Еще одна функция, о которой упоминалось ранее, — это функция isDraw с именем каждые , который проверяет все элементы массива, чтобы подтвердить условие, возвращая логическое значение. Обычно он определяется как массив, который проверяет элементы массива и возвращает true (1), если они проходят тест.
JavaScript
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
placeMark() и swapTurns() — две короткие и простые функции. placeMark() помещает символ в ячейку, currentClass обозначает либо X, либо O в зависимости от того, чья сейчас очередь.
Делаем JavaScript-игру «Крестики-нолики» более интерактивной
В следующей части кода JavaScript мы добавим эффект наведения курсора на доску. Это облегчит игроку прицеливание в клетки. Это также делает нашу игру немного более отзывчивой.
JavaScript
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
Поскольку мы хотим, чтобы символ появлялся в ячейках при наведении на них курсора мыши перед их размещением, функция setBoardHoverClass() позаботится об интерактивной части этого. Интерактивные элементы сделают нашу JavaScript-игру в крестики-нолики более интересной.
JavaScript
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
И, наконец, наш JavaScript — это функция 
CSS — стиль нашей игры
В следующей части нашего кода вы можете дать волю своему воображению и творчеству. В таблице стилей мы будем использовать наши теги id и классы для персонализации визуальных эффектов нашей игры. От границ и ширины линии до цвета и размера текста. Так как эта часть кода может быть полностью персонализирована, вы можете либо написать ее с нуля, в соответствии с вашими предпочтениями, либо использовать наш пример. Вы также можете просто изменить цвета, размер, шрифты и т. д., если будете использовать наш пример.
Для целей игры мы предполагаем, что вы немного знакомы с CSS, но если вы хотите узнать больше о CSS, вы можете прочитать статью в нашем блоге о том, что такое CSS.
КСС
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
Мы используем элемент :root для установки переменных для последующего использования. Эти переменные задают цвет X и O, а также ширину знака X.
См. персонализацию ниже, чтобы увидеть, как вы можете сделать Tic-Tac-Toe больше по своему вкусу.
КСС
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
Начиная с визуализации нашего HTML, поле создает пробелы между элементами с определенными границами, здесь оно используется для создания нулевых границ для всего экрана. После этого мы описываем элемент с именем нашего класса board , указывая его ширину, высоту, как и где он отображается. grid-template-columns — менее известное свойство (вот хорошая статья о grid-template-columns), поэтому для простоты оно указывает количество и ширину столбцов в макете сетки. Таким образом мы делаем наши 9 ячеек для игры.
КСС
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
Здесь мы указываем, как должны выглядеть наши ячейки.
Начиная с ширина и высота , затем ширина и цвет границ, дисплей , позиция и курсор .
Теперь наш стол будет больше похож на игру в крестики-нолики. Мы исключаем внешние ячейки из наличия полной границы, поэтому наша доска может выглядеть так:
Для данной ячейки мы указываем, что границы не должно быть. Мы выбираем ячейку с помощью селектора nth-child , где вы пишете номер ячейки для выбора этого элемента/ячейки.
КСС
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
Здесь мы определяем, что нет эффекта наведения, если ячейка уже заполнена одним из двух наших символов.
КСС
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
Рисование креста для игрока
Рисование креста требует немного магии CSS.
Используя линейный градиент , мы определяем цвета в 3 шага: белый, синий (для креста) и еще раз белый. Но будьте осторожны, в начале мы также определяем угол, используя слова к правому верхнему углу , под которым все это происходит. Настройки фона нужны для создания интервала и центрирования креста.
КСС
Спасибо за прочтение!
Если вам нравится наш код, вы можете отблагодарите, поделившись этой статьей!
Для цвета мы используем нашу переменную --color-set . Как видите, мы использовали для этого функцию var (подробнее о функции var). Есть еще одна функция, называемая calc (читайте о функции calc). Это специальная функция, так как она принимает все виды измерений (например, px, pt, %) и суммирует их вместе.
Если ячейка пуста, эффект наведения будет использовать переменную для цвета с именем --color , и если мы проштампуем в нем x или o, это будет --color-set .
Здесь вы можете увидеть штамп x рядом с эффектом зависания буквы o.
Вот код для X, который не зависает. Меняется только название цвета.
КСС
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
Рисование круга для игрока
Нарисовать круг намного проще, для этого требуется всего одна линия. Но используется тот же принцип, только с радиально-градиентным.
КСС
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
На этот раз более прозрачно, как мы используем цвета, когда знак парит и когда он «высечен в камне».
Стили выигрышных сообщений
Стили выигрышного сообщения более просты. Здесь мы устанавливаем шрифты и цвет для текста. Сделайте кнопку немного закругленной. И добавьте эффект наведения в конце.
Отображение результатов игры
Приближаясь к финишу, мы теперь играем с нашим сообщением о победе или ничьей.
Здесь мы отцентрировали его на экране и установили белый цвет, так как после окончания игры фон становится черным.
Вот код сообщения:
CSS
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
А вот код кнопки с добавленным эффектом наведения:
CSS
Спасибо за прочтение!
Если вам понравился наш код, вы можете отблагодарить его, поделившись этой статьей!
Все это выглядит примерно так:
Последний класс отвечает за то, как элементы рисуются в выигрышном сообщении.
КСС
Спасибо за прочтение!
Если вам нравится наш код, вы можете отблагодарите, поделившись этой статьей!
Персонализация игры путем изменения CSS
Выполнив инструкции по созданию игры "Крестики-нолики" на JavaScript, теперь вы можете самостоятельно выбрать цвета игровых элементов и сделать их своими.
Вот как это выглядит после изменения фона и ячеек на оранжевый/желтый:
Вы можете изменить цвет, используя переменные --color и --color-set . Если вы хотите изменить цвет границы, измените цвет границы ячейки.
Shout out
Мы также хотели бы поблагодарить того (к сожалению, имя не упоминается), который написал код, на котором основан наш проект. Мы немного изменили его и сделали его более подходящим для новичков. Но это все еще хороший фрагмент кода, и вы можете проверить другие проекты, которые у них есть на их странице.
Вывод
В CodeBrainer нам действительно нравится создавать игры и играть в них. Вот почему мы были рады написать статью о создании игры Tic-Tac-Toe JavaScript, которая достаточно проста, чтобы стать интересным проектом как для наших студентов, так и для тех, кто занимается самообучением.
Мы надеемся вдохновить людей, одновременно познакомив их с игрой и веб-разработкой.