Автоматическая остановка таймера после завершения интеракции
Здравствуйте!)
В нижеприведённом примере кнопкой Start запускается таймер, далее необходимо кликами на "H" и "w" поменять их местами, после чего сработает alert("Hello world!"), потом вручную кнопкой Stop останавливается таймер. Вопрос: какой код необходимо прописать вместо alert("Hello world!"), чтобы таймер останавливался автоматически без задействования кнопки Stop?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
let temp = [];
let end = ["H", "e", "l", "l", "o", "w", "o", "r", "l", "d"];
let win;
function exch(event) {
if(win) return;
let img;
if (img = event.target.closest(".click")) {
let cellIndex = event.target.closest("td").cellIndex;
let rowIndex = event.target.closest("tr").rowIndex;
if (temp.length) {
temp[0].classList.remove("active");
let x = Math.abs(cellIndex - temp[1]);
let y = Math.abs(rowIndex - temp[2]);
if ((x == 0 && y == 1) || (x == 1 && y == 0) || img === temp[0]) {
[img.src, temp[0].src] = [temp[0].src, img.src]
temp = [];
} else {
img.classList.add("active");
temp = [img, cellIndex, rowIndex];
}
} else {
img.classList.add("active");
temp = [img, cellIndex, rowIndex];
}
const numbers = Array.from(document.querySelectorAll(".click")).map(({src}) => src.split('=')[2]);
win = numbers.every((a, i) => a === end[i]);
if(win) alert("Hello world!");
}
}
</script>
</head>
<body>
<form onclick="exch(event)">
<table align="center" cellspacing="1" cellpadding="0">
<tr>
<td><img class="click" name="1" src="https://placehold.co/100x100/0000ff/ffffff?font=playfair-display&text=w"></td>
<td><img class="click" name="2" src="https://placehold.co/100x100/ff0000/ffffff?font=playfair-display&text=e"></td>
<td><img class="click" name="3" src="https://placehold.co/100x100/ff0000/ffffff?font=playfair-display&text=l"></td>
<td><img class="click" name="4" src="https://placehold.co/100x100/ff0000/ffffff?font=playfair-display&text=l"></td>
<td><img class="click" name="5" src="https://placehold.co/100x100/ff0000/ffffff?font=playfair-display&text=o"></td>
</tr>
<tr>
<td><img class="click" name="6" src="https://placehold.co/100x100/ff0000/ffffff?font=playfair-display&text=H"></td>
<td><img class="click" name="7" src="https://placehold.co/100x100/0000ff/ffffff?font=playfair-display&text=o"></td>
<td><img class="click" name="8" src="https://placehold.co/100x100/0000ff/ffffff?font=playfair-display&text=r"></td>
<td><img class="click" name="9" src="https://placehold.co/100x100/0000ff/ffffff?font=playfair-display&text=l"></td>
<td><img class="click" name="10" src="https://placehold.co/100x100/0000ff/ffffff?font=playfair-display&text=d"></td>
</tr>
</table>
</form>
<br /><br /><br />
<div style="text-align: center">
<label id="seconds">00</label>
<br />
<input type="button" id="gobutton" onclick="startTimer()" value="Start">
<input type="button" id="stopbutton" onclick="stopTimer()" value="Stop">
<br />
<label id="totalTime">
</label>
</div>
<script type="text/javascript">
let secondsLabel = document.getElementById("seconds");
let totalSeconds = 0;
let counter;
let timerOn;
let htmlResets;
let totalMills = 0;
function startTimer() {
if (timerOn == 1) {
return;
}
else {
counter = setInterval(setTime, 10);
timerOn = 1;
htmlResets = 0;
}
}
function pauseTimer() {
if (timerOn == 1) {
clearInterval(counter);
timerOn = 0;
}
if (htmlResets == 1) {
secondsLabel.innerHTML = "00";
totalMills = 0;
totalSeconds = 0;
}
else {
htmlResets = 1;
}
}
function stopTimer() {
totalTime.innerHTML = secondsLabel.innerHTML;
secondsLabel.innerHTML = "00";
totalMills = 0;
totalSeconds = 0;
clearInterval(counter);
timerOn = 0;
}
function setTime() {
++totalMills;
if (totalSeconds == 60) {
totalSeconds = 0;
secondsLabel.innerHTML = "00";
clearInterval(counter);
}
if (totalMills == 100) {
totalSeconds++;
secondsLabel.innerHTML = pad(totalSeconds % 60);
totalMills = 0;
}
if (totalSeconds == 60) {
totalSeconds = 0;
}
}
function pad(val) {
let valString = val + "";
if (valString.length < 2) {
return "0" + valString;
}
else {
return valString;
}
}
</script>
</body>
</html>
|
Борис К,
вместо if(win) alert("Hello world!"); будет if(win) stopTimer(); :-? |
Учитель Рони!
Смешно и грустно... так всё просто, а я уж слишком усложнил всё, мучаясь три дня!((( Куда только не вставлял этот злополучный stopTimer()))) Фуууххх... но стыдно!((( Как всегда, моя огромная благодарность Вам и глубокое уважение за ценный опыт и профессионализм! |
Рони, с Новым годом Вас!
Искренне желаю успехов во всех ваших начинаниях!)) Но, пожалуйста, помогите ещё по этой теме... Хотелось бы таблицу вот в такой форме
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td id="blue"></td>
<td id="green"></td>
</tr>
<tr>
<td id="red"></td>
<td id="orange"></td>
</tr>
</table>
иметь в коде, представленном ниже (чтобы вместо изображений с буквами были "стили"):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#red {
background-color: #ff0000;
width: 100px;
height: 100px;
}
#orange {
background-color: #ff9900;
width: 100px;
height: 100px;
}
#green {
background-color: #006600;
width: 100px;
height: 100px;
}
#blue {
background-color: #0000ff;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
let temp = [];
let end = ["r", "g", "b", "o"];
let win;
function exch(event) {
if(win) return;
let img;
if (img = event.target.closest(".click")) {
let cellIndex = event.target.closest("td").cellIndex;
let rowIndex = event.target.closest("tr").rowIndex;
if (temp.length) {
let x = Math.abs(cellIndex - temp[1]);
let y = Math.abs(rowIndex - temp[2]);
if ((x == 0 && y == 1) || (x == 1 && y == 0) || img === temp[0]) {
[img.src, temp[0].src] = [temp[0].src, img.src]
temp = [];
}
} else {
temp = [img, cellIndex, rowIndex];
}
const numbers = Array.from(document.querySelectorAll(".click")).map(({src}) =>
src.split('=')[2]);
win = numbers.every((a, i) => a === end[i]);
if(win) alert("Hello world!");
}
}
</script>
</head>
<body>
<form onclick="exch(event)">
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td><img class="click" name="1" src="https://placehold.co/100x100/0000ff/ffffff?font=playfair-display&text=b"></td>
<td><img class="click" name="2" src="https://placehold.co/100x100/006600/ffffff?font=playfair-display&text=g"></td>
</tr>
<tr>
<td><img class="click" name="3" src="https://placehold.co/100x100/ff0000/ffffff?font=playfair-display&text=r"></td>
<td><img class="click" name="4" src="https://placehold.co/100x100/ff9900/ffffff?font=playfair-display&text=o"></td>
</tr>
</table>
</form>
</body>
</html>
Например: при кликах на синий и красный квадратики в "стилях" они меняются местами (в результате в таблице должна быть такая последовательность цветов слева направо, сверху вниз - красный, зелёный, синий, оранжевый), после чего срабатывает alert("Hello world!"). И тогда при таком решении, как сделать, чтобы при открытии странички каждый раз цветные квадратики в "стилях" располагались в табличке случайном порядке? Фуууххх... |
Борис К,
картинки располагать в таблице по порядку.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#red {
background-color: #ff0000;
width: 100px;
height: 100px;
}
#orange {
background-color: #ff9900;
width: 100px;
height: 100px;
}
#green {
background-color: #006600;
width: 100px;
height: 100px;
}
#blue {
background-color: #0000ff;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
let temp = [];
let end = ["r", "g", "b", "o"];
let win;
function exch(event) {
if (win) return;
let img;
if (img = event.target.closest(".click")) {
let cellIndex = event.target.closest("td").cellIndex;
let rowIndex = event.target.closest("tr").rowIndex;
if (temp.length) {
let x = Math.abs(cellIndex - temp[1]);
let y = Math.abs(rowIndex - temp[2]);
if ((x == 0 && y == 1) || (x == 1 && y == 0) || img === temp[0]) {
[img.src, temp[0].src] = [temp[0].src, img.src]
temp = [];
}
} else {
temp = [img, cellIndex, rowIndex];
}
const numbers = Array.from(document.querySelectorAll(".click")).map(({
src
}) =>
src.split('=')[2]);
if (!event.random) win = numbers.every((a, i) => a === end[i]);
if (win) alert("Hello world!");
}
}
document.addEventListener("DOMContentLoaded", function() {
let img = Array.from(document.querySelectorAll(".click"));
img.sort(_ => Math.random() - .5);
img.forEach(target => exch({
target,
random: true
}));
temp = [];
});
</script>
</head>
<body>
<form onclick="exch(event)">
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td><img class="click" name="1" src="https://placehold.co/100x100/0000ff/ffffff?font=playfair-display&text=r"></td>
<td><img class="click" name="2" src="https://placehold.co/100x100/006600/ffffff?font=playfair-display&text=g"></td>
</tr>
<tr>
<td><img class="click" name="3" src="https://placehold.co/100x100/ff0000/ffffff?font=playfair-display&text=b"></td>
<td><img class="click" name="4" src="https://placehold.co/100x100/ff9900/ffffff?font=playfair-display&text=o"></td>
</tr>
</table>
</form>
</body>
</html>
|
Рони, благодарю за оперативный отклик, но, видимо, я недостаточно ясно изложил проблему тёмной ночкой((
Да, с расположением в табличке цветных изображений в случайном порядке всё отлично получилось!!! Огромный Thanx))) Но хотелось бы, чтобы таблица была такого вида (с использованием стилей):
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td id="blue"></td>
<td id="green"></td>
</tr>
<tr>
<td id="red"></td>
<td id="orange"></td>
</tr>
</table>
А не так как есть - с использованием изображений (<td><img class="click" name="1" src="url"></td>) Без понятия, как в этой строке - let end = ["r", "g", "b", "o"]; означать ячейки таблицы с использованием стилей (как это - <td id="blue"></td>), а не изображений (<img src="...>), чтобы при завершении последовательности, например, красный, зелёный, синий, оранжевый срабатывал alert("Hello world!"). Хочется, чтобы цветные квадратики были представлены через стили, а не как изображения!)) Фуууххх... |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
[data-id="red"] {
background-color: #ff0000;
width: 100px;
height: 100px;
}
[data-id="orange"] {
background-color: #ff9900;
width: 100px;
height: 100px;
}
[data-id="green"] {
background-color: #006600;
width: 100px;
height: 100px;
}
[data-id="blue"] {
background-color: #0000ff;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
let temp = [];
let form = document.querySelector(".game");
let tds = Array.from(form.querySelectorAll("[data-id]"));
let idEnd = tds.map(({
dataset: {
id
}
}) => id);
let win;
function exch(event) {
if (win) return;
let td = event.target.closest("[data-id]");
if (td) {
let cellIndex = td.cellIndex;
let rowIndex = td.closest("tr").rowIndex;
if (temp.length) {
let x = Math.abs(cellIndex - temp[1]);
let y = Math.abs(rowIndex - temp[2]);
if ((x == 0 && y == 1) || (x == 1 && y == 0) || td === temp[0]) {
[td.dataset.id, temp[0].dataset.id] = [temp[0].dataset.id, td.dataset.id]
temp = [];
}
} else {
temp = [td, cellIndex, rowIndex];
}
if (!event.random) win = tds.every(({
dataset: {
id
}
}, i) => id === idEnd[i]);
if (win) alert("Hello world!");
}
}
form.addEventListener("click", exch);
tds.slice(0).sort(_ => Math.random() - .5)
.forEach(target => exch({
target,
random: true
}));
temp = [];
});
</script>
</head>
<body>
<form class="game">
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td data-id="red"></td>
<td data-id="green"></td>
</tr>
<tr>
<td data-id="blue"></td>
<td data-id="orange"></td>
</tr>
</table>
</form>
</body>
</html>
|
Рони... ну, что сказать?!
Гениально! Низко склоняю седую голову и крепко жму руку! Огромная благодарность за помощь и глубокое уважение за профессионализм! Всего самого доброго в наступившем Новом году... и в жизни!))) |
Борис К,
:thanks: ... код можно сделать ещё интереснее, но лучше вы сами :lol: |
Рони, Вы обо мне хорошего мнения... но, к сожалению, я очень далёк от программирования(((
Условно можно было бы назвать мою незатейливую возню с JS время от времени хобби на склоне лет... Но я непременно прислушаюсь к вашему совету и интуитивно поэкспериментирую с кодом. :-? Спасибо Вам за всё хорошее! |
Рони, с Рождеством!
Цитата:
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td data-id="red"></td>
<td data-id="red"></td>
<td data-id="red"></td>
<td data-id="red"></td>
</tr>
<tr>
<td data-id="blue"></td>
<td data-id="blue"></td>
<td data-id="blue"></td>
<td data-id="blue"></td>
</tr>
<tr>
<td data-id="orange"></td>
<td data-id="orange"></td>
<td data-id="orange"></td>
<td data-id="orange"></td>
</tr>
<tr>
<td data-id="green"></td>
<td data-id="green"></td>
<td data-id="green"></td>
<td data-id="green"></td>
</tr>
</table>
Может быть, возможен какой-нибудь другой код для shuffle?) |
Борис К,
сделайте цикл для shuffle равный количеству клеток. |
Борис К,
или так ... if ( event.random ||(x == 0 && y == 1) || (x == 1 && y == 0) || td === temp[0] ) |
Цитата:
for (i = 0; i < 16; i++) {
tds.slice(0).sort(_ => Math.random() - .5)
.forEach(target => exch({
target,
random: true
}));
temp = [];
}
Заметно лучше!)) Цитата:
Рони, благодарю! |
Борис К,
let arr = tds.slice(0);
for (var i = 0; i < tds.length; i++) {
arr.sort(_ => Math.random() - .5)
.forEach(target => exch({
target,
random: true
}));
}
temp = [];
|
Борис К,
на всякий случай https://javascript.ru/forum/events/8...tml#post541463 и вместо sort лучше менять пары при перемешивании, более равномерное перемешивание.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
[data-id="red"] {
background-color: #ff0000;
width: 100px;
height: 100px;
}
[data-id="orange"] {
background-color: #ff9900;
width: 100px;
height: 100px;
}
[data-id="green"] {
background-color: #006600;
width: 100px;
height: 100px;
}
[data-id="blue"] {
background-color: #0000ff;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
let temp = [];
let form = document.querySelector(".game");
let tds = Array.from(form.querySelectorAll("[data-id]"));
let idEnd = tds.map(({
dataset: {
id
}
}) => id);
let win;
function exch(event) {
if (win) return;
let td = event.target.closest("[data-id]");
if (td) {
let cellIndex = td.cellIndex;
let rowIndex = td.closest("tr").rowIndex;
if (temp.length) {
let x = Math.abs(cellIndex - temp[1]);
let y = Math.abs(rowIndex - temp[2]);
if (event.random || (x == 0 && y == 1) || (x == 1 && y == 0) || td === temp[0]) {
[td.dataset.id, temp[0].dataset.id] = [temp[0].dataset.id, td.dataset.id]
temp = [];
}
} else {
temp = [td, cellIndex, rowIndex];
}
if (!event.random) win = tds.every(({
dataset: {
id
}
}, i) => id === idEnd[i]);
if (win) alert("Hello world!");
}
}
form.addEventListener("click", exch);
let arr = tds.slice(0), len = arr.length;
arr.forEach((_, i) => {
let a = Math.trunc(Math.random() * len);
[arr[i], arr[a]] = [arr[a], arr[i]];
});
arr.forEach(target => exch({
target,
random: true
}));
temp = [];
});
</script>
</head>
<body>
<form class="game">
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td data-id="red"></td>
<td data-id="red"></td>
<td data-id="red"></td>
<td data-id="red"></td>
</tr>
<tr>
<td data-id="blue"></td>
<td data-id="blue"></td>
<td data-id="blue"></td>
<td data-id="blue"></td>
</tr>
<tr>
<td data-id="orange"></td>
<td data-id="orange"></td>
<td data-id="orange"></td>
<td data-id="orange"></td>
</tr>
<tr>
<td data-id="green"></td>
<td data-id="green"></td>
<td data-id="green"></td>
<td data-id="green"></td>
</tr>
</table>
</form>
</body>
</html>
|
Все варианты отлично работают!)))
Цитата:
Рони, берегите, лелейте и цените себя! Мои искренняя огромная благодарность, безграничное восхищение и глубокое уважение Вам!!! :victory: |
Борис К,
убрал "лишнее" :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
[data-id="red"] {
background-color: #ff0000;
width: 100px;
height: 100px;
}
[data-id="orange"] {
background-color: #ff9900;
width: 100px;
height: 100px;
}
[data-id="green"] {
background-color: #006600;
width: 100px;
height: 100px;
}
[data-id="blue"] {
background-color: #0000ff;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
let temp = [];
let form = document.querySelector(".game");
let tds = Array.from(form.querySelectorAll("[data-id]"));
let idEnd = tds.map(({
dataset: {
id
}
}) => id);
let win;
function exch(event) {
if (win) return;
let td = event.target.closest("[data-id]");
if (td) {
let cellIndex = td.cellIndex;
let rowIndex = td.closest("tr").rowIndex;
if (temp.length) {
let x = Math.abs(cellIndex - temp[1]);
let y = Math.abs(rowIndex - temp[2]);
if ((x == 0 && y == 1) || (x == 1 && y == 0) || td === temp[0]) {
[td.dataset.id, temp[0].dataset.id] = [temp[0].dataset.id, td.dataset.id]
temp = [];
}
} else {
temp = [td, cellIndex, rowIndex];
}
win = tds.every(({
dataset: {
id
}
}, i) => id === idEnd[i]);
if (win) alert("Hello world!");
}
}
form.addEventListener("click", exch);
let color = idEnd.slice(0), len = color.length;
color.forEach((_, i) => {
let a = Math.trunc(Math.random() * len);
[color[i], color[a]] = [color[a], color[i]];
});
tds.forEach(({dataset}, i) => dataset.id = color[i]);
});
</script>
</head>
<body>
<form class="game">
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td data-id="red"></td>
<td data-id="red"></td>
<td data-id="red"></td>
<td data-id="red"></td>
</tr>
<tr>
<td data-id="blue"></td>
<td data-id="blue"></td>
<td data-id="blue"></td>
<td data-id="blue"></td>
</tr>
<tr>
<td data-id="orange"></td>
<td data-id="orange"></td>
<td data-id="orange"></td>
<td data-id="orange"></td>
</tr>
<tr>
<td data-id="green"></td>
<td data-id="green"></td>
<td data-id="green"></td>
<td data-id="green"></td>
</tr>
</table>
</form>
</body>
</html>
|
Цитата:
Роничка, СПАСИБО!!! |
Рони, а возможно сделать, чтобы в стилях были не ссылки на изображения, а текстовый контент в самом коде?
Я немного упростил код для удобства:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
[data-id="red"] {
background-image:url(https://placehold.co/200x100/ff0000/EEE?font=playfair-display&text=Hello);
width: 200px;
height: 100px;
}
[data-id="orange"] {
background-image:url(https://placehold.co/200x100/ff9900/EEE?font=playfair-display&text=Java);
width: 200px;
height: 100px;
}
[data-id="green"] {
background-image:url(https://placehold.co/200x100/006600/EEE?font=playfair-display&text=script!);
width: 200px;
height: 100px;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
let temp = [];
let form = document.querySelector(".game");
let tds = Array.from(form.querySelectorAll("[data-id]"));
let idEnd = tds.map(({
dataset: {
id
}
}) => id);
let win;
function exch(event) {
if (win) return;
let td = event.target.closest("[data-id]");
if (td) {
let cellIndex = td.cellIndex;
let rowIndex = td.closest("tr").rowIndex;
if (temp.length) {
let x = Math.abs(cellIndex - temp[1]);
let y = Math.abs(rowIndex - temp[2]);
if ((x == 0 && y == 1) || (x == 1 && y == 0) || td === temp[0]) {
[td.dataset.id, temp[0].dataset.id] = [temp[0].dataset.id, td.dataset.id]
temp = [];
}
} else {
temp = [td, cellIndex, rowIndex];
}
win = tds.every(({
dataset: {
id
}
}, i) => id === idEnd[i]);
if (win) alert("Hello JavaScript!");
}
}
form.addEventListener("click", exch);
let color = idEnd.slice(0), len = color.length;
color.forEach((_, i) => {
let a = Math.trunc(Math.random() * len);
[color[i], color[a]] = [color[a], color[i]];
});
tds.forEach(({dataset}, i) => dataset.id = color[i]);
});
</script>
</head>
<body>
<div class="block">
<form class="game">
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td data-id="red"></td>
<td data-id="orange"></td>
<td data-id="green"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
|
игра собери по порядку
Борис К,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');
.color {
background-color: var(--color);
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
}
.color:after {
display: block;
content: var(--txt);
color: #FFFFFF;
font-size: 48px;
font-family: 'Playfair Display', serif;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
let temp = [];
let form = document.querySelector(".game");
let tds = Array.from(form.querySelectorAll(".color"));
let colors = "#FF0000|#008000|#0000CD".split("|");
let txts = "Hello|Java|script".split("|");
let win;
function show() {
tds.forEach(td => {
let i = td.dataset.id;
td.style.setProperty("--color", colors[i]);
td.style.setProperty("--txt", `"${txts[i]}"`);
});
}
function randomId() {
win = false; temp = [];
let length = colors.length;
let ids = Array.from({
length
}, (v, i) => i);
ids.forEach((_, i) => {
let a = Math.trunc(Math.random() * length);
[ids[i], ids[a]] = [ids[a], ids[i]];
});
tds.forEach(({
dataset
}, i) => dataset.id = ids[i]);
show();
}
randomId()
function exch(event) {
if (win) return;
let td = event.target.closest(".color");
if (td) {
let cellIndex = td.cellIndex;
let rowIndex = td.closest("tr").rowIndex;
if (temp.length) {
let x = Math.abs(cellIndex - temp[1]);
let y = Math.abs(rowIndex - temp[2]);
if ((x == 0 && y == 1) || (x == 1 && y == 0) || td === temp[0]) {
[td.dataset.id, temp[0].dataset.id] = [temp[0].dataset.id, td.dataset.id];
show();
temp = [];
}
} else {
temp = [td, cellIndex, rowIndex];
}
win = tds.every(({
dataset: {
id
}
}, i) => id == i);
if (win) alert("Hello JavaScript!");
}
}
form.addEventListener("click", exch);
});
</script>
</head>
<body>
<div class="block">
<form class="game">
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td class="color"></td>
<td class="color"></td>
<td class="color"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
|
Огромная благодарность за понимание, гениальный Рони!
Круто... очень круто!!! С наступающим Старым Новым годом, Профессионал!))) P.S. Уже есть по коду вопросы, но я ещё не решаюсь их задать... пока поэкспериментирую самостоятельно. :write: |
:help:
Рони, а вообще возможно реализовать так, чтобы кроме 30-ой строки (let txts = "Hello|Java|script".split("|");) в вашем последнем коде, была бы, например, ещё такая - let txts = "Good|morning|forum".split("|");... ну, и соответственно, чтобы под это было alert("Good morning forum!");? И чтобы кнопкой можно было менять текстовые сообщения с их обновлением без перезагрузки страницы... P.S. Я самостоятельно за четверо суток не справился. :cray: |
Борис К,
не понимаю. |
Рони, если бы была не одна фраза для сборки, а несколько, которые сменялись бы рандомно кнопкой, и, соответственно, alert был бы каждый раз другой под свою фразу...
|
Борис К,
кнопку, массив фраз, элемент для вывода сообщения, набросайте, пожалуйста...:( |
Цитата:
Цитата:
Цитата:
Good morning forum Roney good luck)) Цитата:
для out.append("Hello Java script"); out.append("Good morning forum"); out.append("Roney good luck"); P.S. Надеюсь, правильно Вас понял. |
Борис К,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');
body {
background-color: #D3D3D3
}
.block {
background-color: var(--color);
text-align: center;
line-height: 100px;
margin: var(--rip);
flex-basis: calc(100% / var(--cols) - var(--rip) * 2);
font-family: 'Playfair Display', serif;
color: #FFFFFF;
font-size: 48px;
}
.out:after {
content: var(--snippet);
}
.btn:after {
content: "init";
}
.game {
display: flex;
flex-wrap: wrap;
--cols: 3;
--gap: 2px;
--rip: calc(var(--gap) - 1px);
padding: var(--gap);
}
.game {
width: 700px;
margin: 40px auto;
}
.win .block {
background-image: linear-gradient(45deg, rgba(255, 255, 255, .0) 50%, rgba(255, 255, 255, .8), rgba(255, 255, 255, .0) 70%), radial-gradient(190% 100% at 50% 0%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .5) 50%, rgba(0, 0, 0, 0) 50%);
box-sizing: border-box;
background-position: 200% 0, 0 0;
box-shadow: rgba(0, 0, 0, .3) 0 2px 5px;
background-repeat: no-repeat;
background-size: 200% 100%, auto;
animation: anim 3s linear infinite;
}
@keyframes anim {
from {
background-position: 200% 0, 0 0;
}
to {
background-position: -200% 0, 0 0;
}
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
let snippets = `Hello Java script !
1 2 3 4 5 6 7 8 9 10 11 12
Good morning forum
Roney good luck`.split(/\n/);
let colors = [
'#0000FF', //blue
'#FFFF00', //yellow
'#008000', //green
'#FFA500', // orange
'#FF0000', //red
'#800080', //purple
'#808000', //olive
'#00FF00', //lime
'#800000', //maroon
'#00FFFF', //aqua
'#008080', //team
'#000080', //navy
'#FF00FF', //fushua
'#808080' //gray
];
let out = document.querySelector(".out");
let btn = document.querySelector(".btn")
let game = document.querySelector(".game");
let win = _ => true;
let temp = [];
let cols = 3;
function shuffle(array, elem) {
let length = array.length,
arr = array.slice(0);
const randomIndex = _ => Math.trunc(Math.random() * length);
let k = randomIndex();
if (elem) return arr[k];
arr.forEach((_, i) => {
k = randomIndex();
[arr[i], arr[k]] = [arr[k], arr[i]];
});
return arr;
}
// rule
let [a, b] = [0, 1];
function rule(x, y) {
return a == x && b == y
}
function exch(event) {
if (win()) return;
let block = event.target.closest(".block");
if (block) {
let i = block.style.order;
let [c, d] = [i % cols, i / cols | 0];
if (temp.length) {
let x = Math.abs(c - temp[1]);
let y = Math.abs(d - temp[2]);
if (x > y)[x, y] = [y, x];
let move = rule(x, y);
if (move || block === temp[0]) {
[block.style.order, temp[0].style.order] = [temp[0].style.order, block.style.order];
temp = [];
}
} else {
temp = [block, c, d];
};
win()
}
}
game.addEventListener("click", exch);
function createContent() {
if (!win()) return;
temp = [];
let snippet = shuffle(snippets, true).trim();
let words = snippet.split(/\s+/);
let len = words.length;
cols = len > 5 ? 3 : len;
let bgColor = shuffle(colors);
out.style.setProperty("--snippet", `"collect ${snippet}"`);
let div = document.createElement('div');
div.classList.add('block');
let content = words.map((word, i) => {
let elem = div.cloneNode();
elem.textContent = word;
elem.style.setProperty("--color", bgColor[i % bgColor.length]);
return elem;
});
shuffle(content).forEach(({
style
}, i) => style.order = i);
game.classList.remove("win")
game.innerHTML = "";
game.style.setProperty("--cols", cols);
game.append(...content);
win = _ => {
let validate = content
.every(({
style: {
order
}
}, i) => order == i);
if (validate) {
out.style.setProperty("--snippet", `"${snippet} right!!! More? click init"`);
game.classList.add("win")
}
return validate
}
}
btn.addEventListener("click", createContent);
createContent()
});
</script>
<title></title>
</head>
<body>
<p class="out"></p>
<div class="game"></div>
<button class="btn"></button>
</body>
</html>
|
"Я влюбился в программиста
За его талант - так быстро Рони создал чудо-код, Аж душа моя поёт!" © Борис К. :dance: |
Рони, сдаюсь!(((
Возможно ли сделать так, чтобы ячейки располагались просто одна под другой? А чтобы текст в одной ячейке состоял из двух слов, например, "turn on"? P.S. Я самостоятельно за несколько суток решение так и не нашёл((((( |
Цитата:
строки 141 - 143
let words = snippet.match(/\S+(\s+\S+)?/g);
let len = words.length;
cols = 1;
|
Спасибо, Рони... Спасибо!
:dance: Уже разбираюсь... поэтому есть вопрос: например, возможно ли по ячейкам разбить, например, следующее предложение со структурой (2/1/2): "Forum JavaScript loves mister Roney" ? И я так понимаю, что, например, другое предложение с другой структурой (1/2/1): "I very love JavaScript" уже не получится так разбить по ячейкам при тех же строках в коде?(( |
Борис К,
что вам мешает разбить, как нужно изначально? может про массивы почитать? |
Цитата:
Цитата:
Но мне вашего мастерства, увы, не достичь... Но что делать? Буду стараться хоть что-то освоить! |
Борис К,
let snippets = [["1", "2", "3"], ["Но что " ,"делать?"], ["что вам мешает", "разбить, как нужно ", "изначально?"]]; ...
let words = shuffle(snippets, true);
let snippet = words.join("");
cols = 1;
|
Да, дорогой Рони, теперь всё работает как надо!)))
:dance: Повторюсь... Рони, Вы - лучший из лучших! Гений!!! Да, и не спорьте!)) |
Борис К,
а лучше так)))
let snippets = [{words : ["1", "2", "3", "4"], cols : 2}, {words : ["Но что " ,"делать?"], cols : 1}, {words : ["что вам мешает ", "разбить, как нужно ", "изначально?"], cols : 1}];
...
let {words, cols : cols} = shuffle(snippets, true);
let snippet = words.join("");
|
Цитата:
Но моя "фантазия" несёт меня дальше... остановите меня!)) Рони, просто, пожалуйста, ответьте, возможно ли в принципе сделать так, чтобы изначально звучала фраза аудиофайлом, которая будет представлена, и по завершению интеракции опять? Практически это реально реализовать? Чтобы я зря не ломал себе голову ещё полмесяца... P.S. Благодаря лично Вам, я подобное научился делать с другим более понятным кодом)) |
Борис К,
я пас. |
Рони, видимо, Вы меня неправильно поняли - меня интересовало возможно ли это реализовать в принципе...
Но Спасибо Вам!!! |
| Часовой пояс GMT +3, время: 19:49. |