В этом руководстве мы пройдем, как создать группу фонарей фестиваля, которые устраивают себя в слова, которые вы выбираете. Онлайн демонстрация можно найти здесь Отказ
В этом руководстве немного более продвинуты, чем мои предыдущие учебники. Я собираюсь предположить, что вы можете понять много элементарных вещей самостоятельно. Я также сделал некоторые учебники для полных новичков, которые я прикрепил в конце как ссылки.
Вступление
Поскольку этот учебник немного дольше, мы пойдем за то, что вы собираетесь прочитать. Во-первых, мы пройдем, как разработать дыхательный фонарь с CSS. После этого мы узнаем, как динамически создавать фонарики через JavaScript. Тогда мы узнаем, как создать поле ввода и как расшифровать входной текст. После этого мы пойдем по некоторым алгоритмам, которые соответственно организуют фонарики. Наконец, мы узнаем о том, как анимировать фонарики.
Достаточно сказано, давайте начнем! Прежде чем начать вам понадобится веб-сайт. Если вы не хотите использовать один из своих собственных, вы можете скопировать код ниже и сохранить его как. HTML файл.
LANTERN DEMO
1. Проектирование фонарей
Мы будем использовать CSS, чтобы определить фигуры и анимацию для фонари, а затем построить их внутри корпуса HTML для проверки наших результатов.
Фонарь состоит из 3 частей:
- Внешний свет
- Фонарическое тело
- Внутренний свет
Внешний свет находится за Фонарическое тело и Внутренний свет помещается перед Фонарическое тело Отказ Эти 3 элемента размещены в невидимым Фонарь Объект, который отвечает за трястие влево и правую анимацию.
1.1 фонарь
Фонарь Объект по сути является невидимым объектом с одинаковым размером, что и Фонарическое тело Отказ Он имеет поворот в верхнем центре, определяющий центр вращения движения маятника. Следующий код CSS определяет Фонарь Отказ
@keyframes shake {
0% {
transform : rotate(10deg) scale(1);
}
50% {
transform : rotate(-10deg) scale(1);
}
100% {
transform : rotate(10deg) scale(1);
}
}
.lantern {
z-index : 999;
position : absolute;
height : 70px;
width : 50px;
transform-origin : top center;
animation : shake 4s ease-in-out infinite;
}1.2 внешний свет
Внешний свет на самом деле радиальный градиент от яркого цвета к прозрачности. Анимации масштабируют его размер, чтобы он дышил. Внешний свет Может быть определен следующим кодом:
@keyframes outerlightbreathe {
0% {
height : 100px;
width : 100px;
top : -10px;
left : -20px;
}
50% {
height : 200px;
width : 200px;
top : -60px;
left : -70px;
}
100% {
height : 100px;
width : 100px;
top : -10px;
left : -20px;
}
}
.outerLight {
z-index : -1;
position : absolute;
background-image:
radial-gradient(rgba(117, 107, 60, 1.0), rgba(117, 107, 60, 0.0), rgba(117, 107, 60, 0.0));
opacity : 0.5;
border-radius : 50%;
animation : outerlightbreathe 3s ease-in-out infinite;
}1.3 Фонарическое тело
Фонарическое тело Это прямоугольник с закругленной границей, с более тяжелым округлением на дне. Фонарическое тело Может быть определен следующим кодом:
.lanternBody {
position : absolute;
background-color : #756b3c;
height : 70px;
width : 50px;
border-radius : 15px 15px 25px 25px;
}1.4 Внутренний свет
Внутренний свет , похоже на Внешний свет , также является радиальным градиентом из яркого цвета до прозрачности, но с большей яркой частью. Анимация также отбивается от света, когда оно достигает определенного размера, чтобы он выглядел так, будто свет содержится Фонарическое тело Отказ Код, определяющий Внутренний свет можно найти ниже:
@keyframes innerlightbreathe {
0% {
height : 30px;
width : 30px;
opacity : 0.1;
top : 35px;
left : 10px;
}
20% {
clip-path : inset(0px 0px 0px 0px);
}
50% {
height : 60px;
width : 60px;
opacity : 0.5;
top : 5px;
left : -5px;
clip-path : inset(0px 5px 0px 5px);
}
80% {
clip-path : inset(0px 0px 0px 0px);
}
100% {
height : 30px;
width : 30px;
opacity : 0.1;
top : 35px;
left : 10px;
}
}
.innerLight {
position : absolute;
background-image:
radial-gradient(rgba(255, 241, 181, 1.0), rgba(255, 241, 181, 1.0), rgba(255, 241, 181, 0.0));
border-radius : 50%;
animation : innerlightbreathe 3s ease-in-out infinite;
}1,5 фонарика Строительство
Чтобы проверить наш результат, мы можем использовать следующие CSS и HTML-код для создания фонаря в центре нашей HTML-страницы.
CSS:
center {
position : absolute;
top : 50%;
left : 50%;
}HTML:
Полная демонстрация можно найти в кодепене ниже.
2. Создание фонарей
Поскольку мы узнали, как рисовать и анимировать фонарь, теперь мы можем двигаться на JavaScript, который динамически создает фонарики. В конце этого раздела мы также перейдем, как организовать фонари в слова.
2.1 Создание фонаря с JavaScript
Прежде чем начать, мы также должны изменить масштаб в нашей анимации фонаря, чтобы сделать его вдвое меньше. Размер был в порядке, пытаясь показать вам, как построен один фонарь, но слишком большой, когда мы хотим показать их партии.
@keyframes shake {
0% {
transform : rotate(10deg) scale(0.5);
}
50% {
transform : rotate(-10deg) scale(0.5);
}
100% {
transform : rotate(10deg) scale(0.5);
}
}Затем мы можем использовать следующий код для динамически генерирования фонарей. БРД Это просто держатель места в случае, если мы хотим интегрировать его на другие сайты. Код создает фонарь в той же последовательности сценария HTML, который мы использовали. В этом коде есть много других переменных, что имеет смысл в предстоящих разделах.
var brd = document.createElement("DIV");
document.body.insertBefore(brd, document.getElementById("board"));
const speed = 0.5;
const fadeInTime = 3000;
const fadeOutTime = 3000;
var lanterns = [];
function generateLantern(x, y)
{
var lantern = document.createElement("DIV");
var ltrBdy = document.createElement("DIV");
var otrLit = document.createElement("DIV");
var inrLit = document.createElement("DIV");
lantern.setAttribute('class', 'lantern');
ltrBdy.setAttribute('class', 'lanternBody');
otrLit.setAttribute('class', 'outerLight');
inrLit.setAttribute('class', 'innerLight');
ltrBdy.appendChild(inrLit);
lantern.appendChild(ltrBdy);
lantern.appendChild(otrLit);
brd.appendChild(lantern);
lantern.FIT = fadeInTime;
lantern.FOT = fadeOutTime;
lantern.style.opacity = 1.0;
// 0: ALIVE, 1: DEAD.
lantern.state = 0;
lantern.x = x;
lantern.y = y;
lantern.bounce = 0;
lantern.destination = [];
lantern.destination.x = x;
lantern.destination.y = y;
lantern.arrived = true;
lantern.style.left = lantern.x + "px";
lantern.style.top = lantern.y + "px";
if(lanterns == null)
lanterns = [];
lanterns.push(lantern);
return lantern;
}Мы можем проверить этот код со следующим кодом, который должен генерировать фонарь на Х: 100 , Y: 100 Отказ
generateLantern(100, 100);
2.2 Карта слова для фонарей
Теперь, чтобы фонарики отображать определенное слово, нам понадобится карта для каждого алфавита. Карта слова фонаря можно найти в этом Github Gist , который не будет показан здесь из-за размера.
После выполнения вы можете проверить, отображается ли слово карта с кодом ниже, что рисует слово «любовь».
var xstart = 50;
var ystart = 100;
var xspace = 50;
var yspace = 50;
var letter = "L";
for(i = 0; i < ltrMap[letter][0].length; i++)
{
for(j = 0; j < ltrMap[letter].length; j++)
{
if(ltrMap[letter][j][i] == 1)
{
generateLantern(xstart + i * xspace, ystart + j * yspace);
}
}
}
var xstart = 350;
var letter = "O";
for(i = 0; i < ltrMap[letter][0].length; i++)
{
for(j = 0; j < ltrMap[letter].length; j++)
{
if(ltrMap[letter][j][i] == 1)
{
generateLantern(xstart + i * xspace, ystart + j * yspace);
}
}
}
var xstart = 650;
var letter = "V";
for(i = 0; i < ltrMap[letter][0].length; i++)
{
for(j = 0; j < ltrMap[letter].length; j++)
{
if(ltrMap[letter][j][i] == 1)
{
generateLantern(xstart + i * xspace, ystart + j * yspace);
}
}
}
var xstart = 950;
var letter = "E";
for(i = 0; i < ltrMap[letter][0].length; i++)
{
for(j = 0; j < ltrMap[letter].length; j++)
{
if(ltrMap[letter][j][i] == 1)
{
generateLantern(xstart + i * xspace, ystart + j * yspace);
}
}
}Проверьте демонстрацию кодепена ниже:
3. Расшифровка словных входов
3.1 Создание поля ввода.
Входная коробка исчезает и принимает входы. После того, как входы были взяты, фонарики должны начать организовать. Входная коробка будет исчезнуть до тех пор, пока фонари не будут полностью устроены. Для достижения такого эффекта мы удаляем Входная коробка Как только это сделало свой вклад и создать Поддельная входная коробка в том же месте. Затем мы исчезли Поддельная входная коробка вместо.
Для начала сначала мы определяем Входная коробка В HTML, то стиль и анимации в CSS. Для этого проекта наш Входная коробка Принимает только 5 заглавных букв, а содержимое по умолчанию внутри « Love ».
HTML:
CSS:
@keyframes fadein {
0% {
opacity : 0.0;
}
100% {
opacity : 1.0;
}
}
@keyframes fadeout {
0% {
opacity : 1.0;
}
50% {
opacity : 0.0;
}
100% {
opacity : 0.0;
}
}
.wordInput, .fakeInput{
position : absolute;
bottom : 25px;
left : 25px;
}
.wordInput {
height : 30px;
width : 100px;
color : #a88600;
font-size : 25px;
font-family : Arial;
text-align : center;
border : 3px;
border-radius : 15px;
border-style : solid;
background-color : #fff9e5;
border-color : #fff9e5;
animation : fadein 1s ease-in;
}
.wordInput:hover, .wordInput:focus{
border-color : #a88600;
}
.fakeInput {
height : 30px;
width : 100px;
color : #a88600;
font-size : 25px;
font-family : Arial;
text-align : center;
border : 3px;
border-radius : 15px;
border-style : solid;
background-color : #fff9e5;
border-color : #fff9e5;
animation : fadeout 2s ease-out;
}Теперь мы должны быть в состоянии увидеть Входная коробка в правом нижнем углу веб-страницы. Затем мы используем следующий код JavaScript, чтобы заставить его принимать входы. Как только пользователь меняет фокус, это создает Поддельная входная коробка с тем же входом для исчезновения.
var wordBox = document.getElementById("wordBox");
var word = "";
wordBox.addEventListener("focusout", wordBoxFocusOut);
function wordBoxFocusOut()
{
word = wordBox.value;
var fakeBox = document.createElement("DIV");
fakeBox.setAttribute('class', 'fakeInput');
fakeBox.textContent = word;
wordBox.style.display = "none";
brd.appendChild(fakeBox);
setTimeout(function(){
fakeBox.parentNode.removeChild(fakeBox);
}, 2000);
arrangeLanterns(word);
wordBox.addEventListener("focusout", wordBoxFocusOut);
}Нам также нужно добавить следующий JavaScript, чтобы заставить его исчезать после Введите ключ нажата. Преднамеренные есть там, чтобы предотвратить выполнение скрипта дважды.
window.onkeydown = function(e)
{
key = e.keyCode;
if(key == 13)
{
wordBox.blur();
}
};После этого мы должны быть в состоянии увидеть Входная коробка это исчезает, и исчезает однажды Введите ключ нажата или коробка не в фокусе.
3.2 Обработка ввода
Теперь, когда у нас есть Входная коробка Готовы, мы должны проверить и посмотреть, может ли он правильно обрабатывать вход. Для того, чтобы сделать это сначала мы добавляем следующий код до конца нашего Wordboxfocusout () функция.
arrangeLanterns(word);
То, что мы можем определить наши Организаторы () функция.
function arrangeLanternsChar(char, charCount)
{
for(i = 0; i < ltrMap[char][0].length; i++)
{
for(j = 0; j < ltrMap[char].length; j++)
{
if(ltrMap[char][j][i] == 1)
{
generateLantern(xstart + i * xspace + xsplit * charCount, ystart + j * yspace);
}
}
}
}После этого мы должны видеть что-то, как показано следующей демонстрацией, где будет напечатана партия фонарей для соответствия входу.
4. Организация фонарей
Теперь эта часть может быть немного сухой. Мы не сможем увидеть эффекты, пока мы не анимируем фонарики, а содержимое склоняется к теоретической стороне. Но эти теории необходимы в эффективном создании прохладных эффектах в конце.
Сначала мы отправим нашу проблему, а затем введем 2 алгоритма, которые решают проблему эффективным способом. Для тех, кто уже знает, мы будем пытаться минимизировать общее расстояние, пройденное фонарями. Для этого мы будем использовать K-D дерево и некоторые Динамическое программирование Отказ
4.2 Кратчайшее расчет общего расстояния
Прежде всего, мы должны определить нашу проблему. У нас есть некоторые Направления Определяется нашим вводам слов, где фонари должны в конечном итоге в этих позициях отображать слово. Мы хотели бы, чтобы столько фонарей как Направления И мы будем генерировать их в случайных местах на экране. Эти фонарики затем вылетают в пункты назначения, но мы хотим, чтобы общие расстояния, пройденные всеми фонарями, которые будут минимальными. Мы также хотим один фонарь на назначение Отказ
Для того, чтобы сделать это, мы должны изменить наш код следующим. Кодекс преформ 4 основных операции в последовательности:
- Рассчитайте общее количество обязательных фонарей.
- Создайте дополнительные фонарики в случайных местах, если есть более необходимые фонарики, чем у нас на поле.
- Установите пункт назначения для каждого фонаря до ближайшего назначения с помощью K-D дерево Отказ
- Дополнительно оптимизировать место назначения каждого фонаря с Динамическое программирование Отказ
Для того, чтобы правильно проверить наш код, нам придется прокомментировать части, которые мы еще не там. Мы скоро пойдем в детали кода.
var distance = function(a, b){
return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2);
}
var lanternDesinationTree;
var arrivedCount = 0;
var requiredLanterns = 0;
function arrangeLanterns(word)
{
requiredLanterns = 0;
for(c = 0; c < word.length; c++)
{
requiredLanterns += ltrMap[word[c]].lanternCount;
}
while(lanterns.length < requiredLanterns)
{
generateLantern(window.innerWidth * Math.random(), window.innerHeight * Math.random());
}
lanternDestinationTree = new kdTree([], distance, ["x", "y"]);
for(c = 0; c < word.length; c++)
{
appendLanternDestinations(word[c], c);
}
for(i = 0; i < lanterns.length; i++)
{
if(i < requiredLanterns)
{
var nearest = lanternDestinationTree.nearest(lanterns[i].destination, 1);
lanternDestinationTree.remove(nearest[0][0]);
lanterns[i].destination = nearest[0][0];
lanterns[i].arrived = false;
}
else
{
lanterns[i].state = 1;
}
}
optimizeTotalDistance();
}4.2.1 K-D Дерево
Чтобы найти самое короткое общее расстояние, нам понадобится что-то называемое K-D дерево Отказ K-D дерево это структура данных, которая позволяет нам набрать многомерные координаты и выполнять действия на них более эффективно. Если вы заинтересованы в изучении k-d Дерева и сложность выполнения вы можете найти больше о них здесь Отказ
Для того, чтобы реализовать K-D дерево Нам сначала придется скачать K-D дерево от UbiLabs Отказ . JS Файл можно найти здесь На GitHub и руководства по внедрению можно найти на главной странице GitHub здесь Отказ Как только у вас есть в той же папке с вашим Отказ HTML Файл, вы можете ссылаться на него следующими сценариями HTML:
Затем вы можете проверить, чтобы увидеть, если ваш K-D дерево Работал со следующим кодом (2 возвращенные ближайшие точки должны быть напечатаны в консоли).
var points = [
{x: 1, y: 2},
{x: 3, y: 4},
{x: 5, y: 6},
{x: 7, y: 8}
];
var distance = function(a, b){
return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2);
}
var tree = new kdTree(points, distance, ["x", "y"]);
var nearest = tree.nearest({ x: 5, y: 5 }, 2);
console.log(nearest);И теперь мы можем построить наши Приложение () Функция с K-D дерево Отказ
function appendLanternDestinations(char, charCount)
{
for(i = 0; i < ltrMap[char][0].length; i++)
{
for(j = 0; j < ltrMap[char].length; j++)
{
if(ltrMap[char][j][i] == 1)
{
var destination = {};
destination.x = xstart + i * xspace + xsplit * charCount;
destination.y = ystart + j * yspace;
lanternDestinationTree.insert(destination);
}
}
}
}Чтобы проверить, мы можем изменить наше Организаторы () Функция, чтобы добавить следующий код. Затем мы должны увидеть консоль, печатающую ближайшее расстояние с K-D дерево построен нашим введенным словом.
lanternDestinationTree = new kdTree([], distance, ["x", "y"]);
for(c = 0; c < word.length; c++)
{
appendLanternDestinations(word[c], c);
}
// Test kdTree with Lantern Destinations.
var nearest = lanternDestinationTree.nearest({ x: 200, y: 200 }, 1);
console.log(nearest[0][0]);Теперь код ниже функции Append устанавливает место назначения каждого фонаря до ближайшего доступов. Для любых дополнительных фонарей их состояния устанавливаются на 1, что означает, что они должны исчезнуть контроллером анимации, который мы получим в следующем разделе.
4.2.2 Динамическое программирование
K-D дерево Оптимизация хорошая, но не идеальная. Нам понадобится некоторые Динамическое программирование Чтобы ALGORITHM возвращает минимальное общее расстояние. Динамическое программирование Является ли концепция, где вы пытаетесь найти оптимизированное решение, постепенно приближаясь к лучшему состоянию из ранее сохраненного состояния.
Алгоритм, который мы используем, на самом деле похоже на Сортировка пузыря , который можно описать следующим образом:
- Мы повторяемся через каждую пару фонарей.
- Мы проверяем, если обмениваться направлениями пары фонариков, дает более короткое общее расстояние.
- Мы поменяем их направлениями, если общее расстояние короче.
- Для фонарей, которые являются “ мертвые “ Их расстояние до назначения рассматривается как 0, замена заставляет другой фонарь иметь 0 расстояние до места назначения.
- Заканчивается, когда не может быть сделано никаких свопов, чтобы сократить расстояние.
Реализация кода к этому алгоритму можно найти ниже. Мы также должны иметь дело с их государствами и статусом прибытия, который будет дополнительно объяснен в следующем разделе. Обратите внимание, что формула расстояния не является квадратным коренным, что означает, что алгоритм будет сильно наказывать более длинные расстояния.
function optimizeTotalDistance()
{
var undone = true;
while(undone)
{
undone = false;
for(i = 0; i < lanterns.length; i++)
{
var lanternA = lanterns[i];
for(j = 0; j < lanterns.length; j++)
{
var lanternB = lanterns[j];
if(lanternA.state == 0 && lanternB.state == 0)
{
var oldDistance = distance(lanternA, lanternA.destination) + distance(lanternB, lanternB.destination);
var newDistance = distance(lanternA, lanternB.destination) + distance(lanternB, lanternA.destination);
if(newDistance < oldDistance)
{
[lanternA.destination, lanternB.destination] = [lanternB.destination, lanternA.destination];
undone = true;
}
}
else if(lanternA.state == 0 && lanternB.state == 1)
{
var oldDistance = distance(lanternA, lanternA.destination);
var newDistance = distance(lanternB, lanternA.destination);
if(newDistance < oldDistance)
{
lanternB.destination = {x: lanternA.destination.x, y: lanternA.destination.y};
lanternA.destination = {x: lanternA.x, y: lanternA.y};
lanternA.state = 1;
lanternB.state = 0;
lanternA.arrived = true;
lanternB.arrived = false;
undone = true;
}
}
else if(lanternA.state == 1 && lanternB.state == 0)
{
var oldDistance = distance(lanternB, lanternB.destination);
var newDistance = distance(lanternA, lanternB.destination);
if(newDistance < oldDistance)
{
lanternA.destination = {x: lanternB.destination.x, y: lanternB.destination.y};
lanternB.destination = {x: lanternB.x, y: lanternB.y};
lanternA.state = 0;
lanternB.state = 1;
lanternA.arrived = false;
lanternB.arrived = true;
undone = true;
}
}
}
}
}
}5. Анимирование фонарей
Это, наконец, последний раздел! Теперь мы завершим этот проект. Здесь будет объяснено много загадок, упомянутых в предыдущих разделах. Сидеть крепко, вот-волшебное шоу собирается начать.
5.1 выцветает и исчезнуть с JavaScript
Теперь на случай, если вам интересно, что фонарь. Подходит и фонарь. Fot делает в GenerateLantern () Здесь вы идете: это на самом деле позволяет контроллеру анимации исчезать в фонариках после создания, и исчезнуть его после того, как это “ Мертвый “ .
Теперь, чтобы это произошло, мы должны сначала сделать некоторые изменения скриптов, чтобы фонари были изначально прозрачными.
Нам нужно изменить:
lantern.style.opacity = 1.0;
в:
lantern.style.opacity = 0.0;
После этого мы можем построить наш контроллер анимации с кодом ниже. Spedfctr Определяет, как быстро должны двигаться фонарики. Аривтш Определяет, насколько толерантно для программы для рассмотрения фонарика прибыла в свой пункт назначения. Bonsfctr Определяет, как быстро фонарь должен отскочить вверх и вниз, и Bonsmrgn Определяет, насколько широкий отказов. Эти параметры будут иметь больше смысла позже.
Контроллер анимации освежает каждые 10 миллисекунд, что приводит к кадру 100 к//Прямо сейчас это будет медленно уменьшать фонарь. Подходит Счетчик и установите непрозрачность соответственно для вновь созданных фонарей. Это сделает противоположное на фонариках, которые мертвы. Однажды фонарь. Fot Достигает нуля для мертвых фонарей, он будет удален навсегда.
const spedFctr = 0.025;
const arivThsh = 5 * spedFctr;
const bonsFctr = 0.001;
const bonsMrgn = 5;
var before = Date.now();
var id = setInterval(frame, 10);
function frame()
{
var current = Date.now();
var deltaTime = current - before;
before = current;
for(i in lanterns)
{
var lantern = lanterns[i];
switch(lantern.state)
{
case 0:
if(lantern.FIT > 0)
{
lantern.FIT -= deltaTime;
lantern.style.opacity = 1 - lantern.FIT / fadeOutTime;
}
break;
case 1:
if(lantern.FOT > 0)
{
lantern.FOT -= deltaTime;
lantern.style.opacity = lantern.FOT / fadeOutTime;
}
else
{
lantern.parentNode.removeChild(lantern);
lanterns.splice(i, 1);
}
break;
}
}
}5.2 Переместить анимацию
Теперь для того, чтобы оживить фонари, мы добавляем следующий код в случае 1 внутри петля контроллера анимации. Код в основном просто медленно увеличивает положение фонарей в направлении их направления. После того, как фонари достигают своего назначения, он будет помечен, как прибыл, и приятное количество будет увеличиваться.
var xDiff = lantern.destination.x - lantern.x;
var yDiff = lantern.destination.y - lantern.y;
var dDiff = Math.sqrt(xDiff * xDiff + yDiff * yDiff);
if(!lantern.arrived)
{
if(Math.abs(dDiff) < arivThsh)
{
lantern.arrived = true;
arrivedCount++;
}
else
{
lantern.x += xDiff / dDiff * spedFctr * deltaTime;
lantern.y += yDiff / dDiff * spedFctr * deltaTime;
}
lantern.style.left = lantern.x + "px";
}
else
{
lantern.bounce += bonsFctr * deltaTime;
}
lantern.style.top = lantern.y + Math.sin(lantern.bounce) * bonsMrgn + "px";Мы используем следующий код, чтобы проверить, прибыли ли все фонарики каждые 0,1 секунды. Как только все фонари прибыли, мы снова возвращаем поле ввода.
var gr = setInterval(check, 100);
function check()
{
if(arrivedCount == requiredLanterns)
{
wordBox.style.display = "inline";
arrivedCount = 0;
}
}
function check()
{
if(arrivedCount == requiredLanterns)
{
wordBox.style.display = "inline";
arrivedCount = 0;
}
}Поздравляю !!! Теперь вы узнали, как создать партию фонарей, которые устраивают себя, чтобы отображать слова, которые вам нравятся. Демонстрация полного проекта можно найти здесь Отказ Надеюсь, у вас есть великий фонарный фестиваль !!!
Слова в конце
Китайский фестиваль фонаря в этом году 19 февраля. Если вы живете в маленьком китайском городе, вы бы увидели, что дух фестиваля растут по всему улицам. Время назад этот озвучивающий фестиваль на самом деле является китайским эквивалентом дня святого Валентина. Мальчики и девочки выходят на улицы, надеющиеся встретиться со своими значительными другими и отправлять ручные фонарики, которые, как полагают, предоставляют пожелания в следующем времени года.
У меня есть некоторые предыдущие гиды по аналогичным проектам.
Начинающий:
- Как заполнить ваш сайт прекрасными валентина сердцами
- Как добавить фейерверк на ваш сайт
- Как добавить некоторые пузыри на ваш сайт
Передовой:
Я увлечен кодированием и хотел бы узнать новые вещи. Я верю, что знание может сделать мир лучшем местом и поэтому самостоятельно мотивировать доля. Дайте мне знать, если вы заинтересованы в чтении ничего, в частности.
Оригинал: “https://www.freecodecamp.org/news/how-to-create-beautiful-lanterns-that-arrange-themselves-into-words-da01ae98238/”