Javascript-форум - Cтранное поведение

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Ваши сайты и скрипты (https://javascript.ru/forum/project/)

- - Cтранное поведение (https://javascript.ru/forum/project/72315-ctrannoe-povedenie.html)

Георгий777

21.01.2018 13:27

Cтранное поведение

Здравствуйте, подскажите, пожалуйста, почему в коде по ссылке ниже

https://jsfiddle.net/85uL4hq4/

в 8й строчке скрипта - span.style.opacity = 0 - выдается ошибка:

scripts.js:8 Uncaught TypeError: Cannot set property 'opacity' of undefined
at scripts.js:8

рони	21.01.2018 13:59

Георгий777,
используйте обычный for и будет вам счастье

Георгий777

21.01.2018 14:13

да, спасибо большое, но все-таки странно, что так не работает)

рони	21.01.2018 14:24

Георгий777,
вы перечислили все свойства обьекта, в том числе длину, у длины нет свойства style

Георгий777

21.01.2018 14:54

А подскажите, пожалуйста, почему не выводится содержимое массива ar
по этой же ссылке в скрите на 28й строчке во втором цикле for при попытке вывести в консоль

https://jsfiddle.net/85uL4hq4/1/

рони	21.01.2018 15:08

Георгий777,
строка 4 arLength = 0 , поэтому нет никакого цикла в строке 24

рони	21.01.2018 15:08

Георгий777,
что хотите сделать?

Георгий777

21.01.2018 15:33

В строке 21 в массив записывается 2 элемента , которые выводятся , если на 23й строке прописать console.log(ar);

А в целом хочу, кликая на любых двух ячейках,если значение их равны, то оставляю эти значения на экране, иначе вновь скрываю их

Георгий777

21.01.2018 15:58

в чем тут может быть дело?

рони	21.01.2018 18:44

игра открыть пару

Георгий777,

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Grid</title>
        <style type="text/css">
.output {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 603px;
  margin: 50px auto;
}

.inner {
  display: flex;
  flex-basis: 150px;
  height: 80px;
  background: #ccc;
  border: 1px solid gray;
  text-align: center;
  line-height: 80px;
}

.inner:hover {
  cursor: pointer;
}

.inner span {
   font-size: 48px;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: 1s;
}

.inner.ok span {
  transition: .4s;
  opacity: 1;
}



        </style>
    </head>
    <body>
        <div class="output">
      <div class="inner"><span>1</span></div>
      <div class="inner"><span>3</span></div>
      <div class="inner"><span>9</span></div>
      <div class="inner"><span>5</span></div>
      <div class="inner"><span>4</span></div>
      <div class="inner"><span>1</span></div>
      <div class="inner"><span>3</span></div>
      <div class="inner"><span>8</span></div>
      <div class="inner"><span>9</span></div>
      <div class="inner"><span>5</span></div>
      <div class="inner"><span>4</span></div>
      <div class="inner"><span>8</span></div>
    </div>
<script>
var ar = [], timer, duration = 1000;
[].forEach.call(document.querySelectorAll(".inner"), function(item) {
  item.addEventListener("click", function() {
    if (item.classList.contains("ok")) {
      return;
    }
    window.clearTimeout(timer);
    item.classList.add("ok");
    ar.push(item);
    if (ar.length == 2) {
      if (ar[0].textContent == ar[1].textContent) {
        ar = [];
      } else {
        ar[0].classList.remove("ok");
        ar = [item];
      }
    }
if(ar.length)  timer = window.setTimeout(function() {
      ar[0].classList.remove("ok");
      ar = [];
    }, duration);
  });
});
</script>
    </body>
</html>

Георгий777

21.01.2018 18:56

Но у вас здесь даже если открыл совпадающую пару, то числа исчезают все равно

Георгий777

21.01.2018 19:04

Хотя все норм, спасибо__))

Георгий777

21.01.2018 19:52

А почему удаляется класс ок только у первого элемента массива, а второй не трогается?

ar[0].classList.remove("ok");

рони	21.01.2018 20:20

Георгий777,
потому что второй это тот который нажали сейчас, и у него класс удалится через таймер, если в течении секунды не будет найдена пара

рони	21.01.2018 20:27

Георгий777,
пост №10, добавлено условие для установки таймера, строка 80

рони	21.01.2018 20:45

игра открыть пару

Георгий777,
убрал массив ... достаточно одной переменной, плюс индикация окончания игры.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Grid</title>
        <style type="text/css">
.output {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 603px;
  margin: 50px auto;
}

