не меняй код только оптемезируй то что есть <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Игра-новелла</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<style>
   /* START SECTION: Fonts and other sources */
body {
  background-color: black;
}
   @font-face {
    font-family: 'Mister Brush';
    src: url('./fonts/mister_brush/MisterBrush.ttf') format('truetype');
  }

  @font-face {
    font-family: "Noto Sans TC";
    src: url('./fonts/Noto_Sans_TC/static/NotoSansTC-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }

  /* END SECTION: Fonts and other sources */

  #choices {
    display: none;
    position: absolute;
    display: flex;
    column-gap: 140px;
    row-gap: 94px;
    flex-wrap: wrap;
    width: 708px;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: 56px;
  }

  .button {
    box-sizing: border-box;
    width: 284px;
    padding: 15px;
    border: none;
    color: #fff;
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(102, 102, 102, 0) 100%
    );
    font-family: "Noto Sans TC", sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: left;
    cursor: none;
  }

  .button:hover {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(102, 102, 102, 0) 95.77%
    );
  }

  .button:nth-child(odd) {
    background: linear-gradient(
      270deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(102, 102, 102, 0) 100%
    );
    text-align: right;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
  }

  .button:nth-child(odd):hover {
    background: linear-gradient(
      270deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(102, 102, 102, 0) 95.77%
    );
  }

  .button:nth-child(even) {
    text-align: left;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
  }

  .button:nth-child(even):hover {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(102, 102, 102, 0) 95.77%
    );
  }

  .cyrcle,
  .arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
  }

  .cyrcle__image {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
  }

  .cyrcle::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
    content: "";
    width: 60px;
    height: 60px;
    border: 10px solid rgba(255, 255, 255, 0.251);
    border-radius: 50%;
    background: transparent;
    box-shadow: 0px 0px 18px 0px rgba(255, 255, 255, 0.25);
  }

  @keyframes expire-time {
    from {
      width: 100%;
    }

    to {
      width: 0%;
    }
  }

  .line-wrapper {
    position: absolute;
    bottom: 74px;
    width: calc(100% - 296px);
    text-align: center;
    margin: 0 148px;
  }

  .line {
    position: relative;
    display: inline-block;
    width: 80%;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    border-radius: 12px;
  }

  .line::before,
  .line::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #fff;
    animation: shorten 5000ms linear forwards;
  }

  .line::before {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    left: 1px;
    transform-origin: right center;
  }

  .line::after {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    right: 1px;
    transform-origin: left center;
  }

  @keyframes shorten {
    0% {
      transform: scaleX(1);
    }
    100% {
      transform: scaleX(0);
    }
  }

  @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

  html,
  body {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    overflow: hidden;
  }

  #main {
    width: 100vw;
    height: 100vh;
    background-image: url("./bin/home.png");
    background-size: cover;
    background-position: center;
    position: relative;

    /*
    Рљ РІРёРґРµРѕ С‚РµРїРµСЂСЊ РїСЂРёРјРµРЅРµРЅР° РјР°СЃРєР°
  */
    /* &:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        63.84% 79.17% at 50% 50%,
        rgb(0, 0, 0, 0) 0%,
        #000000 100%
      ),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 40.05%, rgba(0, 0, 0, 0.7) 100%);
  } */
  }

  .video-container {
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .video-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        63.84% 79.17% at 50% 50%,
        rgb(0, 0, 0, 0) 0%,
        #000000 100%
      ),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 40.05%, rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none; /* Р§С‚РѕР±С‹ С‚РµРЅСЊ РЅРµ Р±Р»РѕРєРёСЂРѕРІР°Р»Р° СѓРїСЂР°РІР»РµРЅРёРµ РІРёРґРµРѕ */
    z-index: 1;
  }

  .video-background {
    position: fixed;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .title {
    margin: 0;
    position: relative;
    z-index: 5;
    font-size: 96px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 140px;
    padding-top: 160px;
  }

  .main-nav {
    position: absolute;
    left: 50%;
    bottom: 144px;
    transform: translateX(-50%);
    z-index: 5;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 376px;

    li {
      position: relative;
      left: 0;
      transition: ease-out transform 1s, ease-out opacity 0.8s, ease-out left 1s;
      transform: scale(1);
    }

    li.scale {
      transform: scale(3);
    }

    li.offset-bottom {
      margin-bottom: 40px;
    }
  }

  .main-nav a {
    position: relative;
    font-weight: 700;
    color: #fff;
    font-size: 26px;
    display: block;
    line-height: 58px;
    text-decoration: none;
    text-align: center;

    &:after {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      content: "";
      background: radial-gradient(
        50% 72.9% at 50% 50%,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
      );
      opacity: 0.5;
      transition: ease-out opacity 0.2s;
    }

    &:before {
      content: "";
      height: 55px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: radial-gradient(
        41.67% 91.31% at 49.82% 100.15%,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0) 100%
      );
      opacity: 0;
      transition: ease-out opacity 0.2s;
    }

    &:hover {
      &:after,
      &:before {
        opacity: 1;
      }
    }
  }

  .hotkeys {
    position: absolute;
    left: 150px;
    bottom: 60px;
    display: flex;
    gap: 35px;
  }

  .hotkey {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .hotkey__key {
    position: relative;
    z-index: 2;
    padding: 4.5px;
    box-sizing: border-box;
    border: 1px solid #0000001a;
    background: linear-gradient(180deg, #212121 0%, #121212 100%);
    box-shadow: 0px 2px 1.3px 0px #0000004d inset,
      0px -2px 1.3px 0px #0000004d inset, 2px 0px 1.3px 0px #0000004d inset,
      -2px 0px 1.3px 0px #0000004d inset;

    div {
      display: flex;
      align-items: center;
      color: #fff;
      padding: 6px 12px;
      font-size: 16px;
      height: 35px;
      font-weight: 600;
      line-height: 24px;
      background: #ffffff1a;
      border: 1px solid #626262;
      box-sizing: border-box;
      box-shadow: 0px -2px 4px 0px #ffffff40 inset;
    }
  }

  .hotkey__action {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
  }
  .version {
    line-height: 46px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    position: absolute;
    right: 150px;
    bottom: 60px;
  }

  @media screen and (max-width: 1600px) {
    .title {
      font-size: 72px;
      line-height: 120px;
      padding-top: 80px;
    }

    .main-nav {
      width: 320px;
      bottom: 100px;
    }

    .main-nav a {
      font-size: 20px;
      line-height: 50px;
    }

    .hotkeys {
      left: 100px;
      bottom: 40px;
    }

    .version {
      right: 100px;
      bottom: 40px;
    }
  }

  #main > * {
    transition: ease-out opacity 0.8s;
  }
  .transparent {
    opacity: 0;
  }
  .nav-selected {
    position: relative;
    animation: selectNavItem 8s ease-out;
  }

  #loader-screen {
    opacity: 0;
    display: none;
    transition: ease-out opacity 1s;
    position: absolute;
    inset: 0;
    z-index: 50;
    background: radial-gradient(
        63.84% 79.17% at 50% 50%,
        rgba(0, 0, 0, 0) 0%,
        #000000 100%
      ),
      linear-gradient(180deg, rgba(0, 0, 0, 0.8) 40.05%, #000000 100%);
  }

  .loader {
    position: absolute;
    width: 100px;
    height: 100px;
    transform-origin: 59px 50px;
    /* animation: loader 3s linear infinite; */
    transition: ease-out bottom 2s;
    left: 50%;
    margin-left: -60px;
    bottom: -150px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
  }

  /* .loader::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 60px;
  height: 60px;
  border: 10px solid #989898;
  border-radius: 50%;
} */

  .inner-loader {
    transition: ease-out bottom 2s;
    animation: loader 3s linear infinite;
  }

  @keyframes loader {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .shootout-video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
      background-color: black;
  }

  .mini-game {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .mini-game__control {
    position: absolute;
    z-index: 2;
    bottom: 75px;
    left: 12%;
    display: flex;
    width: 80%;
    justify-content: space-between;
  }

  .mini-game__score {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 2;
    bottom: 85vh;
    right: 7.79%;
    background: url('./icons/gun_game_score_background.svg');
    width: 210px;
    height: 60px;
  }

  .mini-game__score_icon {
    user-select: none;
        -moz-user-select: none;
        pointer-events: none;
  }

  .mini-game__gained_score {
    position: absolute;
    bottom: -25px;
    font-family: "Mister Brush", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 27px;
    color: #fff;
    user-select: none;
        -moz-user-select: none;
        pointer-events: none;
  }

  .mini-game__score_score {
    font-family: "Mister Brush", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    color: #fff;
    user-select: none;
        -moz-user-select: none;
        pointer-events: none;
  }

  .mini-game__score_score_hidden {
    color: rgba(255, 255, 255, 0.5)
  }

  .blood {
    position: absolute;
  }

  .blood_top {
    top: 0;
    left: 0;
    width: 100%;
  }

  .blood_bottom {
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .blood_center {
    left: 0;
  }

  .gun-side {
    display: flex;
    flex-direction: column;
    margin-top: 5%;
    position: relative;
    transition: all 1200ms;
  }

  .gun-side_right {
    transform: translateX(500px);
    opacity: 0;
  }

  .weapon-container {
    width: 230px;
    height: 90px;
    background: url("./icons/weapon_mask.svg");
    background-repeat: no-repeat;
  }

  .weapon {
    position: relative;
    display: flex;
  }

  .weapon__image {
    position: absolute;
    user-select: none;
        -moz-user-select: none;
        pointer-events: none;
  }

  .weapon__image_colt {
    right: 45px;
    top: 10px;
  }

  .weapon__image_ak {
    right: 15px;
    top: 20px;
    width: 200px;
  }

  .weapon__image_qbz {
    right: 20px;
    top: 15px;
    width: 190px;
  }

  .weapon__image_shutgun {
    width: 300px;
    right: -30px;
    top: 20px;
  }

  .weapon__title {
    position: absolute;
    top: 45px;
    left: 30px;
    font-family: "Mister Brush", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    color: #fff;
    text-transform: uppercase;
    user-select: none;
    -moz-user-select: none;
    pointer-events: none;
  }

  .patrons-container {
    width: 172px;
    height: 50px;
    background: url("./icons/patrons_mask.svg");
  }

  .patrons {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .patrons__quantity {
    position: absolute;
    font-family: "Mister Brush", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
    color: #fff;
    top: -5px;
    left: 60px;
    user-select: none;
        -moz-user-select: none;
        pointer-events: none;
  }

  .patrons__image {
    position: absolute;
    top: 0;
    right: 20px;
    user-select: none;
        -moz-user-select: none;
        pointer-events: none;
  }

  .heart-side {
    margin-top: 0.5%;
  }

  .heart-line {
    position: relative;
    top: 0px;
  }

  .heart-line__element_first {
    position: absolute;
    top: 5px;
    left: -40px;
    width: 115px;
    height: 60px;
    background: url("./icons/main_heart_mask.svg");
    background-repeat: no-repeat;
  }

  .heart-icon {
    position: absolute;
    top: 18px;
    left: 0;
    transition: all 500ms;
    user-select: none;
        -moz-user-select: none;
        pointer-events: none;
  }

  .health-point {
    position: absolute;
    left: 20px;
    top: 13px;
    transition: all 500ms;
    user-select: none;
        -moz-user-select: none;
        pointer-events: none;
  }

  .health-point_lose {
    opacity: 0.25;
    fill: rgba(168, 39, 39, 0.25);
    stroke: rgba(168, 39, 39, 1);
  }

  .heart-line__element_second {
    top: 20px;
    left: 75px;
  }

  .heart-line__element {
    position: absolute;
    background: url("./icons/health_element_mask.svg");
    background-repeat: no-repeat;
    width: 200px;
    height: 60px;
    overflow: hidden;
  }

  .health-point_second {
    transform: rotate(30deg);
    left: -24px;
    top: 7px;
  }

  .health-point_third {
    transform: rotate(30deg);
    left: 20px;
    top: 150px;
  }

  .heart-line__element_third {
    transform: rotate(41deg);
    left: 108px;
    top: 130px;
  }

  .heart-line__element_forth {
    transform: rotate(80deg);
    left: 68px;
    top: 236px;
  }

  .health-point_forth {
    top: 5px;
    left: 13px;
    transform: rotate(-40deg);
  }

  .health-point_fifth {
    top: 5px;
    left: 15px;
    transform: rotate(-43deg);
  }

  .heart-container {
    position: absolute;
    top: 65px;
    left: -40px;
    background: url("./icons/grenade_mask.svg");
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .heart-main-icon {
    margin-top: 20px;
    margin-left: 13px; 
    width: 80px;
    height: 80px;
    user-select: none;
        -moz-user-select: none;
        pointer-events: none;
  }

  .granate-container {
    margin-left: -60px;
    margin-top: -10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 120px;
    background: url("./icons/grenade_mask.svg");
    background-size: cover;
  }

  .granate__title {
    margin-top: -40px;
    font-family: "Mister Brush", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 27px;
    color: #fff;
    user-select: none;
        -moz-user-select: none;
        pointer-events: none;
  }

  .granate__icon {
    margin-top: 15px;
    margin-left: -15px;
    background: url("./icons/grenade_background.svg");
    background-repeat: no-repeat;
    background-position: 80% 30%;
    user-select: none;
        -moz-user-select: none;
        pointer-events: none;
  }

  canvas {
    display: block;
    margin: 0 auto;
    border-radius: 50%; /* Закругляет края холста */
    width: 100px; /* Устанавливает ширину холста */
    height: 100px; /* Устанавливает высоту холста */
    transform: rotate(90deg);
    position: relative; /* Добавляем позиционирование */
    z-index: 10; /* Устанавливаем z-index для отображения поверх всего остального */
    position: absolute;
  }













      /*
        Модалка смерти
      */

      /*
        url корректные прописать
      */

      .death-modal {
        /* display: none; анимировать visible + opacity + transition */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background: radial-gradient(
            50% 50% at 50% 50%,
            rgba(56, 7, 7, 0.7) 0%,
            rgba(0, 0, 0, 0.7) 100%
          )
          rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        visibility: hidden;
        opacity: 0;
        transition: 700ms all;
      }

      .death-modal_active {
        opacity: 1;
        visibility: visible;
      }

      .death-modal__caption {
        position: relative;
      }

      .death-modal__caption__blood_top {
        position: absolute;
        width: 680px;
        height: 278px;
        background: url("./icons/blood_top_death.svg");
        z-index: -1;
      }

      .death-modal__title {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-family: Ma Shan Zheng;
        font-size: 96px;
        font-weight: 400;
        line-height: 96px;
        background: url("./icons/mask_death.png");
        background-position: center;
        width: 770px;
        height: 205px;
        z-index: 15;
        user-select: none;
        -moz-user-select: none;
        pointer-events: none;
      }

      .death-modal__caption__blood_bottom {
        position: absolute;
        bottom: -25px;
        left: 90px;
        width: 680px;
        height: 278px;
        background: url("./icons/blood_bottom_death.svg");
        z-index: -1;
      }

      .death-modal__control {
        margin-top: -100px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }

      .death-modal__control__description {
        font-family: "Noto Sans TC", sans-serif;
        font-size: 24px;
        font-weight: 400;
        line-height: 34px;

        color: rgba(255, 255, 255, 1);
      }

      .death-modal__control__button {
        width: 71px;
        height: 33px;
        font-size: 16px;
        font-weight: 600;
        line-height: 23px;
        color: #fff;
        font-family: Roboto, sans-serif;
        box-sizing: border-box;
        cursor: pointer;
        border: none;
        background: linear-gradient(180deg, #212121 0%, #121212 100%);
        border: 1px solid transparent;
        border-image-slice: 100%;
        border-image-source: none;
        border-image-source: radial-gradient(
          70.08% 102.17% at 50% 50%,
          #ffffff 0%,
          rgba(255, 255, 255, 0) 100%
        );
        border-image-slice: 1;
        box-shadow: 0px -2px 4px 0px rgba(255, 255, 255, 0.25) inset,
          0px 2px 1.3px 0px rgba(0, 0, 0, 0.3) inset,
          0px -2px 1.3px 0px rgba(0, 0, 0, 0.3) inset,
          2px 0px 1.3px 0px rgba(0, 0, 0, 0.3) inset,
          -2px 0px 1.3px 0px rgba(0, 0, 0, 0.3) inset;

      }
</style>
</head>
<body>
  <!-- screensaver -->
    <div id="main">
      <div class="video-container">
        <video class="video-background" src="./bin/video/opening.mp4" fullscreen autoplay muted></video>
      </div>
      <h1 class="title">Title of the best game</h1>
      <ul class="main-nav">
        <li class="offset-bottom">
          <a href="#" id="nav-start">Start game</a>
        </li>
        <li>
          <a href="#">Story</a>
        </li>
        <li>
          <a href="#">Settings</a>
        </li>
        <li>
          <a href="#">BTS</a>
        </li>
        <li class="offset-bottom">
          <a href="#">Info</a>
        </li>
        <li>
          <a href="#">Exit</a>
        </li>
      </ul>
      <div class="hotkeys">
        <div class="hotkey">
          <div class="hotkey__key">
            <div>Space</div>
          </div>
          <div class="hotkey__action">Select</div>
        </div>
        <div class="hotkey">
          <div class="hotkey__key">
            <div>
              <svg
                width="12"
                height="8"
                viewBox="0 0 12 8"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 6.4L6 -7.15493e-08L-1.90798e-08 6.4L1.5 8L6 3.2L10.5 8L12 6.4Z"
                  fill="white"
                />
              </svg>
            </div>
          </div>
          <div class="hotkey__action">Up</div>
        </div>
        <div class="hotkey">
          <div class="hotkey__key">
            <div>
              <svg
                width="12"
                height="8"
                viewBox="0 0 12 8"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M1.90798e-08 1.6L6 8L12 1.6L10.5 1.78873e-08L6 4.8L1.5 1.25211e-07L1.90798e-08 1.6Z"
                  fill="white"
                />
              </svg>
            </div>
          </div>
          <div class="hotkey__action">Down</div>
        </div>
      </div>

      <div class="version">V0.0.22NG</div>

      <div id="loader-screen">
        <div class="loader">
          <svg class="inner-loader" viewBox="0 0 118 118" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g filter="url(#filter0_d_1474_437)">
            <path d="M87.2843 30.7157C102.905 46.3367 102.905 71.6633 87.2843 87.2843C71.6633 102.905 46.3367 102.905 30.7157 87.2843C15.0948 71.6633 15.0948 46.3367 30.7157 30.7157C46.3367 15.0948 71.6633 15.0948 87.2843 30.7157ZM39.201 78.799C50.1357 89.7337 67.8643 89.7337 78.799 78.799C89.7337 67.8643 89.7337 50.1357 78.799 39.201C67.8643 28.2663 50.1357 28.2663 39.201 39.201C28.2663 50.1357 28.2663 67.8643 39.201 78.799Z" fill="white" fill-opacity="0.25"/>
            <path d="M30.7157 30.7157C34.4301 27.0014 38.8393 24.0552 43.6924 22.0451C48.5454 20.0349 53.7468 19.0002 58.9997 19.0002C64.2526 19.0002 69.454 20.0349 74.307 22.0451C79.1601 24.0553 83.5699 27.0014 87.2843 30.7157L78.799 39.201C76.1989 36.601 73.1119 34.5388 69.7148 33.1316C66.3177 31.7245 62.6767 31.0002 58.9997 31.0002C55.3227 31.0002 51.6817 31.7245 48.2846 33.1316C44.8874 34.5387 41.8011 36.601 39.201 39.201L30.7157 30.7157Z" fill="white"/>
            </g>
            <defs>
            <filter id="filter0_d_1474_437" x="0.9" y="0.9" width="116.2" height="116.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset/>
            <feGaussianBlur stdDeviation="9.05"/>
            <feComposite in2="hardAlpha" operator="out"/>
            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1474_437"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1474_437" result="shape"/>
            </filter>
            </defs>
            </svg>
            
        </div>
      </div>
    </div>
</div>





<video id="video" class="shootout-video"></video>
<div id="choices"></div>
<div class="rectangle"></div>
<div class="mini-game">
  <div class="mini-game__score">
    <span class="mini-game__score_score"><span class="mini-game__score_score_hidden">000</span>0</span>
    <img src="./icons/gun_game_icon_star_score.svg" class="mini-game__score_icon">
    <span class="mini-game__gained_score" style="display: none;">+0</span>
  </div>
  <div class="mini-game__control" >
    <div class="heart-side" style="display: none;">
      <div class="heart-line">
        <div class="heart-line__element_first" id="hell-1">
          <img class="heart-icon" src="./icons/heart.svg" />
          <img class="health-point" src="./icons/health_point.svg" />
        </div>
        <div class="heart-line__element heart-line__element_second" id="hell-2">
          <img
            class="health-point health-point_second"
            src="./icons/health_point.svg"
          />
        </div>
        <div class="heart-line__element heart-line__element_third" id="hell-3">
          <img
            class="health-point health-point_forth"
            src="./icons/heart-line_third.svg"
          />
        </div>
        <div class="heart-line__element heart-line__element_forth" id="hell-4">
          <img
            class="health-point health-point_fifth"
            src="./icons/heart-line_third.svg"
          />
        </div>
      </div>
      <div class="heart-container">
        <img src="./icons/gun_game_heart.svg" class="heart-main-icon" />
      </div>
    </div>
    <div class="gun-side gun-side_right">
      <div class="weapon-container">
        <div class="weapon">
          <p class="weapon__title">bear 1911</p>
          <img
            class="weapon__image weapon__image_colt"
            src="./icons/colt.svg"
          />
        </div>
      </div>
      <div style="display: flex; flex-direction: row-reverse;">
        <div class="patrons-container">
          <div class="patrons">
            <p class="patrons__quantity">14/224</p>
            <img class="patrons__image" src="./icons/colt_patron.svg" />
          </div>
        </div>
        <div style="display: none" id='f1granata' class="granate-container">
          <img src="./icons/grenade.svg" class="granate__icon" />
          <p class="granate__title">F-1</p>
        </div>
      </div>
    </div>
  </div>
</div>

   <div class="death-modal">
      <div class="death-modal__caption">
        <div class="death-modal__caption__blood_top"></div>
        <p class="death-modal__title">你死定了</p>
        <div class="death-modal__caption__blood_bottom"></div>
      </div>
      <div class="death-modal__control">
        <p class="death-modal__control__description">点击</p>
        <!-- <button class="death-modal__control__button">Space</button> -->
        <div class="hotkey__key">
          <div>Space</div>
        </div>
        <p class="death-modal__control__description">继续</p>
      </div>
    </div>



<script>
//сценарий актов
  const directoryLocalVideo = ['./bin/video/Chapter1.mp4'];
const acts = [
{//qte-1     
    //  { text: 'Yes', nextAct: false, steptime: 10, stopstep: 0 , goNext: 12, direction:'left-center' },
     
      number: 1,
      choices: [
      { text: 'Yes', nextAct: false, steptime: 166, stopstep: 12 , goNext: 2, direction:'left-center' },
      { text: 'No', nextAct: 2, direction:'right-center' },         
      ],
      games: false,
      background: `${directoryLocalVideo[0]}`,
      time: 0,
      stoptime:  5,// Время в секундах, когда видео должно остановиться
      defolt:[{steptime: 166, stopstep: 0, godefolt: 2}], // переход на number 2
      //defolt:[{steptime: 78, stopstep: 5, godefolt: 2}],
    },
    {//A-7
      number: 2,
      choices: [
      { text: 'CH-1A', nextAct: false, steptime: 463, stopstep: 12 , goNext: 3, direction:'left-top' },
      { text: 'CH-1B', nextAct: false, steptime: 477, stopstep: 21 ,  goNext: 3,direction:'right-top' },
      { text: 'CH-1C', nextAct: false, steptime: 500, stopstep: 14 , goNext: 3, direction:'left-bot' },
      { text: 'CH-1D', nextAct: false, steptime: 515, stopstep: 28 ,  goNext: 3,direction:'right-bot' },
      ],
      games: false,
      background: `${directoryLocalVideo[0]}`,
      time: 178,
      stoptime: 263, // Время в секундах, когда видео должно остановиться
      defolt:[ {steptime: 543, stopstep: 8, godefolt: 3}],
    },
    {//A-10 ch-2
      number: 3,
      choices: [
      { text: 'CH-2A', nextAct: false, steptime: 657, stopstep: 113 , goNext: 6, direction:'left-top' },
      { text: 'CH-2B', nextAct: false, steptime: 775, stopstep: 96 ,  goNext: 6,direction:'right-top' },
      { text: 'CH-2C', nextAct: false, steptime: 873, stopstep: 47 , goNext: 6, direction:'left-bot' },     
      ],
      games: false,
      background:`${directoryLocalVideo[0]}`,
      time: 552,
      stoptime: 75, // Время в секундах, когда видео должно остановиться
      defolt:[ {steptime: 775, stopstep: 96, godefolt: 6}],
    },  
    {//пусто 
      number: 4,
      choices: [
      { text: 'CH-2A', nextAct: false, steptime: 657, stopstep: 113 , goNext: 6, direction:'left-top' },
        
      ],
      games: false,
      background:`${directoryLocalVideo[0]}`,
      time: 552,
      stoptime: 75, // Время в секундах, когда видео должно остановиться
      defolt:[ {steptime: 775, stopstep: 96, godefolt: 6}],
    },  
    {//пусто
      number: 5,
      choices: [
      { text: 'CH-2A', nextAct: false, steptime: 657, stopstep: 113 , goNext: 6, direction:'left-top' },
          
      ],
      games: false,
      background:`${directoryLocalVideo[0]}`,
      time: 552,
      stoptime: 75, // Время в секундах, когда видео должно остановиться
      defolt:[ {steptime: 775, stopstep: 96, godefolt: 6}],
    },  
    
     {// A-11 ch-3
      number: 6,
      choices: [
      { text: 'CH-3A', nextAct: false, steptime: 1092, stopstep: 29 , goNext: 8, direction:'left-top' },
      { text: 'CH-3B', nextAct: false, steptime: 1123, stopstep: 20 ,  goNext: 8,direction:'right-top' },
      { text: 'CH-3C', nextAct: false, steptime: 1145, stopstep: 16 , goNext: 8, direction:'left-bot' },    
      ],
      games: false,
      background: `${directoryLocalVideo[0]}`,
      time: 920,
      stoptime: 147, // Время в секундах, когда видео должно остановиться
      defolt:[ {steptime: 1145, stopstep: 16, godefolt: 8}],
    },
{// ch-3cc
      number: 7,
      choices: [
{ text: 'CCCCCH-2A', nextAct: false, steptime: 463, stopstep: 12 , goNext: 4, direction:'' },
      ],
      games: false,
      background: `${directoryLocalVideo[0]}`,
      time: 1153,
      stoptime: 16, // Время в секундах, когда видео должно остановиться
      defolt:[ {steptime: 1169, stopstep: 0, godefolt: 8}],
    },
    {// A-13 ch-4
      number: 8,
      choices: [
      { text: 'CH-4A', nextAct: false, steptime: 1230, stopstep: 134 , goNext: 9, direction:'left-top' },
      { text: 'CH-4B', nextAct: false, steptime: 1366, stopstep: 53 ,  goNext: 9,direction:'right-top' },
      { text: 'CH-4C', nextAct: false, steptime: 1423, stopstep: 45 , goNext: 9, direction:'left-bot' },
      ],
      games: false,
      background: `${directoryLocalVideo[0]}`,
      time: 1169,
      stoptime: 24, // Время в секундах, когда видео должно остановиться
      defolt:[ {steptime: 1423, stopstep: 45, godefolt: 9}],
    },
 {// A-14
      number: 9,
      choices: [
       { text: 'MG-2', nextAct: false, steptime: 1, stopstep: 0 , goNext: 13, direction:'left-center' },
      ],
      games: false,
      background: `${directoryLocalVideo[0]}`,
      time: 1468,
      stoptime: 84, // Время в секундах, когда видео должно остановиться
      defolt:[ {steptime: 1639, stopstep: 0, godefolt: 11}],
    },
{// A-18
      number: 10,
      choices: [
      { text: 'CH-6A', nextAct: false, steptime: 1814, stopstep: 38 , goNext: 12, direction:'left-top' },
      { text: 'CH-6B', nextAct: false, steptime: 1853, stopstep: 47 ,  goNext: 12,direction:'right-top' },
      { text: 'CH-6C', nextAct: false, steptime: 1902, stopstep: 70 , goNext: 12, direction:'left-bot' },
      ],
      games: false,
      background: `${directoryLocalVideo[0]}`,
      time: 1707,
      stoptime: 83, // Время в секундах, когда видео должно остановиться
      defolt:[ {steptime: 1853, stopstep: 47, godefolt: 12}],
    },
{// A-16
      number: 11,
      choices: [
      { text: 'CH-5A', nextAct: false, steptime: 1662, stopstep: 15 , goNext: 10, direction:'left-top' },
      { text: 'CH-5B', nextAct: false, steptime: 1679, stopstep: 11 ,  goNext: 10,direction:'right-top' },
      { text: 'CH-5C', nextAct: false, steptime: 1691, stopstep: 16 , goNext: 10, direction:'left-bot' },
      ],
      games: false,
      background: `${directoryLocalVideo[0]}`,
      time: 1553,
      stoptime: 86, // Время в секундах, когда видео должно остановиться
      defolt:[ {steptime: 1691, stopstep: 0, godefolt: 10}],
    },


{// A-20
      number: 12,
      choices: [
     
      ],
      games: false,
      background: `${directoryLocalVideo[0]}`,
      time: 1972,
      stoptime: 67, // Время в секундах, когда видео должно остановиться
      defolt:[ {steptime: 2039, stopstep: 0, godefolt: 2223}],
    },

{
number: 13,
choices: [{text: "Вариант 1", nextAct: false, steptime: 97,stopstep: 12, direction: "left-top",},
                    {text: "Вариант 2",nextAct: false,steptime: 109,stopstep: 19,direction: "right-top", },
                    {text: "Вариант 5", nextAct: false,steptime: 97, stopstep: 12,direction: "left-bot",},],
        games: true,
        gamesend: [{goNext: 11, TimeEnd: 190}],

        shotgun: [
                  {
                    timeshot: [
                      { time: 9.3, friztime: 3, x: "39.9", y: "36" },//11
                      { time: 10.3, friztime: 3, x: "57", y: "22.5" },//12
                      { time: 17.8, friztime: 3, x: "56", y: "47" },//21
                      { time: 19.9, friztime: 3, x: "65", y: "51" },//22
                      { time: 25.8, friztime: 3, x: "38", y: "57" },//31
                      { time: 27.5, friztime: 3, x: "53", y: "22" },//32
                      { time: 33.75, friztime: 3, x: "44", y: "23" },//41
                      { time: 45, friztime: 3, x: "42", y: "28" },//51
                      { time: 47, friztime: 3, x: "51", y: "25" },//52
                      { time: 59.5, friztime: 3, x: "28", y: "46" },
                      { time: 68.5, friztime: 3, x: "38", y: "20" },
                      { time: 74.25, friztime: 3, x: "39", y: "33" },
                      { time: 78, friztime: 3, x: "35.75", y: "26" },
                      //автомат
                      { time: 175, friztime: 10, x: "43", y: "36" },
                    ],
                  },
                ],

        shotgunanimation: [
          { timeanimate: "0", gun: "colt" ,ammo:21, ammomax:21},
          { timeanimate: "53", gun: "remington" , ammo:7, ammomax:7},
          { timeanimate: "93", gun: "qbz", ammo:30, ammomax:30 },
        ],
        inventar :[
                   { timeanimate: 187, gun: "f1"},
                  ],
        hotkey: [
                  //  { time: 12,  friztime: 3, x: "39.9", y: "36",   key: 'T', keypress: true},
                   //  { time: 18,  friztime: 3, x: "39.9", y: "36",   key: 'T', keypress: false},
                  //   { time: 25,  friztime: 3, x: "39.9", y: "36",   key: 'T', keypress: true},
                   { time: 37,   friztime: 3, x: "39.9",y: "36",   key: 'R', keypress: false},
                   { time: 91,   friztime: 3, x: "50",  y: "30",   key: 'F', keypress: false},
                   { time: 124,  friztime: 3, x: "40",  y: "37",   key: 'T', keypress: true},
                   { time: 129,  friztime: 3, x: "80",  y: "38",   key: 'T', keypress: true},
                   { time: 134,  friztime: 3, x: "39",  y: "30",   key: 'Q', keypress: true},
                   { time: 139,  friztime: 2, x: "40",  y: "70",   key: 'Q', keypress: true},
                   { time: 154,  friztime: 3, x: "50",  y: "22",   key: 'S', keypress: true},
                   { time: 165,  friztime: 5, x: "27",  y: "23",   key: 'E', keypress: true},
                  //{ time: 149, friztime: 3, x: "57", y: "22.5",  key: 'Q', keypress: false},
        ],
        background: "./bin/video/MG-2.mp4",
        time: 0,
        stoptime: 99996, // Время в секундах, когда видео должно остановиться
        defolt: [{ steptime: 97, stopstep: 12 }],
      },

{
  number: 3,
  choices: [
  { text: 'Вариант 5', nextAct: false, steptime: 97, stopstep: 12, direction:'left-center'},
  { text: 'Вариант 6', nextAct: false, steptime: 109, stopstep: 19, direction:'right-center'},
  ],
  background: 'opening.mov',
  time: 0,
  stoptime: 5, // Время в секундах, когда видео должно остановиться\

  defolt:[{steptime: 97, stopstep: 12}],
},
];

const player = [{
                 weapon: [{weapon: '', ammo:0, ammomax:0}],
               }];


let GlobalActNumber;

// Функция для отслеживания состояния анимации

function trackProgress() 
{
  
  const line = document.querySelector('.line'); // Попытка найти элемент .line

  // Проверяем, существует ли элемент .line
  if (line) 
  {

    const computedStyle = window.getComputedStyle(line, '::before'); // Получаем стили псевдоэлемента ::before
    const transform = computedStyle.getPropertyValue('transform'); // Получаем значение transform
    const scaleX = transform.match(/matrix\((\d+\.?\d*),/)[1]; // Извлекаем масштаб по оси X
    // Преобразуем строку в число и вычисляем процент завершения
    const percentComplete = (1 - parseFloat(scaleX)) * 100;
   
    const bar = percentComplete.toFixed(2);
    if (bar === '100.00') {
            // Поиск всех элементов с классом 'line-wrapper'


const lineWrappers = document.querySelectorAll('.line-wrapper');
const choicesContainer = document.getElementById('choices');
choicesContainer.style.display = 'none'; // Скрыть контейнер с кнопками

// Перебор всех найденных элементов и их удаление
lineWrappers.forEach(function(wrapper) 
{
  wrapper.remove();
});
      GlobalActNumber = GlobalActNumber - 1;
      console.log(acts[GlobalActNumber].defolt[0].stopstep * 1000);
      const video = document.getElementById('video'); // Получаем элемент видео
      const defaultTime = acts[GlobalActNumber].defolt[0].steptime; // Получаем время из переменной defolt
      video.currentTime = defaultTime; // Устанавливаем время видео
      video.play(); // Возобновляем воспроизведение видео
      
      setTimeout(() => 
      {
        video.pause();
        startGame(acts[GlobalActNumber].defolt[0].godefolt);
      }, acts[GlobalActNumber].defolt[0].stopstep * 1000);

    }
  } 
  else 
  {
    //console.error('Элемент с классом .line не найден.');
  }
}

function getFileName(filePath) {
  // Уберем символы %20 и прочие URL-энкодированные символы
  const decodedPath = decodeURIComponent(filePath);
  // Извлечем имя файла после последнего "/"
  return decodedPath.substring(decodedPath.lastIndexOf('/') + 1);
}



function startGame(actNumber)
 {
  const act = acts.find(a => a.number === actNumber);
  if (!act) {
    console.error(`Акт с номером ${actNumber} не найден.`);
    return;
  }


    GlobalActNumber = actNumber;
    var controlElements = document.querySelectorAll('.heart-side');
    document.getElementById('main').style.display = 'none';


    // Найдем элемент с классом 'mini-game'
    const miniGameDiv = document.querySelector('.mini-game');
    // Установим для него display: none
    if (miniGameDiv) {miniGameDiv.style.display = 'none';}
    // Если элементы найдены, меняем их стиль
      if (controlElements.length > 0) 
      {

        controlElements.forEach(function(element) {
          element.style.display = 'none';
        });

 }




    const video = document.getElementById('video');
    if(act.games)
    {


document.getElementById('main').style.display = 'blcok';

      const miniGameDiv = document.querySelector('.mini-game');
      document.querySelector('.mini-game__control').style.removeProperty('display');
      if (miniGameDiv) {miniGameDiv.style.display = 'block';}



      // Если элементы найдены, меняем их стиль
      if (controlElements.length > 0) 
      {
          controlElements.forEach(function(element) 
          {
          element.style.display = 'block';
      });

       console.log('игра гун файт ');   
    }



    video.src = act.background; // Установить источник видео из выбранного акта




    video.style.display = 'block';
    video.play();

      shogungame(actNumber);

      
    }else{

  setTimeout(function() 
  {



// Действия, которые нужно выполнить после задержки
 // Получим текущее имя файла видео
  const currentFileName = getFileName(video.src);
  // Получим имя нового видеофайла
  const newFileName = getFileName(act.background);

  const currentSrc = video.src;
  const newSrc = act.background;  // Новое видео, которое ты хочешь установить

  // Сравним текущий и новый путь
  if (currentFileName !== newFileName) {
    // Если они разные, обновим источник видео
    video.src = newSrc;
    console.log('Источник видео обновлен.');
  } else {
    console.log('Видео уже использует этот источник.');
  }




    video.style.display = 'block';
    video.currentTime = act.time; // Начать с указанной секунды
    console.log(video.currentTime);
    video.play();

    // Остановить видео и показать выборы 
    setTimeout(() => {
      video.pause();

      showChoices(actNumber); // Показать выборы для выбранного акта
    }, act.stoptime * 1000);
    console.log('Это сообщение появится после задержки в 2 секунды');

  }, 10);

    }

}



    let life = 5;

    // Получаем элемент с классом death-modal
    const deathModal = document.querySelector('.death-modal');
    // Добавляем обработчик события для нажатия клавиши
    document.addEventListener('keydown', function(event) {
        // Проверяем, нажата ли клавиша пробела (event.code === 'Space')
        if (deathModal.classList.contains('death-modal_active')) 
        {
            // Проверяем, имеет ли элемент класс death-modal_active
            if (event.code === 'Space') 
            {
                // Убираем класс death-modal_active
                deathModal.classList.remove('death-modal_active');
                 const video = document.getElementById("video");
                video.currentTime = 0;
                video.play();

            }
        }
    });





const checkInterval = setInterval(function() {
    // Проверяем, имеет ли элемент класс death-modal_active
    if (deathModal.classList.contains('death-modal_active')) 
    {
       const video = document.getElementById("video");
       video.currentTime = 0;
       video.pause();
    }
}, 10); 







    function createDamageEffect() 
    {
      const bloodTop = document.createElement("img");
      bloodTop.src = "./icons/top_blood.svg";
      bloodTop.className = "blood blood_top";
      bloodTop.style.zIndex = "1";
      bloodTop.style.opacity = "0.3";
      bloodTop.style.transition = "opacity 1s ease";
      document.body.appendChild(bloodTop);

      const bloodBottom = document.createElement("img");
      bloodBottom.src = "./icons/bottom_blood.svg";
      bloodBottom.className = "blood blood_bottom";
      bloodBottom.style.zIndex = "1";
      bloodBottom.style.opacity = "0.3";
      bloodBottom.style.transition = "opacity 1s ease";
      document.body.appendChild(bloodBottom);

      const bloodCenter = document.createElement("img");
      bloodCenter.src = "./icons/center_blood.svg";
      bloodCenter.className = "blood blood_center";
      bloodCenter.style.zIndex = "1";
      bloodCenter.style.opacity = "0.3";
      bloodCenter.style.transition = "opacity 1s ease";
      document.body.appendChild(bloodCenter);



//====================================================================================================================смерть- урон//
      if (life == 2) 
      {
        const video = document.getElementById("video");
        video.pause();
        if (video) 
        { 
            const deathModal = document.querySelector('.death-modal');
            deathModal.classList.add('death-modal_active');
            const bloodBottomElements = document.querySelectorAll('.blood.blood_bottom');
            const bloodCenterElements = document.querySelectorAll('.blood.blood_center');
            const bloodTopElements = document.querySelectorAll('.blood.blood_top');
            // Объединить все найденные элементы в один массив
            const allBloodElements = [...bloodBottomElements, ...bloodCenterElements, ...bloodTopElements];
            // Перебрать объединенный массив элементов и удалить каждый
            allBloodElements.forEach(element => {
                element.parentNode.removeChild(element);
            });

           var elements = document.querySelectorAll('.health-point_lose');
           /* Так, как начало начинается с кольта */
           const weaponImage = document.querySelector('.weapon__image ');
           weaponImage.classList.remove('weapon__image_ak');

            elements.forEach(function(element) {
              // Заменяем класс 'health-point_lose' на 'health-point'
              element.classList.remove('health-point_lose');
              element.classList.add('health-point');
              // Удаляем атрибут style
               // Получаем родительский элемент с классом 'heart-line__element'
              var parentElement = element.closest('.heart-line__element');

              // Убираем стиль background-image
              if (parentElement) {
                  parentElement.style.backgroundImage = '';
              }
          });
          life = 6;
          u=0;
          i=0;
          h=0;
        }
      }

      life = life - 1;

      if (life >= 1) {
        const heartLineElements = document.querySelectorAll(
          ".heart-line__element"
        );
        const heartLineMainElement = document.querySelector(
          ".heart-line__element_first"
        );

        heartLineElements.forEach((element) => {
          if (element.id === `hell-${life}`) {
            element.style.backgroundImage =
              'url("./icons/health_element_mask_lose.svg")';
            element.children[0].classList.add("health-point_lose");
          }
        });

        if (heartLineMainElement.id === `hell-${life}`) {
          heartLineMainElement.style.backgroundImage =
            'url("./icons/main_heart_mask_lose.svg")';
          heartLineMainElement.children[0].classList.add("health-point_lose");
          heartLineMainElement.children[1].classList.add("health-point_lose");
        }
      }

    }


    let cauntpatrons = 19;
    //============================================================================================ ПРИЦЕЛ- Клавиши
        // Функция для создания и отображения объектов на экране
    function hotkeygen(time, friztime, x, y, key , keypress) 
    {

 if (!keypress)
 {
                  
                      const canvasElement = document.createElement("canvas");
                      canvasElement.id = "circleCanvas";
                      canvasElement.style.position = "absolute";
                      canvasElement.width = 100;
                      canvasElement.height = 100;
                      canvasElement.style.left = x + "%";
                      canvasElement.style.top = y + "%";
                      canvasElement.style.zIndex = "2";
                      document.body.appendChild(canvasElement);
                      const canvas = document.getElementById("circleCanvas");
                      const ctx = canvas.getContext("2d");

                      let startAngle = 0;
                      let endAngle = 2 * Math.PI;
                      const shrinkSpeed = 0.02;



                        const svgData = `<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                      <rect width="100" height="100" rx="50" fill="black" fill-opacity="0.35"/>
                                                      <path d="M90 50.0001C90 72.0915 72.0914 90.0001 50 90.0001C27.9086 90.0001 10 72.0915 10 50.0001C10 27.9087 27.9086 10.0001 50 10.0001C72.0914 10.0001 90 27.9087 90 50.0001ZM22 50.0001C22 65.4641 34.536 78.0001 50 78.0001C65.464 78.0001 78 65.4641 78 50.0001C78 34.5361 65.464 22.0001 50 22.0001C34.536 22.0001 22 34.5361 22 50.0001Z" fill="white" fill-opacity="0.4"/>
                                                      <rect x="31" y="31" width="38" height="38" rx="19" fill="white" fill-opacity="0.1"/>
                                                      
                                                       <rect width="100" height="100" rx="50" fill="black" fill-opacity="0.35"/>
                                                       <path d="M90 50.0001C90 72.0915 72.0914 90.0001 50 90.0001C27.9086 90.0001 10 72.0915 10 50.0001C10 27.9087 27.9086 10.0001 50 10.0001C72.0914 10.0001 90 27.9087 90 50.0001ZM22 50.0001C22 65.4641 34.536 78.0001 50 78.0001C65.464 78.0001 78 65.4641 78 50.0001C78 34.5361 65.464 22.0001 50 22.0001C34.536 22.0001 22 34.5361 22 50.0001Z" fill="white" fill-opacity="0.4"/>
                                                      <rect x="31" y="31" width="38" height="38" rx="19" fill="white" fill-opacity="0.1"/>
                                                      <text x="50" y="50" text-anchor="middle" dominant-baseline="middle" fill="white" font-size="24" font-family="Arial" transform="rotate(-90 50 50)">${key}</text>
                                                      </svg>`;



                      const img = new Image();
                      const svgBlob = new Blob([svgData], {
                        type: "image/svg+xml;charset=utf-8",
                      });
                      const url = URL.createObjectURL(svgBlob);

                      img.onload = function () {
                        URL.revokeObjectURL(url);
                        animate();
                      };

                      img.src = url;

                      function drawCircle() {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                        ctx.strokeStyle = "white";
                        ctx.lineWidth = 11;
                        ctx.beginPath();
                        ctx.arc(canvas.width / 2, canvas.height / 2, 34, startAngle, endAngle);
                        ctx.stroke();
                      }

                      function updateCircle() {
                        if (endAngle - startAngle > shrinkSpeed * 2) {
                          startAngle += shrinkSpeed;
                          endAngle -= shrinkSpeed;
                        }
                      }

                      function animate() {
                        updateCircle();
                        drawCircle();
                        requestAnimationFrame(animate);
                      }
                      // Создание объекта
                      const object = document.createElement("div");
                      object.style.position = "absolute";
                      object.style.left = "50%";
                      object.style.top = "50%";
                      object.style.transform = "translate(-50%, -50%)";
                      object.style.zIndex = "2";

                      // Создание изображения внутри объекта
                      const image = new Image();
                      image.className = "interactive-object"; // Класс для стилей
                      object.appendChild(image);

                      // Добавление объекта на страницу
                      document.body.appendChild(object);
                                                     // Получаем элемент canvas

                      // Установка таймера на friztime
                      const timeoutId = setTimeout(() => {
                        if (document.body.contains(object)) 
                        {
                          document.body.removeChild(circleCanvas);
                          console.log("не успел");
                          createDamageEffect();
                          video.play();
                        }
                      }, friztime * 800);

                        function checkKey(dynamicKey) 
                        {
                            let intervalId;
                            let timeElapsed = 0;

                            // Преобразуем букву в код клавиши
                            const keyCode = dynamicKey.toUpperCase().charCodeAt(0);

                            // Функция для проверки нажатия клавиши
                            function checkKeyPress(event) {
                                if (event.keyCode === keyCode) {
                                    console.log(`Клавиша ${dynamicKey.toUpperCase()} была нажата!`);
                                    document.body.removeChild(circleCanvas); // Удаление объекта
                                    timeElapsed = 0;
                                    clearInterval(intervalId);
                                    video.play();

                                }




                          }

                          // Функция, вызываемая каждую секунду
                          function checkEverySecond() {
                              timeElapsed += 1;
                              if (timeElapsed > 3) {
                                  clearInterval(intervalId);
                                  window.removeEventListener('keydown', checkKeyPress);
                                  document.body.removeChild(circleCanvas);
                                  console.log("не успел");
                                  createDamageEffect();
                                  video.play();
                                  timeElapsed = 0;
                              }
                          }

                                  // Добавляем обработчик события нажатия клавиш
                                  window.addEventListener('keydown', checkKeyPress);
                                  // Запускаем интервал для проверки каждую секунду
                                  intervalId = setInterval(checkEverySecond, 700);
                              }

                              checkKey(key);

          }else{
    const canvasElement = document.createElement('canvas');
    canvasElement.id = 'circleCanvas';
    canvasElement.style.position = 'absolute';
    canvasElement.width = 100;
    canvasElement.height = 100;
    canvasElement.style.left = x + '%';
    canvasElement.style.top = y + '%';
    canvasElement.style.zIndex = '2';
    document.body.appendChild(canvasElement);
    const canvas = document.getElementById('circleCanvas');
    const ctx = canvas.getContext('2d');

    let startAngle = Math.PI * 1.5;
    let endAngle = Math.PI * 1.5;
    const fillSpeed = 0.02;

    const svgData = `<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect width="100" height="100" rx="50" fill="black" fill-opacity="0.35"/>
                      <path d="M90 50.0001C90 72.0915 72.0914 90.0001 50 90.0001C27.9086 90.0001 10 72.0915 10 50.0001C10 27.9087 27.9086 10.0001 50 10.0001C72.0914 10.0001 90 27.9087 90 50.0001ZM22 50.0001C22 65.4641 34.536 78.0001 50 78.0001C65.464 78.0001 78 65.4641 78 50.0001C78 34.5361 65.464 22.0001 50 22.0001C34.536 22.0001 22 34.5361 22 50.0001Z" fill="white" fill-opacity="0.4"/>
                      <rect x="31" y="31" width="38" height="38" rx="19" fill="white" fill-opacity="0.1"/>
                      <text x="50" y="50" text-anchor="middle" dominant-baseline="middle" fill="white" font-size="24" font-family="Arial" transform="rotate(-180 50 50)">${key}</text>
                     </svg>`;

    const img = new Image();
    const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    const url = URL.createObjectURL(svgBlob);

    img.onload = function() {
      URL.revokeObjectURL(url);
      drawCircle();
    };

    img.src = url;

    let animationRunning = false;

    function drawCircle() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      ctx.strokeStyle = 'white';
      ctx.lineWidth = 11;

      ctx.beginPath();
      ctx.arc(canvas.width / 2, canvas.height / 2, 35, startAngle, endAngle);
      ctx.stroke();
    }

    function updateCircle() {
      if (endAngle - startAngle < 2 * Math.PI) {
        startAngle -= fillSpeed;
        endAngle += fillSpeed;
  

          console.log(startAngle);
        if (1.5523889803847024 === startAngle) {
          console.log(startAngle);
          document.body.removeChild(circleCanvas); // Удаление объекта
      }
    } 

    }

    function animate() {
      if (animationRunning) {
        updateCircle();
        drawCircle();
        requestAnimationFrame(animate);
      }
    }

    const keyCode = key.toUpperCase().charCodeAt(0);
    console.log(keyCode);

    document.addEventListener('keydown', function(event) {
      if (event.keyCode === keyCode && !animationRunning) {
        animationRunning = true;
        animate(); // Start animation
      }
    });

    document.addEventListener('keyup', function(event) {
      if (event.keyCode === keyCode) {
        animationRunning = false; // Stop animation
      }
    });

    // Создание объекта
    const object = document.createElement('div');
    object.style.position = 'absolute';
    object.style.left = '50%';
    object.style.top = '50%';
    object.style.transform = 'translate(-50%, -50%)';
    object.style.zIndex = '2';

    // Создание изображения внутри объекта
    const image = new Image();
    image.className = 'interactive-object'; // Класс для стилей
    object.appendChild(image);

    // Установка таймера на friztime
    const timeoutId = setTimeout(() => {
      if (document.body.contains(object)) {
        document.body.removeChild(circleCanvas);
        startAngle = 0;
        createDamageEffect();
      }
    }, friztime * 1300);

    // Добавление объекта на страницу
    document.body.appendChild(object);
    document.getElementById('circleCanvas').style.transform = 'rotate(-180deg)';
          }
}
//Прицел 
    // Функция для создания и отображения объектов на экране
    function createObject(time, friztime, x, y) 
    {
      // Создание объекта
      const canvasElement = document.createElement("canvas");
      canvasElement.id = "circleCanvas";
      canvasElement.style.position = "absolute";
      canvasElement.width = 100;
      canvasElement.height = 100;
      canvasElement.style.left = x + "%";
      canvasElement.style.top = y + "%";
      canvasElement.style.zIndex = "2";
      document.body.appendChild(canvasElement);
      const canvas = document.getElementById("circleCanvas");
      const ctx = canvas.getContext("2d");

      let startAngle = 0;
      let endAngle = 2 * Math.PI;
      const shrinkSpeed = 0.02;

      const svgData = `<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <rect width="100" height="100" rx="50" fill="black" fill-opacity="0.35"/>
                                  <path d="M90 50.0001C90 72.0915 72.0914 90.0001 50 90.0001C27.9086 90.0001 10 72.0915 10 50.0001C10 27.9087 27.9086 10.0001 50 10.0001C72.0914 10.0001 90 27.9087 90 50.0001ZM22 50.0001C22 65.4641 34.536 78.0001 50 78.0001C65.464 78.0001 78 65.4641 78 50.0001C78 34.5361 65.464 22.0001 50 22.0001C34.536 22.0001 22 34.5361 22 50.0001Z" fill="white" fill-opacity="0.4"/>
                                  <rect x="31" y="31" width="38" height="38" rx="19" fill="white" fill-opacity="0.1"/>
                                  <path d="M48.32 36H51.68L50.56 42.16V48.32H49.44V42.16L48.32 36Z" fill="white"/>
                                  <path d="M64 48.32V51.68L57.84 50.56L51.68 50.56V49.44L57.84 49.44L64 48.32Z" fill="white"/>
                                  <path d="M51.68 64H48.32L49.44 57.84V51.68H50.56V57.84L51.68 64Z" fill="white"/>
                                  <path d="M36 51.68L36 48.32L42.16 49.44L48.32 49.44V50.56L42.16 50.56L36 51.68Z" fill="white"/>
                                  </svg>`;

      const img = new Image();
      const svgBlob = new Blob([svgData], {
        type: "image/svg+xml;charset=utf-8",
      });
      const url = URL.createObjectURL(svgBlob);

      img.onload = function () {
        URL.revokeObjectURL(url);
        animate();
      };

      img.src = url;

      function drawCircle() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = "white";
        ctx.lineWidth = 11;
        ctx.beginPath();
        ctx.arc(canvas.width / 2, canvas.height / 2, 34, startAngle, endAngle);
        ctx.stroke();
      }

      function updateCircle() {
        if (endAngle - startAngle > shrinkSpeed * 2) {
          startAngle += shrinkSpeed;
          endAngle -= shrinkSpeed;
        }
      }

      function animate() {
        updateCircle();
        drawCircle();
        requestAnimationFrame(animate);
      }
      // Создание объекта
      const object = document.createElement("div");
      object.style.position = "absolute";
      object.style.left = "50%";
      object.style.top = "50%";
      object.style.transform = "translate(-50%, -50%)";
      object.style.zIndex = "2";

      // Создание изображения внутри объекта
      const image = new Image();
      image.className = "interactive-object"; // Класс для стилей
      object.appendChild(image);

      // Добавление объекта на страницу
      document.body.appendChild(object);

      // Установка таймера на friztime
      const timeoutId = setTimeout(() => {
        if (document.body.contains(object)) {
          document.body.removeChild(circleCanvas);
          console.log("не успел");
          createDamageEffect();
          video.play();
        }
      }, friztime * 1000);





function updateScore() {
    // Генерируем случайное значение для временного счета
    const randomGainedScore = Math.floor(Math.random() * 10000); // от 0 до 9999
    
    // Обновляем основной счет
    const scoreElement = document.querySelector('.mini-game__score_score');
    const currentScore = parseInt(scoreElement.lastChild.nodeValue, 10); // Преобразуем текущий счет в число
    const newScore = currentScore + randomGainedScore; // Складываем текущий счет с новым значением
    scoreElement.lastChild.nodeValue = newScore; // Обновляем счет в HTML
    
    // Обновляем временный счет, который должен исчезнуть
    const gainedScoreElement = document.querySelector('.mini-game__gained_score');
    gainedScoreElement.textContent = `+${randomGainedScore}`;

    // Показать временный счет и установить начальные стили для плавного появления и исчезновения
    gainedScoreElement.style.display = 'inline'; // Или 'block', в зависимости от желаемого отображения
    gainedScoreElement.style.opacity = '1';
    gainedScoreElement.style.transition = 'opacity 0.5s ease-out';

    // Плавное исчезновение через 2 секунды
    setTimeout(() => {
      gainedScoreElement.style.opacity = '0';

      // После исчезновения скрыть элемент снова
      setTimeout(() => {
        gainedScoreElement.style.display = 'none';
      }, 500); // Установите задержку, равную времени перехода (1 секунда)
    }, 1000);
  }



      // Обработчик событий для нажатия на изображение
      circleCanvas.addEventListener("click", () => {
        updateScore();
        player[0].weapon[0].ammo = player[0].weapon[0].ammo - 1;
        // Получить элемент, содержащий текст
        const patrons = document.querySelector(".patrons");
        // Получить элемент <p> с количеством патронов
        const patronskol = patrons.querySelector(".patrons__quantity");
        // Изменить текст количества патронов
        patronskol.textContent = `${player[0].weapon[0].ammo}/${player[0].weapon[0].ammomax}`;
        clearTimeout(timeoutId); // Отмена таймера
        document.body.removeChild(circleCanvas); // Удаление объекта
        video.play();
      });
    }

    i = 0;

    function animategunshoot(animategun, gun) 
    {
      if (animategun) {
        const gunSide = document.querySelector(".gun-side");
        const weaponImage = document.querySelector(".weapon__image");
        const weaponTitle = document.querySelector(".weapon__title");
        const patronImage = document.querySelector(".patrons__image");
        gunSide.classList.add("gun-side_right");
        player[0].weapon[0].weapon=gun;

        setTimeout(() => {
          //Анимация оружия
          switch (gun) {
            case "remington":
              weaponImage.src = "./icons/shotgun.svg";
              weaponImage.className = "weapon__image weapon__image_shutgun"
              weaponTitle.textContent = "remington";
              patronImage.src = "./icons/shotgun_patron.svg";
              player[0].weapon[0].ammo=7;
              player[0].weapon[0].ammomax=7;
              break;

            case "ak-47":
              weaponImage.src = "./icons/ak.svg";
              weaponImage.className = "weapon__image weapon__image_ak"
              weaponTitle.textContent = "ak-47";
              patronImage.src = "./icons/ak_patron.svg";
              player[0].weapon[0].ammo=30;
              player[0].weapon[0].ammomax=30;
              break;
            case "qbz":
              weaponImage.src = "./icons/qbz.svg";
              weaponImage.className = "weapon__image weapon__image_qbz"
              weaponTitle.textContent = "qbz";
              patronImage.src = "./icons/ak_patron.svg";
              player[0].weapon[0].ammo=30;
              player[0].weapon[0].ammomax=30;
              break;
            case "colt":
              weaponImage.src = "./icons/colt.svg";
              weaponImage.className = "weapon__image weapon__image_colt"
              weaponTitle.textContent = "bear 1911";
              patronImage.src = "./icons/colt_patron.svg";
              player[0].weapon[0].ammo=14;
              player[0].weapon[0].ammomax=14;
              break;
            default:
              break;
          }


        // Получить элемент, содержащий текст
        const patrons = document.querySelector(".patrons");
        // Получить элемент <p> с количеством патронов
        const patronskol = patrons.querySelector(".patrons__quantity");

        // Изменить текст количества патронов
        patronskol.textContent = `${player[0].weapon[0].ammo}/${player[0].weapon[0].ammomax}`;

          gunSide.classList.remove("gun-side_right");
        }, 1200);
      }
    }

    i = 0;
    u = 0;
    h = 0;

function shogungame(actNumber) 
{
  const act = acts.find(a => a.number === actNumber);
  if (!act) {
    console.error(`Акт с номером ${actNumber} не найден.`);
    return;
  }


  video.addEventListener("timeupdate", () => {

    const currentTime = video.currentTime;
    console.log(currentTime);
    if (act.number === GlobalActNumber && act.games && currentTime >= act.gamesend[0].TimeEnd) { 
    // Удалить класс у модального окна
    const deathModal = document.querySelector('.death-modal');
    deathModal.classList.remove('death-modal_active');

    // Найти все элементы с классами blood_bottom, blood_center, blood_top
    const bloodBottomElements = document.querySelectorAll('.blood.blood_bottom');
    const bloodCenterElements = document.querySelectorAll('.blood.blood_center');
    const bloodTopElements = document.querySelectorAll('.blood.blood_top');

    // Объединить все найденные элементы в один массив
    const allBloodElements = [...bloodBottomElements, ...bloodCenterElements, ...bloodTopElements];

    // Перебрать объединенный массив элементов и удалить каждый
    allBloodElements.forEach(element => {
        element.remove(); // Можно использовать более короткий метод для удаления
    });
     // переход если конец и все хорошо...
        startGame(act.gamesend[0].goNext);
          return;
    }





    if (i < act.shotgun[0].timeshot.length) 
    {
      const shotgunValues = act.shotgun[0].timeshot[i];
      const vDiopozone = Math.abs(shotgunValues.time - currentTime) <= 0.15;
      if (vDiopozone) 
      {
            video.pause();
            createObject(shotgunValues.time, shotgunValues.friztime, shotgunValues.x, shotgunValues.y);
            i++;
      }
      if (h < act.hotkey.length) {
          const hotkey = act.hotkey[h];
          const vDiopozone = Math.abs(hotkey.time - currentTime) <= 0.15;
              if (vDiopozone) 
              {
                if (!hotkey.keypress){video.pause();}
                hotkeygen(hotkey.time, hotkey.friztime, hotkey.x, hotkey.y, hotkey.key, hotkey.keypress);
                h++;
              }
         }

      let itemg = act.inventar[0];
      const vGRAN = Math.abs(itemg.timeanimate - currentTime) <= 0.15;
      
      console.log(vGRAN);
      if (vGRAN) 
      {
            const element = document.getElementById('f1granata');
            if (element) 
            {
                element.style.display = 'block'; // Устанавливаем display: block
            } else {
                console.error('Element not found');
            } 
      }
    }

    if (u < act.shotgunanimation.length) {
      const animationValues = act.shotgunanimation[u];
      const animategun = Math.abs(animationValues.timeanimate - currentTime) <= 0.25;
      if (animategun) {
        animategunshoot(animategun, animationValues.gun);
        if (u < act.shotgunanimation.length - 1) {
          u++; // Количество анимаций
        }
      }
    }
  });
}


function showChoices(actNumber) {
  const act = acts.find(a => a.number === actNumber);
  if (!act) 
  {
    console.error(`Акт с номером ${actNumber} не найден.`);
    return;
  }


  const choicesContainer = document.getElementById('choices');
  const video = document.getElementById('video');
  const fragment = document.createDocumentFragment();

  // Очистить предыдущие выборы
  choicesContainer.innerHTML = '';
  choicesContainer.style.display = 'flex';

  console.log('Это сообщение появится после старта акта');
  const controlDiv = document.querySelector('.mini-game__control');
  if (controlDiv) controlDiv.style.display = 'none';


  // Генерация кнопок выбора
  act.choices.forEach(choice => {
    const button = document.createElement('button');
    button.textContent = choice.text;
    button.setAttribute('data-direction', choice.direction);
    button.classList.add('button');
    button.style.zIndex = 20;

    button.onclick = () => {
      document.querySelectorAll('.line-wrapper').forEach(wrapper => wrapper.remove());
      choicesContainer.style.display = 'none';

      if (typeof choice.nextAct === 'number') 
      {
        const nextActIndex = choice.nextAct - 1;
        const currentFileName = getFileName(video.src);
        const newFileName     = getFileName(acts[nextActIndex].background);

        if (currentFileName !== newFileName) 
        {
          video.src = acts[nextActIndex].background;
          console.log('Источник видео обновлен.');
        } 
          else 
        {
          console.log('Видео уже использует этот источник.');
        }

        video.currentTime = acts[nextActIndex].time;
        video.play();
        setTimeout(() => {
          video.pause();
          showChoices(choice.nextAct);
        }, acts[nextActIndex].stoptime * 1000);

      } else {
        video.currentTime = choice.steptime;
        video.play();
        setTimeout(() => {
          video.pause();
          startGame(choice.goNext);
        }, choice.stopstep * 1000);
      }
    };

    fragment.appendChild(button);
  });

  // Добавление кнопки с классом 'cyrcle', если она ещё не была добавлена
  if (!document.querySelector('.cyrcle')) {
    const circleButton = document.createElement('button');
    circleButton.setAttribute('id', 'arrow');
    circleButton.classList.add('cyrcle');

    const img = document.createElement('img');
    img.classList.add('cyrcle__image');
    img.src = "./bin/arrow.svg";
    circleButton.appendChild(img);
    fragment.appendChild(circleButton);

    // Создаем 'line-wrapper' и 'line', если они еще не были созданы
    const lineWrapper = document.createElement('div');
    lineWrapper.classList.add('line-wrapper');
    const line = document.createElement('div');
    line.classList.add('line');
    lineWrapper.appendChild(line);
    document.body.appendChild(lineWrapper);

    // Используем setInterval для отслеживания прогресса
    setInterval(trackProgress, 500);
  }

  choicesContainer.appendChild(fragment); // Добавляем элементы в DOM за один раз
  setupEventListeners();
}




 // Функция для установки обработчиков событий
function setupEventListeners() 
{
  const choices = document.getElementById('choices');
  let arrow = document.getElementById('arrow');
  const buttons = document.querySelectorAll('.button');
      // Если элемент #choices существует, выполняем код
      buttons.forEach(button => {
      button.addEventListener('mouseenter', function() 

      {

        const direction = this.getAttribute('data-direction'); console.log(button);
        switch (direction) 
        {
          case 'left-top':
            arrow.style.transition = 'transform 0.5s ease';
            arrow.style.transform = 'translate(-50%, -50%)  rotate(-50deg) ';
            break;
          case 'right-top':
            arrow.style.transition = 'transform 0.5s ease';
            arrow.style.transform = 'translate(-50%, -50%) rotate(50deg) ';
            break;
          case 'left-bot':
            arrow.style.transition = 'transform 0.5s ease';
            arrow.style.transform = ' translate(-50%, -50%) rotate(-130deg)';
            break;
            case 'right-bot':
            arrow.style.transition = 'transform 0.5s ease';
            arrow.style.transform = ' translate(-50%, -50%) rotate(130deg)';
            break;
          case "left-center":
            arrow.style.transition = 'transform 0.5s ease';
            arrow.style.transform = ' translate(-50%, -50%) rotate(-100deg)';
            break;
          case "right-center":
            arrow.style.transition = 'transform 0.5s ease';
            arrow.style.transform = ' translate(-50%, -50%) rotate(100deg)';
            break;
          // Добавьте дополнительные условия здесь, если нужно
          default:
            arrow.style.transform = 'translate(-50%, -50%) rotate(0deg)';
        }
      });
    });
 
}


$(function() {
  $('#nav-start').on('click', function() {
    $el = $(this).parent()
    $('#main > *:not(.main-nav)').addClass('transparent')
    $('.main-nav > li:not(:first-child)').addClass('transparent')
    $el.css({ transform: 'scale(3)' })
    $('#loader-screen').css({ display: 'block' })
    $el.one('transitionend', function() {
      setTimeout(function() {
        $el.css({ left: '100vw' })
        $('#loader-screen')
          .css({ opacity: 1 })
          .one('transitionend', function() {
            $('.loader').css({ bottom: 190 })
            function slepStart() {
                  console.log("Прошло 4 секунды!");
                  startGame(1);
              }
              // Устанавливаем задержку в 2000 миллисекунд (2 секунды)
              setTimeout(slepStart, 4000);
          })
      }, 2000)
    })
  })
})


</script>


</body>
</html>