вот сейчас весь код по 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
