Witam !
Jestem w trakcie tworzenia gry kółko i krzyżyk, jednak utknąłem w martwym punkcie. Przypisuje w kodzie kolejne numery id do poszczególnych pól tabeli, jednak nie jestem w stanie nic z tym zrobić. Chciałbym aby po naciśnięciu na poszczególne pole, zmieniała się jego wartość i pokazał się obrazek/napis adekwatny do tury gracza
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Kółko vs. Krzyżyk </title>
</head>
<body>
<center>
<h1>
<span id="napis1">Kółko</span> <span id="napis2">vs.</span> <span id="napis3">Krzyżyk</span>
</h1>
</br>
<h2>Kto następny: </h2>
<p id="kto">.</p>
<script type="text/javascript">
id_pola = 0; // tu jest zmienna ktora podczas rysowania tableli daje kolejne numery id polom
var czyja_kolej = 1;
// 1 to Kółko, a 2 to Krzyżyk
var tablica_id =[]; //przechowuje numery id poszczególnych pól
// wczytywanie i rysowanie tabeli
document.write("<table>");
for (i = 1; i <= 3; i++) {
document.write("<tr>");
for (y = 1; y <= 3; y++) {
tablica_id[y]=id_pola;
id_pola++; // kolejne pole ma numer id piększy o 1 od poprzedniego
document.write("<td id="+id_pola+" onClick=\"ruch("+id_pola+");\">"+id_pola+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
function ruch(id_pola) //czyja kolej
{
if (czyja_kolej == 1)
{
alert("kółko");
czyja_kolej = 2;
document.getElementById('id_pola').innerHTML = "<img src='kółko.png' alt='kółko'>";
alert(id_pola);
document.getElementById('kto').innerHTML = "krzyżyk";
}
else
{
alert("krzyżyk");
czyja_kolej = 1;
document.getElementById('id_pola').innerHTML = "krzyżyk";
document.getElementById('kto').innerHTML = "kółko";
}
}
function sprawdzenie() //sprawdzenie czy nie ma końca gry
{
}
</script>
</center>
</body>
</html>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: rgb(50, 50, 54);
}
table {
border: 2px solid;
width: 50%;
height: 50%;
margin: 10%;
border-collapse: collapse;
background-color: rgb(202, 208, 191);
}
td, tr {
border: 5px solid;
text-align: center;
border-color: rgb(237, 237, 237);
color: black;
}
h1 {
text-align: center;
background-color: rgb(43, 46, 43);
height: 10%;
font-size: 400%;
}
#napis1 {
color: rgb(47, 103, 210);
}
#napis2 {
color: white;
}
#napis3 {
color: rgb(193, 49, 35);
}
#kto {
color: white;
}
h2 {
color: rgb(118, 69, 167);
background-color: rgb(43, 46, 43);
}
Prosił bym także o jakieś podpowiedzi co należy zrobić aby wszystko działało :)
