Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как подключить или просто кодам написать следующий таймер? (https://javascript.ru/forum/jquery/79899-kak-podklyuchit-ili-prosto-kodam-napisat-sleduyushhijj-tajjmer.html)

Pavel_16 05.04.2020 13:14

Как подключить или просто кодам написать следующий таймер?
 
Есть таймер
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);

//Время в игре

function tick() {
  var nowTime = new Date();
  console.log('прошло секунд: ' + (nowTime + timer) / 1000);


А вот нашел таймер который записывает данный в локал стореч(на основе стандартных JQuery )
var interval;
let minutes = 1;
let currentTime = localStorage.getItem('currentTime');
let targetTime = localStorage.getItem('targetTime');
if (targetTime == null && currentTime == null) {
     currentTime = new Date();
     targetTime = new Date(currentTime.getTime() + (minutes * 60000));
     localStorage.setItem('currentTime', currentTime);
     localStorage.setItem('targetTime', targetTime);
}
else{
     currentTime = new Date(currentTime);
     targetTime = new Date(targetTime);
}

if(!checkComplete()){
     interval = setInterval(checkComplete, 1000);
}

function checkComplete() {
     if (currentTime > targetTime) {
       clearInterval(interval);
       alert("Time is up");
     } else {
       currentTime = new Date();
       document.write(
        "\n <font color=\"white\"> Seconds Remaining:" + ((targetTime - currentTime) / 1000) + "</font>");
     }
}

document.onbeforeunload = function(){
     localStorage.setItem('currentTime', currentTime);
}

Подскажите, как переделать, так что бы он работал без подключения просто на JS.

рони 05.04.2020 13:23

Pavel_16,
:-?

Pavel_16 05.04.2020 13:40

Цитата:

Сообщение от рони (Сообщение 522242)
Pavel_16,
:-?

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

рони 05.04.2020 14:13

Pavel_16,
я не понимаю, что вы пишите, в чём проблема?

рони 05.04.2020 14:24

Pavel_16,
if ([...elements].every(ep => ep.getAttribute('fill') != '#ffffff')) {
      tick();
      let time = document.getElementById('play_timer').innerHTML;
      // здесь сохраняйте куда вам нужно
      setTimeout(() => alert('Вы всё закрасили!'));
      /*location.href = "/rekord.html";*/
    }

Pavel_16 05.04.2020 16:01

Цитата:

Сообщение от рони (Сообщение 522248)
Pavel_16,
if ([...elements].every(ep => ep.getAttribute('fill') != '#ffffff')) {
      tick();
      let time = document.getElementById('play_timer').innerHTML;
      // здесь сохраняйте куда вам нужно
      setTimeout(() => alert('Вы всё закрасили!'));
      /*location.href = "/rekord.html";*/
    }

Цитата:

Сообщение от рони
// здесь сохраняйте куда вам нужно

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

"use strict";

$(document).ready(function(){

if (localStorage.getItem("users") === null) {
  $.getJSON('Storage/users.json', function(users) {
    localStorage.setItem("users", JSON.stringify(users));
  });
}

var users = localStorage.getItem("users");

var $select = $('#name');  
$select.ready(function(event){ 
    $.each(JSON.parse(users), function (key, value) {
      $('<option>').val(value.name).text(value.name).appendTo($select);
    });
});

$('#play_game').click(function() {
  var userName = $('#new_name').val();
  var newUser = {name:userName};
  users = JSON.parse(users);
  users.push(newUser);
  console.log(users);
  localStorage.setItem("users", JSON.stringify(users));
});
});

рони 05.04.2020 16:15

Pavel_16,
надо обьединять скрипты, чтоб имя было доступно в игре ...
как то так ...
if ([...elements].every(ep => ep.getAttribute('fill') != '#ffffff')) {
      tick();
      let time = document.getElementById('play_timer').innerHTML;
      newUser.time = time;
      localStorage.setItem("users", JSON.stringify(users));
      // здесь вывод таблицы на основе обьекта users
      setTimeout(() => alert('Вы всё закрасили!'));
      /*location.href = "/rekord.html";*/
    }

Pavel_16 05.04.2020 20:55

Цитата:

Сообщение от рони (Сообщение 522252)
Pavel_16,
надо обьединять скрипты, чтоб имя было доступно в игре ...
как то так ...
if ([...elements].every(ep => ep.getAttribute('fill') != '#ffffff')) {
      tick();
      let time = document.getElementById('play_timer').innerHTML;
      newUser.time = time;
      localStorage.setItem("users", JSON.stringify(users));
      // здесь вывод таблицы на основе обьекта users
      setTimeout(() => alert('Вы всё закрасили!'));
      /*location.href = "/rekord.html";*/
    }

не работает, вот что выдаёт
svg.js:54 Uncaught ReferenceError: newUser is not defined
at SVGPathElement.handleClick (svg.js:54)
handleClick @ svg.js:54
+ до это-го прошло секунд: NaN

рони 05.04.2020 21:05

Цитата:

Сообщение от Pavel_16
не работает,

Цитата:

Сообщение от рони
надо обьединять скрипты, чтоб имя было доступно в игре ...

:(

рони 05.04.2020 21:07

Pavel_16,
var userName и var newUser нужно сделать глобальными

рони 05.04.2020 23:01

Pavel_16,
на странице(блоке) приветствия нужно сохранить только имя,
на странице(блоке) игры только время,
на странице(блоке) рекордов запросить данные с рекордами и после получения добавить в них имя и время , потом вывести таблицу.
как - то так.

Pavel_16 05.04.2020 23:09

Цитата:

Сообщение от рони (Сообщение 522290)
Pavel_16,
на странице(блоке) приветствия нужно сохранить только имя

но оно вроди так и есть, :no:

$(document).ready(function(){

if (localStorage.getItem("users") === null) {
  $.getJSON('Storage/users.json', function(users) {
    localStorage.setItem("users", JSON.stringify(users));
  });
}

var users = localStorage.getItem("users");

var $select = $('#name');  
$select.ready(function(event){ 
    $.each(JSON.parse(users), function (key, value) {
      $('<option>').val(value.name).text(value.name).appendTo($select);
    });
});

$('#play_game').click(function() {
  var userName = $('#new_name').val();
  var newUser = {name:userName};
  users = JSON.parse(users);
  users.push(newUser);
  console.log(users);
  localStorage.setItem("users", JSON.stringify(users));
});
});

Pavel_16 05.04.2020 23:11

Цитата:

Сообщение от рони (Сообщение 522290)
Pavel_16,
на странице(блоке) игры только время,

const save = { elem: this, color: this.getAttribute("fill") };
    stateStack.push(save);
    this.setAttribute("fill", currentColor.dataset.color);
    if ([...elements].every(ep => ep.getAttribute('fill') != '#ffffff')) {
      tick();
      let time = document.getElementById('play_timer').innerHTML;
      newUser.time = time;
      localStorage.setItem("users", JSON.stringify(users));
      setTimeout(() => alert('Вы всё закрасили!'));
      *location.href = "/rekord.html";
    }

рони 05.04.2020 23:34

Pavel_16,
приветствие
let userName = document.getElementById('new_name').value;
 localStorage.setItem("userName", userName)

игра
let time = document.getElementById('play_timer').innerHTML;
;
 localStorage.setItem("time ", time)

рекорды
if (localStorage.getItem("users") === null) {
  $.getJSON('Storage/users.json', function(users) {
    localStorage.setItem("users", JSON.stringify(users));
  });
}

let users = localStorage.getItem("users");
let userName  = localStorage.getItem("userName");
let time = localStorage.getItem("userName");
users.push({userName, time});

Pavel_16 05.04.2020 23:51

Цитата:

Сообщение от рони (Сообщение 522294)
Pavel_16,
приветствие
let userName = document.getElementById('new_name').value;
 localStorage.setItem("userName", userName)

игра
let time = document.getElementById('play_timer').innerHTML;
;
 localStorage.setItem("time ", time)

рекорды
if (localStorage.getItem("users") === null) {
  $.getJSON('Storage/users.json', function(users) {
    localStorage.setItem("users", JSON.stringify(users));
  });
}

let users = localStorage.getItem("users");
let userName  = localStorage.getItem("userName");
let time = localStorage.getItem("userName");
users.push({userName, time});

Поступило предложение (localStorage.getItem("users") === null)
===null - не совсем, на пустую строку еще

И мне нужно хранить массив имен
нужно добавить еще наверное:
Каррент-юзер тогда для нового юзера, и ещё раз - объект имя+время
{name:name, time:time}
?????
как думаешь?

рони 06.04.2020 00:02

Pavel_16,
для начала можно так
рекорды
if (localStorage.getItem("users") === null) {
    localStorage.setItem("users", JSON.stringify([]));
}

let users = JSON.parse(localStorage.getItem("users"));
let userName  = localStorage.getItem("userName");
let time = localStorage.getItem("time")
users.push({userName, time});
localStorage.setItem("users", JSON.stringify(users));
for (const item of users) console.log(item);

Pavel_16 06.04.2020 00:06

[quote=рони;522296]Pavel_16,
для начала можно так



а чего для начала???:)

рони 06.04.2020 00:10

Pavel_16,
для отработки игры без сервера, к вашему получению данных с сервера есть вопросы, вы не учитываите время ответа сервера.

Pavel_16 06.04.2020 00:12

Цитата:

Сообщение от рони (Сообщение 522298)
Pavel_16,
для отработки игры без сервера, к вашему получению данных с сервера есть вопросы, вы не учитываите время ответа сервера.

это да, не учитываю:yes:
:agree:
а сервер, то.....:blink:

Pavel_16 06.04.2020 00:17

Цитата:

Сообщение от рони (Сообщение 522298)
Pavel_16,
для отработки игры без сервера, к вашему получению данных с сервера есть вопросы, вы не учитываите время ответа сервера.

ПО ИТОГУ
ПОЛУЧАЕТСЯ ТАК:
$(document).ready(function () {

  if (localStorage.getItem("users") === null) {
    localStorage.setItem("users", JSON.stringify([]));
  }

  let users = JSON.parse(localStorage.getItem("users"));
  let userName = localStorage.getItem("userName");
  let time = localStorage.getItem("time")
  users.push({ userName, time });
  localStorage.setItem("users", JSON.stringify(users));
  for (const item of users) console.log(item);

  var $select = $('#name');
  $select.ready(function (event) {
    $.each(JSON.parse(users), function (key, value) {
      $('<option>').val(value.name).text(value.name).appendTo($select);
    });
  });

  $('#play_game').click(function () {
    var userName = $('#new_name').val();
    var newUser = { name: userName };
    users = JSON.parse(users);
    users.push(newUser);
    console.log(users);
    localStorage.setItem("users", JSON.stringify(users));
  });
});

:write:

Только куда прикрутить вот это не понял:?!
let userName = document.getElementById('new_name').value;
 localStorage.setItem("userName", userName)


а наверное с 22-

Pavel_16 06.04.2020 01:06

Цитата:

Сообщение от рони (Сообщение 522298)
Pavel_16

что за хрень в консоли,ошибка

{ userName: null, time: null }
jQuery.Deferred exception: Unexpected token o in JSON at position 1 SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at HTMLDocument.<anonymous> ([url]https://fd2projectcoloring--pavelmishyn.repl.co/userHandler.js:18:17[/url])
    at mightThrow ([url]https://fe.it-academy.by/JQ/jquery.js:3570:29[/url])
    at process ([url]https://fe.it-academy.by/JQ/jquery.js:3638:12[/url]) undefined
Script error.

рони 06.04.2020 01:26

Pavel_16,
страница приветствия.
<!DOCTYPE html>
<html>
<head>
  <title>страница приветствия</title>
  <meta charset="utf-8">
<script>
document.addEventListener("DOMContentLoaded", function() {
    let user = localStorage.getItem("userName");
    let title = user ? `Привет ${user}!` : `Введите своё имя.`;
    let h1 = document.querySelector("h1");
    h1.textContent = title;
    let newname = document.querySelector("[name='newname']");
    newname.hidden = !user;
    let username = document.querySelector("[name='username']");
    username.hidden = user;
    user && (username.value = user);
    let form = document.querySelector("form");
    form.addEventListener("click", event => {
        let {target} = event;
        let txt = username.value.trim();
        if (target == newname) {
            localStorage.removeItem('userName');
            form.action = ""
        } else if (txt) {
            localStorage.setItem("userName", txt);
            form.action = "https://javascript.ru/forum/"//переход на страницу игры
        } else event.preventDefault()
    })
});
</script>
</head>
<body>
<h1></h1>
<form action="http://" >
<input name="username" hidden="hidden" required="required">
<input name="newname" type="submit" value="Новый игрок" hidden="hidden">
<input name="next" type="submit" value="Далее">
</form>

</body>
</html>

Pavel_16 06.04.2020 12:45

спасибо!

Pavel_16 06.04.2020 12:53

Рони - что-то не так пошло!!,,,,,???:(

По итогу:
приветствие
document.addEventListener("DOMContentLoaded", function () {
  let user = localStorage.getItem("userName");
  let title = user ? `Привет ${user}!` : `Введите своё имя.`;
  let h1 = document.querySelector("h1");
  h1.textContent = title;
  let newname = document.querySelector("[name='newname']");
  newname.hidden = !user;
  let username = document.querySelector("[name='username']");
  username.hidden = user;
  user && (username.value = user);
  let form = document.querySelector("form");
  form.addEventListener("click", event => {
    let { target } = event;
    let txt = username.value.trim();
    if (target == newname) {
      localStorage.removeItem('userName');
      form.action = ""
    } else if (txt) {
      localStorage.setItem("userName", txt);
      form.action = 'play.html'//переход на страницу игры
    } else event.preventDefault()
  })
});


игра -тут проблема вылетили карандаши......
"use strict";

//Работа с цветам
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");
  }
  const elements = document.querySelectorAll("*[fill]");
  function handleClick() {
    const currentColor = document.querySelector(".palette-button-active");
    if (!currentColor) {
      alert("Цвет не выбран");
      return;
    }
    const save = { elem: this, color: this.getAttribute("fill") };
    stateStack.push(save);
    this.setAttribute("fill", currentColor.dataset.color);
    if ([...elements].every(ep => ep.getAttribute('fill') != '#ffffff')) {
      tick();
      let time = document.getElementById('play_timer').innerHTML;
      localStorage.setItem("time ", time);
      setTimeout(() => alert('Вы всё закрасили!'));
      * location.href = "/rekord.html";
    }
  }
  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);
function check() {
  const { length } = [...document.querySelectorAll("*[fill]")].filter(ep => ep.getAttribute('fill') == '#ffffff');
  const txt = length ? `Ещё ${length} фигур не закрашено` : 'Вы всё закрасили!'
  alert(txt)
}
const stateStack = []
function rev() {
  if (stateStack.length) {
    const { elem, color } = stateStack.pop();
    elem.setAttribute("fill", color)
  }
}


есть еще вот это
"use strict";

$(document).ready(function () {

  if (localStorage.getItem("users") === null) {
    localStorage.setItem("users", JSON.stringify([]));
  }

  let users = JSON.parse(localStorage.getItem("users"));
  let userName = localStorage.getItem("userName");
  let time = localStorage.getItem("time")
  users.push({ userName, time });
  localStorage.setItem("users", JSON.stringify(users));
  for (const item of users) console.log(item);

  var $select = $('#name');
  $select.ready(function (event) {
    $.each(JSON.parse(users), function (key, value) {
      $('<option>').val(value.name).text(value.name).appendTo($select);
    });
  });

  $('#play_game').click(function () {
    let userName = document.getElementById('new_name').value;
    localStorage.setItem("userName", userName)
    users = JSON.parse(users);
    users.push(newUser);
    console.log(users);
    localStorage.setItem("users", JSON.stringify(users));
  });
});

Рони, я тебе что-бы проще было, в личку полностью файл(ссылку), если не против, там картинки и лого, не могу сдесь выложить:agree: Прошу прощения форумчане.

Pavel_16 06.04.2020 22:50

form.addEventListener("click", event => {
    let { target } = event;
    let txt = username.value.trim();
    if (target == newname) {
      localStorage.removeItem('userName');
      form.action = ""
    } else if (txt) {
      localStorage.setItem("userName", txt);
      form.action = 'play.html'//переход на страницу игры
    } else event.preventDefault()
  })
});

Вот здесь проблема - нужно что-бы перерисовывало страницу, а оно выкидывает на главную...

рони 06.04.2020 23:09

Pavel_16,
заменить на
event.preventDefault();
     window.location.reload();

рони 06.04.2020 23:15

Pavel_16,
пример выделения кода
*!*
строка или
строки кода
*/!*

form.addEventListener("click", event => {
    let { target } = event;
    let txt = username.value.trim();
    if (target == newname) {
      localStorage.removeItem('userName');
   *!*   
      event.preventDefault();
      window.location.reload(); 
   */!*
    } else if (txt) {
      localStorage.setItem("userName", txt);
      form.action = 'play.html'//переход на страницу игры
    } else event.preventDefault()
  })
});

