[Pavel_16]

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

По итогу:
приветствие

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));
  });
});

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