@LION_svg

Как сделать так, если до окончании таймера пользователь перекрасил/закрасил все path в SVG картинке, остановить таймер и вывести ALERT?

Как сделать так, если до окончании таймера пользователь успел перекрасить/закрасить все fill path в SVG данной картинке, остановить таймер и вывести ALERT с текстом, типа "Вы все закрасили!" и при нажатии на ок! перекинуть его по внутренней ссылке в таблицу с рекордами!
Если есть желание помочь, то можно помочь в написании кода по сохранению в эту таблицу предварительно сопоставив с именем, которое он ввел перед началом игры!
Вот код страницы рисунка
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title></title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

 <div id="play_timer"></div>
	<div class="coloring">
		<div class="coloring-toolbox">
			<div class="palette">
			</div>
		</div>
		<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>
		<script src="script.js">
		</script>
</body>

</html>

/*таймер игры*/
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);

//back_btn.onclick = e => document.execCommand('undo');

#play_timer {
  display: flex;
  position: fixed;
  right: 0;
  margin-right: 15px;
  margin-top: 15px;
  font-family: Comfortaa;
  font-size: unset;
  color: red;
}
.coloring {
  display: flex;
  flex-wrap: wrap;
}

.coloring-toolbox {
  flex: 1 1 0;
}

.palette {
  display: flex;
  flex-wrap: wrap;
}

.palette-button {
  width: 70px;
  height: 110px;
  margin: 5px;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: 0.5s linear;
}
.palette-button:hover {
  filter: drop-shadow( 0px 5px 2px rgb(54, 54, 54));
  transform: scale(1.1);
  border: none;
}
.palette-button-active {
  filter: drop-shadow( 0px 5px 2px rgb(54, 54, 54));
  transform: scale(1.2);
  border: none;
}

.palette-button-active {
  border-color: #000;
}

.coloring-image {
  flex: 3 1 0;
  width: 500px;
  height: auto;
  border: 5px dashed #ddd;
}

.coloring-image > svg {
  max-width: 100%;
}

.selected {
  opacity: 0.8;
  cursor: pointer;
}

path {
  stroke: black;
  stroke-width: 1;
  stroke-linejoin: round;
}
  • Вопрос задан
  • 92 просмотра
Пригласить эксперта
Ответы на вопрос 1
@MrDecoy
Верставший фронтендер
1) Сохранять id таймера в соответствующем замыкании. Ну или хотя бы в глобале.
то есть window.gameTimer = setTimeout()... Можете возвращать id таймера из функциие timer().

2) Добавить для всех необходимых элементов, которые пользователь должен закрасить структуру данных.
Например:
{
element: state
}
где element - ключ, который однозначно определяет элемент(уникальное значение дата атрибута, например(
а state - значение. Например, 0 - не закрашено, 1 - закрашено.

3) По факту клика на элемент(рекомендую через деллигирование) проверять что все элементы имеют состояние 1. И есть это истинно, то обнулять таймер через clearTimeout и перенаправлять на страницу результата или что там ещё Вам нужно.

4) Profit.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
26 мая 2020, в 02:01
4500 руб./за проект
26 мая 2020, в 00:42
10000 руб./за проект
25 мая 2020, в 22:16
3000 руб./за проект