Pavel_16 06.04.2020 23:24

Цитата:

Сообщение от рони (Сообщение 522348)
Pavel_16,
пример выделения кода
*!*
строка или
строки кода
*/!*

form.addEventListener("click", event => {
    let { target } = event;
    let txt = username.value.trim();
    if (target == newname) {
      localStorage.removeItem('userName');
   *!*   
      event.preventDefault();
      window.location.reload(); 
   */!*
    } else if (txt) {
      localStorage.setItem("userName", txt);
      form.action = 'play.html'//переход на страницу игры
    } else event.preventDefault()
  })
});

Получается когда есть имя уже, нажимаешь ,,новый игрок"- оно выкидывает все равно на главную страницу, а по нормальному должно в этом окне оставаться, просто появится вместо имени поле для ввода.?!

Может в DOM не правильно сделано?
<h1></h1>
                  <form action="play.html" >
                  <input name="username" hidden="hidden" required="required" pattern="^[a-zA-Z]+$" placeholder="Имя на латинице!">
                  <input name="newname" type="submit" value="Новый игрок" hidden="hidden" placeholder="Имя на латинице!" pattern="^[a-zA-Z]+$">
                  <input name="next" type="submit" value="Продолжить">
                  </form>

рони 06.04.2020 23:29

Pavel_16,
if (target == newname) {
            event.preventDefault();
            localStorage.removeItem('userName');
            h1.textContent = `Введите своё имя.`;
            newname.hidden = true;
            username.value = "";
            username.hidden = false;
        }

