Как по окончанию окрашивания всего SVG. остановить таймер на странице?

Question

LION_svg @LION_svg

Как по окончанию окрашивания всего SVG. остановить таймер на странице?

Есть некая раскраска Svg. так же таймер, который запустился на этой странице при открытии (обратный отсчет) .При окончании раскраски всего SVG(а так же таймер если отсчитал) должно всплывать окно "игра окончена" и перекидывать пользователя по адресу с рекордами.
JS только начал изучать, поэтому не справляюсь пока.
Спасибо за помощь!

Вопрос задан более трёх лет назад
70 просмотров

Комментировать

Подписаться 1 Средний Комментировать

Пригласить эксперта

Ответы на вопрос 1

6 комментариев

LION_svg @LION_svg Автор вопроса

Не совсем то, но отчасти. Нужно так же завязаться с окончанием окраски всех path SVG, должна подгрузиться та же модалка с переходом на необходимый адрес!!

Написано более трёх лет назад
Артур @arturka_v_10

LION_svg, ну так не переменных не части кода предоставлено не было. Я описал пример (обновил его). Дальше просто свяжи и осознай, как применимо это к твоему коду.

Написано более трёх лет назад

LION_svg @LION_svg Автор вопроса

<body>
    <div id="play_timer"></div>
    <div id="turtle_paint"></div>
      <div class="draw_box">
        <div class="part_box"></div>
        <div class="part_box">
          <div class="svg_paint">
            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="276px" height="325px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 640 754" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="turtle_all">
                <path class="fil0 str0" d="M353 659c0,0 -10,36 11,48 19,12 21,24 10,43 0,0 25,-29 3,-44 -19,-13 -16,-33 -10,-42 7,-9 -14,-5 -14,-5z"/>
                <path class="fil0 str0" d="M90 232c-11,3 -20,-3 -29,-17 0,0 11,25 28,25 0,0 1,-1 1,-1 2,-1 2,-4 0,-7z"/>
                <path class="fil0 str0" d="M192 2c-100,-15 -183,87 -164,180 0,0 75,47 62,57 -16,12 -36,6 -22,22 12,14 43,30 82,36 41,-71 115,-120 201,-126 -7,-69 -41,-152 -159,-169zm-89 103c-8,22 -20,37 -28,34 -7,-3 -7,-24 1,-46 7,-21 20,-37 27,-34 8,4 8,24 0,46z"/>
                <path class="fil0 str0" d="M144 309c-33,-13 -55,-12 -59,-16 -11,-10 -27,-38 -55,-43 -2,6 -3,11 -3,17 -3,-2 -6,-1 -11,-1 -2,3 -2,12 -3,16 -3,-1 -7,-1 -12,-1 -4,42 18,65 22,70 8,9 23,21 52,9 13,-2 28,10 45,26 4,-28 12,-54 24,-77z"/>
                <path class="fil0 str0" d="M538 605c11,16 17,29 22,28 15,-2 44,-18 72,-6 -2,6 -4,11 -8,16 4,1 6,3 11,6 -1,4 -5,12 -7,16 3,1 7,3 11,6 -18,47 -79,69 -85,72 -19,8 -65,23 -73,-25 -3,-30 -13,-48 -28,-61 32,-11 61,-29 85,-52z"/>
                <path class="fil0 str0" d="M136 517c-23,6 -40,16 -44,12 -10,-11 -24,-41 -53,-48 -3,5 -4,10 -4,17 -4,-2 -7,-2 -12,-2 -2,3 -3,12 -4,17 -3,-1 -8,-2 -13,-2 -14,48 21,103 24,108 11,19 38,58 73,25 44,-47 84,-33 127,-11 3,1 5,2 7,2 -45,-27 -81,-69 -101,-118z"/>
                <path class="fil0 str0" d="M619 421c0,139 -113,251 -251,251 -2,0 -3,0 -5,0 1,-3 3,-6 4,-8 7,-9 -14,-5 -14,-5 0,0 -1,6 -2,13 -131,-9 -234,-118 -234,-251 0,-138 112,-250 251,-250 138,0 251,112 251,250zm-24 23c0,79 24,-22 0,0zm-6 1l-68 -40 -67 39 0 79 67 39c17,-10 33,-19 49,-28 6,-8 26,-50 19,-89zm-65 122l0 20c-4,0 90,-83 0,-20zm-141 73c-3,11 133,-37 135,-48l0 -25 -67 -39 -68 39 0 73zm184 -349c-27,-41 -114,-90 -114,-90l0 77 68 39 46 -26zm-189 -102c-15,0 -62,9 -66,11l0 78 68 39 67 -39 0 -78c-1,-1 -62,-11 -69,-11zm-188 100l49 28 67 -39 0 -78c-14,-7 -130,82 -116,89zm46 33c-5,-2 -49,-28 -49,-28 -22,35 -34,76 -34,120 0,23 -2,16 15,26l68 -39 0 -79zm-82 116c0,0 12,53 12,52l0 -45 -12 -7zm17 6c0,91 4,81 68,118l68 -39 0 -78 -68 -40 -68 39zm19 94l0 0c11,18 46,52 46,52l0 -23 -44 -26c-1,-1 -2,-1 -2,-3zm52 56c-10,8 124,55 135,46l0 -73 -67 -39 -68 39 0 27zm0 -193l68 39 67 -39 0 -79 -68 -39 -67 39 0 79zm206 122l0 -78 -68 -40 -68 39 0 79 68 39 68 -39 0 0zm-65 -122l68 39 67 -39 0 -79 -68 -39 -67 39 0 79 0 0zm221 13c0,-41 -34,-119 -34,-118l-46 26 0 79 68 39c15,-9 12,-3 12,-26z"/>
                <path class="fil0 str0" d="M595 444c0,79 24,-22 0,0z"/>
                <path class="fil0 str0" d="M589 445l-68 -40 -67 39 0 79 67 39c17,-10 33,-19 49,-28 6,-8 26,-50 19,-89z"/>
                <path class="fil0 str0" d="M524 567l0 20c-4,0 90,-83 0,-20z"/>
                <path class="fil0 str0" d="M383 640c-3,11 133,-37 135,-48l0 -25 -67 -39 -68 39 0 73z"/>
                <path class="fil0 str0" d="M567 291c-27,-41 -114,-90 -114,-90l0 77 68 39 46 -26z"/>
                <path class="fil0 str0" d="M378 189c-15,0 -62,9 -66,11l0 78 68 39 67 -39 0 -78c-1,-1 -62,-11 -69,-11z"/>
                <path class="fil0 str0" d="M190 289l49 28 67 -39 0 -78c-14,-7 -130,82 -116,89z"/>
                <path class="fil0 str0" d="M236 322c-5,-2 -49,-28 -49,-28 -22,35 -34,76 -34,120 0,23 -2,16 15,26l68 -39 0 -79z"/>
                <path class="fil0 str0" d="M154 438c0,0 12,53 12,52l0 -45 -12 -7z"/>
                <path class="fil0 str0" d="M171 444c0,91 4,81 68,118l68 -39 0 -78 -68 -40 -68 39z"/>
                <path class="fil0 str0" d="M190 538l0 0c11,18 46,52 46,52l0 -23 -44 -26c-1,-1 -2,-1 -2,-3z"/>
                <path class="fil0 str0" d="M242 594c-10,8 124,55 135,46l0 -73 -67 -39 -68 39 0 27z"/>
                <path class="fil0 str0" points="242,401 310,440 377,401 377,322 309,283 242,322 "/>
                <path class="fil0 str0" points="448,523 448,445 380,405 312,444 312,523 380,562 448,523 "/>
                <path class="fil0 str0" points="383,401 451,440 518,401 518,322 450,283 383,322 383,401 "/>
                <path class="fil0 str0" d="M604 414c0,-41 -34,-119 -34,-118l-46 26 0 79 68 39c15,-9 12,-3 12,-26z"/>
                <path class="fil1" d="M103 108c-7,22 -20,37 -28,34 -8,-4 -9,-24 -1,-47 0,-1 0,-1 1,-2 -7,21 -6,40 2,43 7,3 19,-9 26,-28z"/>
                <path class="fil0 str0" d="M96 102c-4,10 -10,17 -13,16 -4,-2 -4,-11 0,-22 4,-10 9,-17 13,-16 4,2 4,11 0,22z"/>
                <path class="fil0 str0" d="M96 102c-4,10 -10,17 -13,16 -4,-2 -4,-11 0,-22 4,-10 9,-17 13,-16 4,2 4,11 0,22z"/>
              </g>
            </svg>
          </div>
        </div>
        <div class="part_box">
          <div id="paint" style="background-image: url(Pic/pencil_red.png)";></div>
          <div id="paint" style="background-image: url(Pic/pencil_orange.png)";></div>
          <div id="paint" style="background-image: url(Pic/pencil_yellow.png)";></div>
          <div id="paint" style="background-image: url(Pic/pencil_green.png)";></div>
          <div id="paint" style="background-image: url(Pic/pencil_blue.png)";></div>
          <div id="paint" style="background-image: url(Pic/pencil_dark_blue.png)";></div>
          <div id="paint" style="background-image: url(Pic/pencil_purple.png)";></div>
        </div>
        <div class="part_box">
          <div class="part_icon">
            <input type="image" id="home" onmousedown="soundCryOnClick()" src="Icon/home.png" title="Вернуться на главную" onClick='location.href="index.html"'/>
            <input type="image" id="back" onmousedown="soundCryOnClick()" src="Icon/back.png" title="Шаг назад" onClick='location.href="#"'/>
            <input type="image" id="rev" onmousedown="soundCryOnClick()" src="Icon/revers.png" title="Начать заново" onClick='window.location.href=window.location.href'/>
          </div>
        </div>
      </div>
    <script src="script.js"></script>
    <script src="modal.js"></script>
  </body>

