Witam wszystkich, jestem tu nowy i od razu potrzebuje Waszej pomocy :)
Problem jest w funkcji finish(), po wywołaniu zdarzenia 'click' jest wykonywana pętla i przy drugim kliknięciu zdarzenie wykonuje się dwa razy, przy kolejnym 4, później 8 itd. Zależy mi aby po kliknięciu dane zostały odświeżone a 'click' działał jak na początku, bez obciążenia pamięci.
Jak rozwiązać problem? Będę wdzięczny za sugestie.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>bez nazwy</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.32" />
<link rel="stylesheet" href="main.css">
</head>
<body>
<main>
<article>
<div class="board">
</div>
</article>
</main>
<script src="klocki.js"></script>
</body>
</html>
body
{
margin: 0;
background-color: #26282E;
color: #209781;
font-size: 28px;
}
.board
{
width: 500px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 0; /*usuwa dziwne przerwy między divami card*/
}
.card
{
width: 115px;
height: 115px;
display: inline-block;
margin: 5px;
background: black;
}
.blank
{
background: none;
}
var tablica = [];
var x = 4;
var i, j;
var licznik = 0;
var cardBox = '';
for (i = 0; i < x; i++)
{
tablica[i] = [];
for (j = 0; j < x; j++)
{
tablica[i][j] = licznik++;
cardBox += '<div class="card" id="c' + licznik + '"></div>';
}
}
document.getElementsByClassName('board')[0].innerHTML = cardBox;
var card;
var blankCard;
card = document.getElementsByClassName('card');
card[15].className = 'card blank';
//wyszukanie pustej karty
var moveCard;
function block()
{
blankCard = Number(document.getElementsByClassName('blank')[0].getAttribute('id').replace('c', ''));
moveCard = [];
//alert('blankCard() ' + blankCard.length);
if (blankCard > x)
{
moveCard.push(card[(blankCard - x) - 1]);
card[(blankCard - x) - 1].className = 'card moveDown';
}
if (blankCard % x != 0)
{
moveCard.push(card[(blankCard + 1) - 1]);
card[(blankCard + 1) - 1].className = 'card moveLeft';
}
if (blankCard <= (licznik - x))
{
moveCard.push(card[(blankCard + x) - 1]);
card[(blankCard + x) - 1].className = 'card moveUp';
}
if (blankCard % x != 1)
{
moveCard.push(card[(blankCard - 1) - 1]);
card[(blankCard - 1) - 1].className = 'card moveRight';
}
finish();
}
block();
function finish()
{
for (i = 0; i < moveCard.length; i++)
{
moveCard[i].addEventListener('click', function()
{
//alert('1 ' + i);
for (i = 0; i < card.length; i++)
{
//alert('2 ' + i);
card[i].className = 'card';
}
this.className = 'card blank';
block();
}, false);
}
}