Pavel_16 06.04.2020 23:35

Цитата:

Сообщение от рони (Сообщение 522350)
Pavel_16,
if (target == newname) {
            event.preventDefault();
            localStorage.removeItem('userName');
            h1.textContent = `Введите своё имя.`;
            newname.hidden = true;
            username.value = "";
            username.hidden = false;
        }

Ну в принципе так и наверное лучше, каждый раз выбирать, если уже вводил имя!

Pavel_16 06.04.2020 23:49

Цитата:

Сообщение от рони (Сообщение 522296)
Pavel_16,
для начала можно так
рекорды
if (localStorage.getItem("users") === null) {
    localStorage.setItem("users", JSON.stringify([]));
}

let users = JSON.parse(localStorage.getItem("users"));
let userName  = localStorage.getItem("userName");
let time = localStorage.getItem("time")
users.push({userName, time});
localStorage.setItem("users", JSON.stringify(users));
for (const item of users) console.log(item);

наверное здесь ошибка или я не правильно прикрутил
у меня время постоянно null? а нужно что бы ложило сколько прошло со старта(начала отсчета таймера)

Pavel_16 06.04.2020 23:54

вот сейчас весь код по JS
отдельно модалка на приветствие:
"use strict";

document.addEventListener("DOMContentLoaded", function () {
  let user = localStorage.getItem("userName");
  let title = user ? `Привет ${user}!` : `Введите своё имя.`;
  let h1 = document.querySelector("h1");
  h1.textContent = title;
  let newname = document.querySelector("[name='newname']");
  newname.hidden = !user;
  let username = document.querySelector("[name='username']");
  username.hidden = user;
  user && (username.value = user);
  let form = document.querySelector("form");
  form.addEventListener("click", event => {
    let { target } = event;
    let txt = username.value.trim();
    if (target == newname) {
      event.preventDefault();
      localStorage.removeItem('userName');
      h1.textContent = `Введите или выберете из списка:`;
      newname.hidden = true;
      username.value = "";
      username.hidden = false;
    }

  })
});