Написано более трёх лет назад

Артур @arturka_v_10

LION_svg, ну так а сам script.js то, какая в нем логика, что определяется в нем и как проверяется. Как таймер задан. Это в вопросе следовало прикрепить, чтобы пример описать по твоим переменным.

Написано более трёх лет назад

LION_svg @LION_svg Автор вопроса

А вот сам таймер:

unction timer(elem, min, sec) {
  (--sec < 0) && (sec = min-- ? 59 : 0);
  min = Math.max(min, 0);
  elem.innerHTML = min + ":" + sec;
  if (sec || min)
    setTimeout(timer.bind(0, elem, min, sec), 1000);
}
// ну и собственно пример вызова этого чуда
timer(document.getElementById('play_timer'), 5, 0);

Написано более трёх лет назад

LION_svg @LION_svg Автор вопроса

Артур, Прошу помощи.....плиз) реализовать до конца..
нужно, как и писал - остановить игру если все fill не исходные(то есть поменяли цвет) и вывести алерт. думал может кнопку создать, при нажатии которой проверка пойдет?????
код страницы с раскраской....

<body>
	<div id="play_timer"></div>
	<div id="turtle_paint"></div>
	<div class="draw_box">
		<div class="part_box"></div>
		<div class="part_box">
			<div class="coloring">
				<div class="coloring-image">
					<svg id="svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="640px" version="1.1" viewBox="0 0 640 754">
						<path d="M353 659c0,0 -10,36 11,48 19,12 21,24 10,43 0,0 25,-29 3,-44 -19,-13 -16,-33 -10,-42 7,-9 -14,-5 -14,-5z" fill="#ffffff"
						/>
						<path d="M90 232c-11,3 -20,-3 -29,-17 0,0 11,25 28,25 0,0 1,-1 1,-1 2,-1 2,-4 0,-7z" fill="#ffffff" />
						<path d="M192 2c-100,-15 -183,87 -164,180 0,0 75,47 62,57 -16,12 -36,6 -22,22 12,14 43,30 82,36 41,-71 115,-120 201,-126 -7,-69 -41,-152 -159,-169zm-89 103c-8,22 -20,37 -28,34 -7,-3 -7,-24 1,-46 7,-21 20,-37 27,-34 8,4 8,24 0,46z"
						 fill="#ffffff" />
						<path d="M144 309c-33,-13 -55,-12 -59,-16 -11,-10 -27,-38 -55,-43 -2,6 -3,11 -3,17 -3,-2 -6,-1 -11,-1 -2,3 -2,12 -3,16 -3,-1 -7,-1 -12,-1 -4,42 18,65 22,70 8,9 23,21 52,9 13,-2 28,10 45,26 4,-28 12,-54 24,-77z"
						 fill="#ffffff" />
						<path d="M538 605c11,16 17,29 22,28 15,-2 44,-18 72,-6 -2,6 -4,11 -8,16 4,1 6,3 11,6 -1,4 -5,12 -7,16 3,1 7,3 11,6 -18,47 -79,69 -85,72 -19,8 -65,23 -73,-25 -3,-30 -13,-48 -28,-61 32,-11 61,-29 85,-52z"
						 fill="#ffffff" />
						<path d="M136 517c-23,6 -40,16 -44,12 -10,-11 -24,-41 -53,-48 -3,5 -4,10 -4,17 -4,-2 -7,-2 -12,-2 -2,3 -3,12 -4,17 -3,-1 -8,-2 -13,-2 -14,48 21,103 24,108 11,19 38,58 73,25 44,-47 84,-33 127,-11 3,1 5,2 7,2 -45,-27 -81,-69 -101,-118z"
						 fill="#ffffff" />
						<path d="M619 421c0,139 -113,251 -251,251 -2,0 -3,0 -5,0 1,-3 3,-6 4,-8 7,-9 -14,-5 -14,-5 0,0 -1,6 -2,13 -131,-9 -234,-118 -234,-251 0,-138 112,-250 251,-250 138,0 251,112 251,250zm-24 23c0,79 24,-22 0,0zm-6 1l-68 -40 -67 39 0 79 67 39c17,-10 33,-19 49,-28 6,-8 26,-50 19,-89zm-65 122l0 20c-4,0 90,-83 0,-20zm-141 73c-3,11 133,-37 135,-48l0 -25 -67 -39 -68 39 0 73zm184 -349c-27,-41 -114,-90 -114,-90l0 77 68 39 46 -26zm-189 -102c-15,0 -62,9 -66,11l0 78 68 39 67 -39 0 -78c-1,-1 -62,-11 -69,-11zm-188 100l49 28 67 -39 0 -78c-14,-7 -130,82 -116,89zm46 33c-5,-2 -49,-28 -49,-28 -22,35 -34,76 -34,120 0,23 -2,16 15,26l68 -39 0 -79zm-82 116c0,0 12,53 12,52l0 -45 -12 -7zm17 6c0,91 4,81 68,118l68 -39 0 -78 -68 -40 -68 39zm19 94l0 0c11,18 46,52 46,52l0 -23 -44 -26c-1,-1 -2,-1 -2,-3zm52 56c-10,8 124,55 135,46l0 -73 -67 -39 -68 39 0 27zm0 -193l68 39 67 -39 0 -79 -68 -39 -67 39 0 79zm206 122l0 -78 -68 -40 -68 39 0 79 68 39 68 -39 0 0zm-65 -122l68 39 67 -39 0 -79 -68 -39 -67 39 0 79 0 0zm221 13c0,-41 -34,-119 -34,-118l-46 26 0 79 68 39c15,-9 12,-3 12,-26z"
						 fill="#ffffff" />
						<path d="M595 444c0,79 24,-22 0,0z" fill="#ffffff" />
						<path d="M589 445l-68 -40 -67 39 0 79 67 39c17,-10 33,-19 49,-28 6,-8 26,-50 19,-89z" fill="#ffffff" />
						<path d="M524 567l0 20c-4,0 90,-83 0,-20z" fill="#ffffff" />
						<path d="M383 640c-3,11 133,-37 135,-48l0 -25 -67 -39 -68 39 0 73z" fill="#ffffff" />
						<path d="M567 291c-27,-41 -114,-90 -114,-90l0 77 68 39 46 -26z" fill="#ffffff" />
						<path d="M378 189c-15,0 -62,9 -66,11l0 78 68 39 67 -39 0 -78c-1,-1 -62,-11 -69,-11z" fill="#ffffff" />
						<path d="M190 289l49 28 67 -39 0 -78c-14,-7 -130,82 -116,89z" fill="#ffffff" />
						<path d="M236 322c-5,-2 -49,-28 -49,-28 -22,35 -34,76 -34,120 0,23 -2,16 15,26l68 -39 0 -79z" fill="#ffffff" />
						<path d="M154 438c0,0 12,53 12,52l0 -45 -12 -7z" fill="#ffffff" />
						<path d="M171 444c0,91 4,81 68,118l68 -39 0 -78 -68 -40 -68 39z" fill="#ffffff" />
						<path d="M190 538l0 0c11,18 46,52 46,52l0 -23 -44 -26c-1,-1 -2,-1 -2,-3z" fill="#ffffff" />
						<path d="M242 594c-10,8 124,55 135,46l0 -73 -67 -39 -68 39 0 27z" fill="#ffffff" />
						<path d="M242,401 310,440 377,401 377,322 309,283 242,322z " fill="#ffffff" />
						<path d="M448,523 448,445 380,405 312,444 312,523 380,562 448,523z " fill="#ffffff" />
						<path d="M383,401 451,440 518,401 518,322 450,283 383,322 383,401z " fill="#ffffff" />
						<path d="M604 414c0,-41 -34,-119 -34,-118l-46 26 0 79 68 39c15,-9 12,-3 12,-26z" fill="#ffffff" />
						<path d="M103 108c-7,22 -20,37 -28,34 -8,-4 -9,-24 -1,-47 0,-1 0,-1 1,-2 -7,21 -6,40 2,43 7,3 19,-9 26,-28z" fill="#ffffff"
						/>
						<path d="M96 102c-4,10 -10,17 -13,16 -4,-2 -4,-11 0,-22 4,-10 9,-17 13,-16 4,2 4,11 0,22z" fill="#ffffff" />
						<path d="M96 102c-4,10 -10,17 -13,16 -4,-2 -4,-11 0,-22 4,-10 9,-17 13,-16 4,2 4,11 0,22z" fill="#ffffff" />
					</svg>
				</div>
			</div>
      <div class="coloring-toolbox">
					<div class="palette">
					</div>
				</div>
		</div>
			<div class="part_box">
				<div class="part_icon">
					<input type="image" id="home" onmousedown="soundCryOnClick()" src="Icon/home.png" title="Вернуться на главную" onClick='location.href="index.html"'/>
            <input type="image" id="back_btn" onmousedown="soundCryOnClick()" src="Icon/back.png" title="Шаг назад"/>
            <input type="image" id="rev" onmousedown="soundCryOnClick()" src="Icon/revers.png" title="Начать заново" onClick='location.reload()'/>
          </div>
        </div>
    </div>
    <script src="timer.js"></script>
    <script src="svg.js"></script>
  </body>

