Но у вас здесь даже если открыл совпадающую пару, то числа исчезают все равно
|
Хотя все норм, спасибо__))
|
А почему удаляется класс ок только у первого элемента массива, а второй не трогается?
ar[0].classList.remove("ok"); |
Георгий777,
потому что второй это тот который нажали сейчас, и у него класс удалится через таймер, если в течении секунды не будет найдена пара |
Георгий777,
пост №10, добавлено условие для установки таймера, строка 80 |
игра открыть пару
Георгий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>
|
Не совсем понял строчки ниже
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 ,иначе почему то в первую записываем вторую Вы уж простите за столько вопросов) |
Георгий777,
Если текст первой кликнутой ячейки равен тексту второй то больше не надо хранить то что нажали в прошлый клик. уменьшаем счётчик на 1 , если закончился счётчик добавляем класс "конец игре" если ячейки не равны убираем прошлый выбор, сохраняем новый если с прошлого раза ничего не сохранено, то сохраняем текущий выбор |
https://jsfiddle.net/qcjmt4rk/5/
Здравствуйте, подскажите , пожалуйста , почему в данном коде, не срабатывает управление обьектом через стрелки клавиатуры - может переменная direction не видна в функции move? Пробовал обернуть все в window.onload = function() {}- но вообще все слетело |
Георгий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>
|
| Часовой пояс GMT +3, время: 04:18. |