отдельно работа с рисунком
"use strict";

//Работа с цветам
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");
  }
  const elements = document.querySelectorAll("*[fill]");
  function handleClick() {
    const currentColor = document.querySelector(".palette-button-active");
    if (!currentColor) {
      alert("Цвет не выбран");
      return;
    }
    const save = { elem: this, color: this.getAttribute("fill") };
    stateStack.push(save);
    this.setAttribute("fill", currentColor.dataset.color);
    if ([...elements].every(ep => ep.getAttribute('fill') != '#ffffff')) {
      tick();
      let time = document.getElementById('play_timer').innerHTML;
      localStorage.setItem("time ", time);
      setTimeout(() => alert('Вы всё закрасили!'));
      location.href = "/rekord.html";
    }
  }
  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);
function check() {
  const { length } = [...document.querySelectorAll("*[fill]")].filter(ep => ep.getAttribute('fill') == '#ffffff');
  const txt = length ? `Ещё ${length} фигур не закрашено` : 'Вы всё закрасили!'
  alert(txt)
}
const stateStack = []
function rev() {
  if (stateStack.length) {
    const { elem, color } = stateStack.pop();
    elem.setAttribute("fill", color)
  }
}


отдельно таймер
"use strict";

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

//Время в игре

function tick() {
  var nowTime = new Date();
  console.log('прошло секунд: ' + (nowTime + timer) / 1000);
}