.inner {
  display: flex;
  flex-basis: 150px;
  height: 80px;
  background-color: #ccc;
  border: 1px solid gray;
  text-align: center;
  line-height: 80px;
  transition: 1s;
}

.inner:hover {
  cursor: pointer;
}

.inner span {
  font-size: 48px;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: 1s;
}

.inner.ok span {
  transition: .4s;
  opacity: 1;
}

.output.end .inner{
  background-color: #0000CD;
  color: #FFFFFF;
}

        </style>
    </head>
    <body>
        <div class="output">
      <div class="inner"><span>1</span></div>
      <div class="inner"><span>3</span></div>
      <div class="inner"><span>9</span></div>
      <div class="inner"><span>5</span></div>
      <div class="inner"><span>4</span></div>
      <div class="inner"><span>1</span></div>
      <div class="inner"><span>3</span></div>
      <div class="inner"><span>8</span></div>
      <div class="inner"><span>9</span></div>
      <div class="inner"><span>5</span></div>
      <div class="inner"><span>4</span></div>
      <div class="inner"><span>8</span></div>
    </div>
<script>
var elem, timer, duration = 1000, div = document.querySelectorAll(".inner"), len = div.length/2;
[].forEach.call(div, function(item) {
  item.addEventListener("click", function() {
    if (item.classList.contains("ok")) {
      return;
    }
    window.clearTimeout(timer);
    item.classList.add("ok");
    if (elem) {
      if (elem.textContent == item.textContent) {
        elem = null;
        --len || document.querySelector(".output").classList.add("end");

      } else {
        elem.classList.remove("ok");
        elem = item;
      }
    }
   else elem = item;
   if(elem) timer = window.setTimeout(function() {
     elem.classList.remove("ok");
     elem = null;
    }, duration);
  });
});
</script>
    </body>
</html>

Георгий777

21.01.2018 23:02

Не совсем понял строчки ниже

if (elem) {

if (elem.textContent == item.textContent) {
elem = null;
--len || document.querySelector(".output").classList.add("e nd");

} else {
elem.classList.remove("ok");
elem = item;
}
}
else elem = item;

Если текст первой кликнутой ячейки равен тексту второй, то первую удаляем и почему то заканчиваем игру, судя по добавлению класса .end
,иначе почему то в первую записываем вторую

Вы уж простите за столько вопросов)

рони	21.01.2018 23:16

Георгий777,
Если текст первой кликнутой ячейки равен тексту второй то больше не надо хранить то что нажали в прошлый клик.
уменьшаем счётчик на 1 , если закончился счётчик добавляем класс "конец игре"
если ячейки не равны убираем прошлый выбор, сохраняем новый
если с прошлого раза ничего не сохранено, то сохраняем текущий выбор

Георгий777

25.01.2018 12:04

https://jsfiddle.net/qcjmt4rk/5/

Здравствуйте, подскажите , пожалуйста , почему в данном коде, не срабатывает управление обьектом через стрелки клавиатуры - может переменная direction не видна в функции move?
Пробовал обернуть все в window.onload = function() {}- но вообще все слетело

рони	25.01.2018 13:09

Георгий777,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
#output {

  width:400px;
  height:400px;
  border-top: 1px solid gray;
  border-left: 1px solid gray;

}

.inner {
  border-bottom: 1px solid gray;
  border-right: 1px solid gray;
  width:19px;
  height:19px;
  float: left;
}
  </style>


</head>

<body>
<div id="output"></div>
<script>
     "use strict"
let fields = 20 * 20, i, div, x = 0, direction = 'right', ar = [];

function createMatrix() {
  let output = document.getElementById('output');

  for(i = 0; i < fields; i+=1) {
    div =  document.createElement('div');
    div.className = 'inner';
    output.appendChild(div);
  }
}

createMatrix();

function setCell(num, val) {
  let output = document.getElementById('output');
  let cell = output.children[num];

  if(val)
  	cell.style.backgroundColor = 'red';
  else
  	cell.style.backgroundColor = 'transparent';
}

//setCell(0, true);

function move() {

  setCell(x, false);

  switch (direction) {
  	case 'right': x++; break;
    case 'left': x--; break;
    case 'up': x -= 20; break;
    case 'down': x += 20; break;
  }
  if(x < 0) x = 0;
  if(x >= fields) x =  fields - 1;
  setCell(x, true);
}

setInterval(move,1000);

