Ghoul 1000-7 на JavaScript

Ghoul 1000-7 на JavaScript

@labweb
Я ГУЛЬ

Первым делом создаём 3 файла и скачиваем музыку из канала WebLab

  1. style.css
  2. script.js
  3. index.html

Должно выглядеть вот так:

Шаг 1: Добавляем HTML

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebLabGhoul</title>
  <!-- Css -->
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <button type="button" id="ghoul">Я ГУЛЬ</button>
 </body>
 <!-- JavaScript -->
 <script src="https://code.jquery.com/jquery-3.6.0.min.js" charset="utf-8"></script>
 <script src="script.js" charset="utf-8"></script>
</html>

Шаг 2: Добавляем CSS

/* Добавляем черный фон и чтобы
элементы располагались по центру */
body{
 background-color: black;
 display: flex;
 flex-direction: column;
 align-items: center;
}

/* Задаём цвет для цифр */
body h2{
 color: white;
}

/* Задаём свойства для рамки старта */
#ghoul{
 width: 100%;
 height: 100px;
 font-size: 50px;
}

Шаг 3: Добавляем JS

//Задаём +7, для того чтобы 1000 была в начале
g = 1000 + 7;
//Подключаем музыку
audio = new Audio('я гуль.mp3');

//Создаём основную функцию
function webghoul() {
  if (g < 0) {
    audio.pause();
    clearInterval(time);
  }
  g = g - 7;
  //Вставляем цифры
  $('body').append('<h2>' + g + '</h2>');
  //Задаем анимацию скролла
  $('html, body').animate({
    scrollTop: $(document).height() + $(window).height()
  }, 100);
}
//Назначаем событию свою функцию
$('#ghoul').on('click', function () {
  audio.play();
  //Добавляем интервал
  let time = setInterval(webghoul, 120);
});

На этом всё, теперь ты ГУЛЬ!

Подписывайся на мой телеграм канал, в нём можно найти много полезного про программирование

По вопросам писать в бота @WebLabFeedBackBot



Report Page