отдельно работа с пользователем

"use strict";

$(document).ready(function () {

if (localStorage.getItem("users") === null) {
    localStorage.setItem("users", JSON.stringify([]));
}
 
let users = JSON.parse(localStorage.getItem("users"));
let userName  = localStorage.getItem("userName");
let time = localStorage.getItem("time")
users.push({userName, time});
localStorage.setItem("users", JSON.stringify(users));
for (const item of users) console.log(item);


var $select = $('#name');
  $select.ready(function (event) {
    $.each(JSON.parse(users), function (key, value) {
      $('<option>').val(value.name).text(value.name).appendTo($select);
    });
  });

  $('#play_game').click(function () {
    let userName = document.getElementById('new_name').value;
    localStorage.setItem("userName", userName)
    users = JSON.parse(users);
    users.push(newUser);
    console.log(users);
    localStorage.setItem("users", JSON.stringify(users));
  });
});

Где-то ошибка в последнем коде, т.к. после того как закрасил, выдаёт null на время и ссылается на этот .js

рони 07.04.2020 00:15

Pavel_16,
строка 54 пробел в ключе уберите
localStorage.setItem("time ", time);

рони 07.04.2020 00:17

Pavel_16,
на всякий случай $select.ready это бред.

Pavel_16 07.04.2020 00:23