document.onkeydown = function(e) {

  switch (e.keyCode) {

  	case 37: direction = 'left';break;
    case 38: direction = 'up';break;
    case 39: direction = 'right';break;
    case 40: direction = 'down';break;
  }
}



  </script>
</body>
</html>

рони	25.01.2018 13:14

Цитата:

Сообщение от Георгий777

не срабатывает управление обьектом

не было break; в onkeydown и установки x (строки 66, 67)

ограничение x , нужно ещё доработать (строки 69, 70)

Георгий777

26.01.2018 00:02

Спасибо большое)

А подскажите, что я делаю не так в функции move при сравнении на равенство переменных х и у, отвечающих за змейку и еду соответственно?

Как увеличить змейку на 1 квадратик, при поедании еды?

Георгий777

26.01.2018 00:02

https://jsfiddle.net/85uL4hq4/13/ - ссылку забыл)

рони	26.01.2018 10:04

Георгий777,
массив клеток делать ...

Георгий777

26.01.2018 18:22

Пытался-не получилось

<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#output {

width:400px;
height:400px;
border-top: 1px solid gray;
border-left: 1px solid gray;

}

.inner {
border-bottom: 1px solid gray;
border-right: 1px solid gray;
width:19px;
height:19px;
float: left;
}
</style>

</head>

<body>
<div id="output"></div>
<script>
"use strict"
let fields = 20 * 20, min = 1, max = 400, i, div, x = 0, y = 0, flag = false, direction = 'right', ar = [];

function createMatrix() {
let output = document.getElementById('output');

for(i = 0; i < fields; i+=1) {
div = document.createElement('div');
div.className = 'inner';
output.appendChild(div);
ar.push(div);
}

}

createMatrix();

function setCell(num, val, eat) {
let output = document.getElementById('output');
let cell = output.children[num];

if(val)
cell.style.backgroundColor = 'red';
else
cell.style.backgroundColor = 'transparent';
if(eat)
cell.style.backgroundColor = 'green';
}

function getCell(num) {
return num;
}

//setCell(0, true);

function move() {

for(i = 0; i < fields; i+=1) {
ar[i] = 0;
setCell(ar[i], false);

switch (direction) {
case 'right': ar[i] = ar[i+1]; break;
case 'left': ar[i] = ar[i-1]; break;
//case 'up': x -= 20; break;
//case 'down': x += 20; break;
}

if(ar[i] < 0) ar[i] = 0;
if(ar[i] >= fields) ar[i] = fields - 1;

if(ar[i] == y) {
setCell(ar[i], true);
setCell(ar[i+1], true);
}
else setCell(ar[i], true);
}

}

function generateEat(min, max) {

y = Math.floor(Math.random() * (max - min) + min);
setCell(y, false, true);
return y;
}

setInterval(move,500);

setInterval(generateEat(min,max),500);

document.onkeydown = function(e) {

switch (e.keyCode) {

case 37: direction = 'left';break;
case 38: direction = 'up';break;
case 39: direction = 'right';break;
case 40: direction = 'down';break;
}
}

</script>
</body>
</html>

рони	26.01.2018 18:26

Георгий777,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Георгий777

26.01.2018 18:27

https://jsfiddle.net/qcjmt4rk/17/

рони	26.01.2018 18:38

Георгий777,
:-?

рони	26.01.2018 18:41

Георгий777,
пост №25 кнопка РЕД.

[HTML run]код вашей страницы[/HTML]

Георгий777

26.01.2018 18:42

Простите, не понял ваше последнее смс

рони	26.01.2018 18:48

Георгий777,
отредактируйте своё сообщение в пост №25 , так чтоб его можно было скопировать, запустить или указать строку.
смотрите для примера, как выглядит сообщение №20

рони	26.01.2018 18:51

Георгий777,
вам удобнее https://jsfiddle.net, но мне тут на форуме, быстрее возможность ответить.

Георгий777

26.01.2018 19:02

Да вроде там у меня все внутри нужных тегов, я просто скопировал из jsfiddle, из которого до этого вам присылал, ну ок еще раз скину

<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#output {

width:400px;
height:400px;
border-top: 1px solid gray;
border-left: 1px solid gray;

}

.inner {
border-bottom: 1px solid gray;
border-right: 1px solid gray;
width:19px;
height:19px;
float: left;
}
</style>
</head>

<body>
<div id="output"></div>
<script>
"use strict"
let fields = 20 * 20, min = 1, max = 400, i, div, x = 0, y = 0, flag = false, direction = 'right', ar = [];

