Почему не исчезает последняя цифра?
Приветсвую, есть следующий код:
var mili = 0.0;
var time = document.getElementById("time");
function plusMil() {
mili += 0.01;
time.innerHTML = Math.floor(mili * 100) / 100;
}
let interval;
const cells = Array.from(document.querySelectorAll("td"));
let nums = Array.from(Array(50).keys()).map((el) => el + 1);
let f = 0;
cells.forEach((cell) => {
const i = Math.floor(Math.random() * (25 - f));
cell.textContent = nums[i];
nums.splice(i, 1);
f++;
});
let current = 1;
document.querySelector("table").addEventListener("click", function (event) {
const td = event.target.closest("td");
if (+td.textContent !== current) {
return;
} else {
const i = nums.indexOf(+td.textContent);
if (i !== -1) {
nums.splice(0, 1);
}
if (+td.textContent == 1) {
interval = setInterval(plusMil, 10);
}
if (+td.textContent == 50) {
clearInterval(interval);
return;
}
const m = Math.floor(Math.random() * nums.length);
td.textContent = nums[m];
nums.splice(m, 1);
current++;
}
});
Код:
<!DOCTYPE html> |
Просто убрал return, извиняюсь за беспокойство C:
|
хм, а не подскажете, как сделать так, чтобы вместо цифр появлялись буквы (От А до Я) по тому же принципу. Например поле будет 16 на 16 (просто везде по одному <td> вырезать). И также первые 16 букв (кроме ё) появляются в разброс. Просто не приходит ничего в голову, как напихать кучу if-ов, типа если 1, то а, если 2, то б.
|
Можно взять массив 'А' ... 'Я', получать случайный его индекс, по которому извлекать из массива символ и удаляя его из массива.
|
gameTable алфавит
Цитата:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
td{
border: 1px solid hsla(240, 100%, 40%, 1);
height: 45px;
width: 45px;
text-align: center;
font-size: 28px;
transition: 1s;
}
td.collapsing{
transform: scale(0);
}
</style>
</head>
<body>
<script>
class gameTable {
constructor(arr, colls, rows) {
this.colls = colls;
this.rows = rows;
this.length = this.colls * this.rows;
this.index = 0;
this.array = arr;
this.contentTd = this.createContent(this.array, this.length);
this.table = document.createElement('table');
this.createTableHtml();
this.table.addEventListener("click", this.clickHandler.bind(this));
}
shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.trunc(Math.random() * i);
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
createContent(array, length) {
let content = [];
for (let i = 0; i < array.length;) {
let temp = array.slice(i, i += length);
temp = this.shuffleArray(temp);
content = content.concat(temp);
}
return content
}
createTableHtml() {
this.index = 0;
for (var i = 0; i < this.rows; i++) {
let row = this.table.insertRow();
for (var k = 0; k < this.colls; k++) {
let cell = row.insertCell();
cell.textContent = this.contentTd[this.index++] || '';
}
}
this.index = 0;
}
clickHandler({target}) {
target = target.closest('td');
if (!target) return;
let txt = target.textContent;
if (txt == this.array[this.index]) {
txt = this.contentTd[this.index + this.length] || '';
target.textContent = txt;
target.classList.toggle('collapsing', !txt);
this.index++;
}
if (this.index == this.array.length) alert('End');
}
}
let game = new gameTable('АБВГДЕЁЖЗИЙКЛМНОП'.split(''), 3, 4);
document.body.appendChild(game.table);
</script>
</body>
</html>
|
Спасибо, не могли бы помочь теерь с таймером? :)
Чего-то не работает он
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="time">0.000</div>
<script>
var mili = 0.0;
var time = document.getElementById("time");
function plusMil() {
mili += 0.01;
time.innerHTML = Math.floor(mili * 100) / 100;
}
let interval
class gameTable {
constructor(arr, colls, rows) {
this.colls = colls;
this.rows = rows;
this.length = this.colls * this.rows;
this.index = 0;
this.array = arr;
this.contentTd = this.createContent(this.array, this.length);
this.table = document.createElement('table');
this.createTableHtml();
this.table.addEventListener("click", this.clickHandler.bind(this));
}
shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.trunc(Math.random() * i);
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
createContent(array, length) {
let content = [];
for (let i = 0; i < array.length;) {
let temp = array.slice(i, i += length);
temp = this.shuffleArray(temp);
content = content.concat(temp);
}
return content
}
createTableHtml() {
this.index = 0;
for (var i = 0; i < this.rows; i++) {
let row = this.table.insertRow();
for (var k = 0; k < this.colls; k++) {
let cell = row.insertCell();
cell.textContent = this.contentTd[this.index++] || '';
}
}
this.index = 0;
}
clickHandler({target}) {
target = target.closest('td');
if (!target) return;
let txt = target.textContent;
if (txt == this.array[this.index]) {
txt = this.contentTd[this.index + this.length] || '';
target.textContent = txt;
target.classList.toggle('collapsing', !txt);
this.index++;
if (+td.textContent == 'А'){
interval=setInterval(plusMil, 10);
}
if (+td.textContent == 'Я'){
clearInterval(interval)
}
}
}
}
let game = new gameTable('АБВГДЕЁЖЗИЙКЛМНОП'.split(''), 3, 4);
document.body.appendChild(game.table);
</script>
</body>
</html>
|
Цитата:
|
игра алфавит
s4meone,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
td{
border: 1px solid hsla(240, 100%, 40%, 1);
height: 45px;
width: 45px;
text-align: center;
font-size: 28px;
transition: 1s;
}
td.collapsing{
transform: scale(0);
}
</style>
</head>
<body>
<script>
class gameTable {
constructor(arr, colls, rows) {
this.colls = colls;
this.rows = rows;
this.length = this.colls * this.rows;
this.index = 0;
this.array = arr;
this.contentTd = this.createContent(this.array, this.length);
this.table = document.createElement('table');
this.createTableHtml();
this.table.addEventListener("click", this.clickHandler.bind(this));
this.time = 0;
}
shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.trunc(Math.random() * i);
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
createContent(array, length) {
let content = [];
for (let i = 0; i < array.length;) {
let temp = array.slice(i, i += length);
temp = this.shuffleArray(temp);
content = content.concat(temp);
}
return content
}
createTableHtml() {
const tHead = this.table.createTHead();
let row = tHead.insertRow();
let cell = row.insertCell();
cell.colSpan = this.colls
cell.textContent = '0.0';
this.timeTd = cell;
this.index = 0;
const tBody = this.table.createTBody();
for (var i = 0; i < this.rows; i++) {
row = tBody.insertRow();
for (var k = 0; k < this.colls; k++) {
cell = row.insertCell();
cell.textContent = this.contentTd[this.index++] || '';
}
}
this.index = 0;
}
clickHandler({target}) {
target = target.closest('td');
if (!target) return;
let txt = target.textContent;
if (txt == this.array[this.index]) {
if (txt == this.array[0]) {
this.interval = setInterval(() => {
this.time += 0.01;
this.timeTd.textContent = (Math.floor(this.time * 100) / 100).toFixed(1);
}, 10);
}
if (txt == this.array[this.array.length - 1]) {
clearInterval(this.interval)
}
txt = this.contentTd[this.index + this.length] || '';
target.textContent = txt;
target.classList.toggle('collapsing', !txt);
this.index++;
}
}
}
let game = new gameTable('АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ'.split(''), 3, 4);
document.body.appendChild(game.table);
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 01:20. |