код JS - таймера и самого процесса рисования

/*таймер игры*/
function timer(elem, min, sec) {
  (--sec < 0) && (sec = min-- ? 59 : 0);
  min = Math.max(min, 0);
  elem.innerHTML = min + ":" + sec;
  if (sec || min)
    setTimeout(timer.bind(0, elem, min, sec), 1000);
  else {
  alert( 'Время вышло!' ); 
  location.href = "/rekord.html";}
}

// ну и собственно пример вызова этого чуда
timer(document.getElementById('play_timer'), 3, 0);

const colors = [
  { color: '#ff0000', image: 'Pic/pencil_red.png' },
  { color: '#ffa500', image: 'Pic/pencil_orange.png' },
  { color: '#ffff00', image: 'Pic/pencil_yellow.png' },
  { color: '#008000', image: 'Pic/pencil_green.png' },
  { color: '#0000ff', image: 'Pic/pencil_blue.png' },
  { color: '#00008b', image: 'Pic/pencil_dark_blue.png' },
  { color: '#800080', image: 'Pic/pencil_purple.png' },
];
function renderColorPalette () {
  const paletteContainer = document.querySelector(".palette");
  const colorsItems = colors
  .map(n => `
    <button
      style="background-image: url(${n.image})"
      class="palette-button"
      data-color="${n.color}"
    ></button>`)
  .join('');
  paletteContainer.innerHTML = colorsItems;
}

function handleClickOnColor (event) {
  const button = event.target.closest(".palette-button");
  if (!button) return;
    const oldActiveButton = document.querySelector(".palette-button-active");
  if (oldActiveButton) {
    oldActiveButton.classList.remove("palette-button-active");
  }
  button.classList.add("palette-button-active");
}

function setEventsOnFilledElements () {
  function handleMouseEnter () {
    this.classList.add("selected");
  }
  function handleMouseLeave () {
    this.classList.remove("selected");
  }
  function handleClick () {
    const currentColor = document.querySelector(".palette-button-active");
    if (!currentColor) {
      alert("Цвет не выбран");
      return;
    }
    this.style.fill = currentColor.dataset.color;
  }
  const elements = document.querySelectorAll("*[fill]");
  elements.forEach(element => {
    element.addEventListener("mouseenter", handleMouseEnter);
    element.addEventListener("mouseleave", handleMouseLeave);
    element.addEventListener("click", handleClick);
  });
} 

document.addEventListener("DOMContentLoaded", renderColorPalette);
document.addEventListener("click", handleClickOnColor);
document.addEventListener("DOMContentLoaded", setEventsOnFilledElements);

Написано более трёх лет назад

Ваш ответ на вопрос