Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 21.01.2018, 18:56
Аспирант
Отправить личное сообщение для Георгий777 Посмотреть профиль Найти все сообщения от Георгий777
 
Регистрация: 23.01.2017
Сообщений: 35

Но у вас здесь даже если открыл совпадающую пару, то числа исчезают все равно
Ответить с цитированием
  #12 (permalink)  
Старый 21.01.2018, 19:04
Аспирант
Отправить личное сообщение для Георгий777 Посмотреть профиль Найти все сообщения от Георгий777
 
Регистрация: 23.01.2017
Сообщений: 35

Хотя все норм, спасибо__))
Ответить с цитированием
  #13 (permalink)  
Старый 21.01.2018, 19:52
Аспирант
Отправить личное сообщение для Георгий777 Посмотреть профиль Найти все сообщения от Георгий777
 
Регистрация: 23.01.2017
Сообщений: 35

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

ar[0].classList.remove("ok");
Ответить с цитированием
  #14 (permalink)  
Старый 21.01.2018, 20:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Георгий777,
потому что второй это тот который нажали сейчас, и у него класс удалится через таймер, если в течении секунды не будет найдена пара
Ответить с цитированием
  #15 (permalink)  
Старый 21.01.2018, 20:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Георгий777,
пост №10, добавлено условие для установки таймера, строка 80
Ответить с цитированием
  #16 (permalink)  
Старый 21.01.2018, 20:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

игра открыть пару
Георгий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>

Последний раз редактировалось рони, 18.05.2019 в 18:58.
Ответить с цитированием
  #17 (permalink)  
Старый 21.01.2018, 23:02
Аспирант
Отправить личное сообщение для Георгий777 Посмотреть профиль Найти все сообщения от Георгий777
 
Регистрация: 23.01.2017
Сообщений: 35

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

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
,иначе почему то в первую записываем вторую

Вы уж простите за столько вопросов)
Ответить с цитированием
  #18 (permalink)  
Старый 21.01.2018, 23:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Георгий777,
Если текст первой кликнутой ячейки равен тексту второй то больше не надо хранить то что нажали в прошлый клик.
уменьшаем счётчик на 1 , если закончился счётчик добавляем класс "конец игре"
если ячейки не равны убираем прошлый выбор, сохраняем новый
если с прошлого раза ничего не сохранено, то сохраняем текущий выбор
Ответить с цитированием
  #19 (permalink)  
Старый 25.01.2018, 12:04
Аспирант
Отправить личное сообщение для Георгий777 Посмотреть профиль Найти все сообщения от Георгий777
 
Регистрация: 23.01.2017
Сообщений: 35

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

Здравствуйте, подскажите , пожалуйста , почему в данном коде, не срабатывает управление обьектом через стрелки клавиатуры - может переменная direction не видна в функции move?
Пробовал обернуть все в window.onload = function() {}- но вообще все слетело
Ответить с цитированием
  #20 (permalink)  
Старый 25.01.2018, 13:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Георгий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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как обойти стандартное поведение blur? billi Events/DOM/Window 10 01.10.2014 12:22
Странное поведение jQuery borodatych Javascript под браузер 5 27.02.2014 11:47
Непонятное поведение в Chrome main.c Opera, Safari и др. 3 10.10.2013 18:52
Странное поведение переменной mycoding Серверные языки и технологии 4 14.01.2011 19:18
Cтранное поведение viktod Общие вопросы Javascript 23 10.04.2010 00:37