JS - Kółko i krzyżyk, źle działający kod

Question

Cześć. Naskrobałem sobie w ramach ćwiczeń kółko i krzyżyk w JSsie w opcji na 2 graczy i mój problem polega na tym, że po skończonym meczu i wywołaniu funkcji czyszczącej plansze, kółko jest stawiane samo w miejscu, gdzie został wykonany ostatni ruch poprzedniej gry. Problem występuje tylko w przypadku, gdy zaczyna gracz drugi (kółko). W przypadku, gdy grę zaczyna gracz pierwszy (krzyżyk) to wszystko jest w porządku. Ktoś może domyśla się dlaczego?

Oto kod JS:

var player = 1;

function wypelnij_plansze()
{
	
	/* Czyści planszę */
	
	document.getElementById("game").innerHTML = " ";
	
	/* Wypełnia planszę, pustymi divami */
	for (i = 1; i <= 9; i++)
	{
		document.getElementById("game").innerHTML = document.getElementById("game").innerHTML + 
		'<div id="' + i + '" class="pole" onclick="klick(' + i + ')"> </div>';
		if (i % 3 == 0) document.getElementById("game").innerHTML = document.getElementById("game").innerHTML + '<div style="clear:both"></div>';
	}
}

function klick(a)
{
	
	if (document.getElementById(a).innerHTML == " " & player == 1)
	{		
		document.getElementById(a).innerHTML = "X";
		player = 2;
		koniec();
	}
	if (document.getElementById(a).innerHTML == " " & player == 2)
	{
		document.getElementById(a).innerHTML = "O";
		player = 1;
		koniec();
	}
}

function koniec()
{
	var koniec = true;
	var zwyciezca = 0;
	/*sprawdza, czy wszystkie pola są wypełnione */
	for (i = 1; i <= 9; i++)
	{
		if (document.getElementById(i).innerHTML == " ") koniec = false;
	}
	
	/* sprawdza, czy nie jest spełniony warunek zwycięztwa*/	
	for (i = 0; i <= 2; i++)
	{
		/* sprawdza w poziomie */
		var x = i *  3 + 1;
		if(document.getElementById(x).innerHTML == document.getElementById(x+1).innerHTML & document.getElementById(x).innerHTML == document.getElementById(x+2).innerHTML & document.getElementById(x).innerHTML != " ")
		{
			koniec = true;
			if (document.getElementById(x).innerHTML == "X") zwyciezca = 1;
			if (document.getElementById(x).innerHTML == "O") zwyciezca = 2;	
		}
		/*sprawdza w pionie */
		var o = i + 1;
		if(document.getElementById(o).innerHTML == document.getElementById(o+3).innerHTML & document.getElementById(o).innerHTML == document.getElementById(o+6).innerHTML & document.getElementById(o).innerHTML != " ")
		{
			koniec = true;
			if (document.getElementById(o).innerHTML == "X") zwyciezca = 1;
			if (document.getElementById(o).innerHTML == "O") zwyciezca = 2;	
		}
	}
	/* sprawdza w skosie */
	if (document.getElementById("5").innerHTML == document.getElementById("1").innerHTML & document.getElementById("5").innerHTML == document.getElementById("9").innerHTML & document.getElementById(5).innerHTML != " ")
	{
		koniec = true;
		if (document.getElementById("5").innerHTML == "X") zwyciezca = 1;
		if (document.getElementById("5").innerHTML == "O") zwyciezca = 2;
	}
	if (document.getElementById("5").innerHTML == document.getElementById("3").innerHTML & document.getElementById("5").innerHTML == document.getElementById("7").innerHTML & document.getElementById(5).innerHTML != " ")
	{
		koniec = true;
		if (document.getElementById("5").innerHTML == "X") zwyciezca = 1;
		if (document.getElementById("5").innerHTML == "O") zwyciezca = 2;
	}
	
	if (koniec)
	{
		if (zwyciezca == 0) alert("REMIS!");
		else if (zwyciezca == 1) alert("Zwycięża gracz 1 (X)");
		else if (zwyciezca == 2) alert("Zwycięża gracz 2 (O)");
		
		wypelnij_plansze();
	}
}


function start()
{
	wypelnij_plansze();
}

window.onload = start;

 

plik html zawiera tylko jednego diva o id="game".

Answer 1

Prawdę mówiąc dziwię się, że to wgl działa, gdyż pomylileś operatory. Operator & to bitowe i. Normalne i, czyli te, którego potrzebujesz, to &&

Answer 2

W funkcji klick, w linijce 28 dodaj else przed if'em:
 

function klick(a)
{
     
    if (document.getElementById(a).innerHTML == " " && player == 1)
    {       
        document.getElementById(a).innerHTML = "X";
        player = 2;
        koniec();
    }
    else if (document.getElementById(a).innerHTML == " " && player == 2)
    {
        document.getElementById(a).innerHTML = "O";
        player = 1;
        koniec();
    }
}

 

Comments

jak zrobiłeś to zaznaczenie??

---

Dodajesz kod przez: "Add or update a code snippet". W okienku, które Ci się wyświetli zmieniasz zakładkę na "Advanced" i w polu "Highlight lines" wpisujesz numery linii po przecinku, które mają zostać wyróżnione.

---

ooo... dzięki wielkie :)