Цитата:

Сообщение от рони (Сообщение 522354)
Pavel_16,
строка 54 пробел в ключе уберите
localStorage.setItem("time ", time);

круто!
но теперь вот что - где наш юзер исчез,
И время можно как то -захватить которое прошло, а не осталось!?
{userName: null, time: "2 : 34"}

Pavel_16 07.04.2020 00:24

Цитата:

Сообщение от рони (Сообщение 522355)
Pavel_16,
на всякий случай $select.ready это бред.

мне кажется,что в этом js многое не так или не нужно?!?!:cray:

Pavel_16 07.04.2020 00:42

почему то перестало имя передаваться- после изменения формы или нет? нужно поковыряться....

рони 07.04.2020 00:53

Pavel_16,
страница рекордов
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  table{
    border: 1px solid #000000;
    border-collapse: collapse;
  }
  td{
    border: 1px solid #000000;
  }

  </style>

  <script>
document.addEventListener( "DOMContentLoaded" , function() {
if (localStorage.getItem("users") === null) {
    localStorage.setItem("users", JSON.stringify([]));
}

let users = JSON.parse(localStorage.getItem("users"));
let userName  = localStorage.getItem("userName");
let time = localStorage.getItem("time");
if(time) {
users.push({userName, time});
localStorage.setItem("users", JSON.stringify(users));
localStorage.removeItem('time');
}
let html = ''
for (const {userName, time} of users) html +=
    `<tr>
        <td>${userName}</td>
        <td>${time}</td>
    </tr>`;
document.querySelector('table tbody').innerHTML = html;

  });

  </script>
</head>
<body>
<table>
<thead><tr>
        <td>имя</td>
        <td>время</td>
    </tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>

Pavel_16 07.04.2020 01:08

рони, что-то null ? вместо имени пользователя все равно передаёт!, а можно сделать так, что бы сортировало от меньшего кол-ва времени к большему?

рони 07.04.2020 01:14

Цитата:

Сообщение от Pavel_16
рони, что-то null ?

так верните строки которые записывают имя


Часовой пояс GMT +3, время: 14:03.