function createMatrix() {
let output = document.getElementById('output');

for(i = 0; i < fields; i+=1) {
div = document.createElement('div');
div.className = 'inner';
output.appendChild(div);
ar.push(div);
}

}

createMatrix();

function setCell(num, val, eat) {
let output = document.getElementById('output');
let cell = output.children[num];

if(val)
cell.style.backgroundColor = 'red';
else
cell.style.backgroundColor = 'transparent';
if(eat)
cell.style.backgroundColor = 'green';
}

function getCell(num) {
return num;
}

//setCell(0, true);

function move() {

for(i = 0; i < fields; i+=1) {
ar[i] = 0;
setCell(ar[i], false);

switch (direction) {
case 'right': ar[i] = ar[i+1]; break;
case 'left': ar[i] = ar[i-1]; break;
//case 'up': x -= 20; break;
//case 'down': x += 20; break;
}

if(ar[i] < 0) ar[i] = 0;
if(ar[i] >= fields) ar[i] = fields - 1;

if(ar[i] == y) {
setCell(ar[i], true);
setCell(ar[i+1], true);
}
else setCell(ar[i], true);
}

}

function generateEat(min, max) {

y = Math.floor(Math.random() * (max - min) + min);
setCell(y, false, true);
return y;
}

setInterval(move,500);

setInterval(generateEat(min,max),500);

document.onkeydown = function(e) {

switch (e.keyCode) {

case 37: direction = 'left';break;
case 38: direction = 'up';break;
case 39: direction = 'right';break;
case 40: direction = 'down';break;
}
}

</script>
</body>
</html>

рони	26.01.2018 19:26

Георгий777,
вы кнопки когда пишите сообщение видите ?

теги форматирования в квадратных скобках.

рони	26.01.2018 19:28

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

Георгий777

26.01.2018 20:09

Простите, ради Бога, но про какие вы кнопки говорите? Я присылал и писал код также , как и до этого Вам и все заключал в теги
Уже проще на fiddle Вам посмотреть

рони	26.01.2018 20:19

Георгий777,
... не знаю даже что сказать, элементарное требование форума привести сообщение в удобочитаемый вид ... вам сложно осилить форум, а мне fiddle

Георгий777

26.01.2018 20:30

Вроде исправил

<head>

[style type="text/css">]
#output {

width:400px;
height:400px;
border-top: 1px solid gray;
border-left: 1px solid gray;

}

.inner {
border-bottom: 1px solid gray;
border-right: 1px solid gray;
width:19px;
height:19px;
float: left;
}
[/style>]
</head>

<body>
<div id="output"></div>
[script]
"use strict"
let fields = 20 * 20, min = 1, max = 400, i, div, x = 0, y = 0, flag = false, direction = 'right', ar = [];

function createMatrix() {
let output = document.getElementById('output');

for(i = 0; i < fields; i+=1) {
div = document.createElement('div');
div.className = 'inner';
output.appendChild(div);
ar.push(div);
}

}

createMatrix();

function setCell(num, val, eat) {
let output = document.getElementById('output');
let cell = output.children[num];

if(val)
cell.style.backgroundColor = 'red';
else
cell.style.backgroundColor = 'transparent';
if(eat)
cell.style.backgroundColor = 'green';
}

function getCell(num) {
return num;
}

//setCell(0, true);

function move() {

for(i = 0; i < fields; i+=1) {
ar[i] = 0;
setCell(ar[i], false);

switch (direction) {
case 'right': ar[i] = ar[i+1]; break;
case 'left': ar[i] = ar[i-1]; break;
//case 'up': x -= 20; break;
//case 'down': x += 20; break;
}

if(ar[i] < 0) ar[i] = 0;
if(ar[i] >= fields) ar[i] = fields - 1;

if(ar[i] == y) {
setCell(ar[i], true);
setCell(ar[i+1], true);
}
else setCell(ar[i], true);
} 

}

function generateEat(min, max) {

y = Math.floor(Math.random() * (max - min) + min);
setCell(y, false, true);
return y;
}

setInterval(move,500);

setInterval(generateEat(min,max),500);



document.onkeydown = function(e) {

switch (e.keyCode) {

case 37: direction = 'left';break;
case 38: direction = 'up';break;
case 39: direction = 'right';break;
case 40: direction = 'down';break;
}
}

[/script]
</body>

рони	26.01.2018 20:58

Георгий777,
ура

рони	26.01.2018 20:59

Георгий777,
только один тег нужен

[HTML run]код вашей страницы[/HTML]

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

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице