Форум

djekokma · #1 (**permalink**) 22.11.2018, 12:29

Добрый день. Пытаюсь написать крестики-нолики. Не могу понять: почему не работает присвоение "Х" или "0" при четном-нечетном ходу в if-else.
Очень прошу помощи у знатоков. Спасибо.
<!DOCTYPE>
<html>
<head>
<title>Крестики-нолики</title>
<meta charset="utf-8">
</head>
<body>

<form>
<table height="" width="" border="0">
<tr>
<td> <input type="button" name="b1" value="" onclick="event_b1(form)"> </td>
<td> <input type="button" name="b2" value="" onclick="event_b2(form)"> </td>
<td> <input type="button" name="b3"value="" onclick="event_b3(form)"> </td>
</tr>
<tr>
<td><input type="button" name="b4"value="" onclick="event_b4(form)"></td>
<td><input type="button" name="b5"value="" onclick="event_b5(form)"></td>
<td><input type="button" name="b6"value="" onclick="event_b6(form)"></td>
</tr>
<tr>
<td><input type="button" name="b7"value="" onclick="event_b7(form)"></td>
<td><input type="button" name="b8"value="" onclick="event_b8(form)"></td>
<td><input type="button" name="b9"value="" onclick="event_b9(form)"></td>
</tr>
</table>
</form>

<script>
var hod = 0;
function event_b1 (form){
if (hod%2 == 0){
form.b1.value = "X";
} else {
form.b1.value = "0";
}
}
hod++;
function event_b2 (form){
if (hod%2 == 0){
form.b2.value = "X";
} else {
form.b2.value = "0";
}
}
hod++;
function event_b3 (form){
if (hod%2 == 0){
form.b3.value = "X";
} else {
form.b3.value = "0";
}
}
hod++;
function event_b4 (form){
if (hod%2 == 0){
form.b4.value = "X";
} else {
form.b4.value = "0";
}
}
hod++;
function event_b5 (form){
if (hod%2 == 0){
form.b5.value = "X";
} else {
form.b5.value = "0";
}
}
hod++;
function event_b6 (form){
if (hod%2 == 0){
form.b6.value = "X";
} else {
form.b6.value = "0";
}
}
hod++;
function event_b7 (form){
if (hod%2 == 0){
form.b7.value = "X";
} else {
form.b7.value = "0";
}
}
hod++;
function event_b8 (form){
if (hod%2 == 0){
form.b8.value = "X";
} else {
form.b8.value = "0";
}
}
hod++;
function event_b9 (form){
if (hod%2 == 0){
form.b9.value = "X";
} else {
form.b9.value = "0";
}
}
</script>
</body>
</html>

рони · #2 (**permalink**) 22.11.2018, 13:00

djekokma,
код бред какой-то ...
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html]
... ваш код...
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 22.11.2018, 13:09

djekokma,

<!DOCTYPE>
 <html>
 <head>
<title>Крестики-нолики</title>
<meta charset="utf-8">
 </head>
 <body>

 <form>
<table height="" width="" border="0">
<tr>
<td> <input type="button" name="b1" value="" onclick="event_b1(this)"> </td>
<td> <input type="button" name="b2" value="" onclick="event_b1(this)"> </td>
<td> <input type="button" name="b3"value="" onclick="event_b1(this)"> </td>
</tr>
<tr>
<td><input type="button" name="b4"value="" onclick="event_b1(this)"></td>
<td><input type="button" name="b5"value="" onclick="event_b1(this)"></td>
<td><input type="button" name="b6"value="" onclick="event_b1(this)"></td>
</tr>
<tr>
<td><input type="button" name="b7"value="" onclick="event_b1(this)"></td>
<td><input type="button" name="b8"value="" onclick="event_b1(this)"></td>
<td><input type="button" name="b9"value="" onclick="event_b1(this)"></td>
</tr>
</table>
 </form>

 <script>
var hod = 0;
function event_b1 (button){
if(button.value) return;
button.value = hod++ % 2  ? "0" : "X";
}
</script>
 </body>
 </html>

djekokma · #4 (**permalink**) 22.11.2018, 13:26

Спасибо, Рони. Но не работает. По клику ячейки остаются пустыми.

djekokma · #5 (**permalink**) 22.11.2018, 13:32

Извиняюсь. Все работает. Большущее спасибо за помощь.

Dilettante_Pro · #6 (**permalink**) 22.11.2018, 13:57

<!DOCTYPE>
<html>
<head>
<title>Крестики-нолики</title>
<meta charset="utf-8">
<style>
td {
   width:25px;
   height:25px;
   text-align:center;
   background-color:lightgray;
}
</style>
</head>
<body>

<table  border="1">
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
</table> 


<script>
var hod = 0;
document.querySelector('table').onclick = function(e) {
   if(e.target.nodeName == 'TD') {
       if (hod%2 == 0){
           e.target.innerText = "X";
       } else {
           e.target.innerText = "0";
       }
       hod++;
   }
}
</script>
</body>
</html>

djekokma · #7 (**permalink**) 22.11.2018, 14:05

Спасибо

djekokma · #8 (**permalink**) 25.11.2018, 18:18

Добрый день. Не могу придумать функцию по определению выигравшего Х или 0. Прошу помощи.

<!DOCTYPE>
<html>
<head>
  <title>Крестики-нолики</title>
  <meta charset="utf-8">
</head>
<body>

<form>
  <table height="" width="" border="0">
    <tr>
      <td> <input type="button" name="b1" value="" onclick="event_b1(this)"> </td>
      <td> <input type="button" name="b2" value="" onclick="event_b1(this)"> </td>
      <td> <input type="button" name="b3"value="" onclick="event_b1(this)"> </td>
    </tr>
    <tr>
      <td><input type="button" name="b4"value="" onclick="event_b1(this)"></td>
      <td><input type="button" name="b5"value="" onclick="event_b1(this)"></td>
      <td><input type="button" name="b6"value="" onclick="event_b1(this)"></td>
    </tr>
    <tr>
      <td><input type="button" name="b7"value="" onclick="event_b1(this)"></td>
      <td><input type="button" name="b8"value="" onclick="event_b1(this)"></td>
      <td><input type="button" name="b9"value="" onclick="event_b1(this)"></td>
    </tr>    
  </table> 
</form>

<script>


let hod = 0;
function event_b1 (button){
if(button.value) return;
button.value = hod++ % 2  ? "0" : "X";
}
 
function winning(){
  if (button.b1.value == "X" && button.b2.value == "X" && button.b3.value == "X"||button.b4.value == "X" && button.b5.value == "X" && button.b6.value == "X"||button.b7.value == "X" && button.b8.value == "X" && button.b9.value == "X"||button.b1.value == "X" && button.b5.value == "X" && button.b9.value == "X"||button.b2.value == "X" && button.b5.value == "X" && button.b8.value == "X"||button.b3.value == "X" && button.b6.value == "X" && button.b9.value == "X"||button.b3.value == "X" && button.b5.value == "X" && button.b7.value == "X")
    {alert("Выиграли X");}
    else
      {button.b1.value == "0" && button.b2.value == "0" && button.b3.value == "0"||button.b4.value == "0" && button.b5.value == "0" && button.b6.value == "0"||button.b7.value == "0" && button.b8.value == "0" && button.b9.value == "0"||button.b1.value == "0" && button.b5.value == "0" && button.b9.value == "0"||button.b2.value == "0" && button.b5.value == "0" && button.b8.value == "0"||button.b3.value == "0" && button.b6.value == "0" && button.b9.value == "0"||button.b3.value == "0" && button.b5.value == "0" && button.b7.value == "0"
    }
    {alert("Выиграли 0");}
</script>
</body>
</html>

рони · #9 (**permalink**) 25.11.2018, 18:41

djekokma,
чтобы так писать путь к элементу button.b1 должна быть форма с именем button (строка 9)

<!DOCTYPE>
<html>
<head>
    <title>Крестики-нолики</title>
    <meta charset="utf-8">
</head>
<body>

<form name="button">
    <table height="" width="" border="0">
        <tr>
            <td> <input type="button" name="b1" value="" onclick="event_b1(this)"> </td>
            <td> <input type="button" name="b2" value="" onclick="event_b1(this)"> </td>
            <td> <input type="button" name="b3"value="" onclick="event_b1(this)"> </td>
        </tr>
        <tr>
            <td><input type="button" name="b4"value="" onclick="event_b1(this)"></td>
            <td><input type="button" name="b5"value="" onclick="event_b1(this)"></td>
            <td><input type="button" name="b6"value="" onclick="event_b1(this)"></td>
        </tr>
        <tr>
            <td><input type="button" name="b7"value="" onclick="event_b1(this)"></td>
            <td><input type="button" name="b8"value="" onclick="event_b1(this)"></td>
            <td><input type="button" name="b9"value="" onclick="event_b1(this)"></td>
        </tr>
    </table>
</form>

<script>
var hod = 0;

function event_b1(button) {
    if (button.value) return;
    button.value = hod++ % 2 ? "0" : "X";
    winning()
}

function winning() {
    if (button.b1.value == "X" && button.b2.value == "X" && button.b3.value == "X" || button.b4.value == "X" && button.b5.value == "X" && button.b6.value == "X" || button.b7.value == "X" && button.b8.value == "X" && button.b9.value == "X" || button.b1.value == "X" && button.b5.value == "X" && button.b9.value == "X" || button.b2.value == "X" && button.b5.value == "X" && button.b8.value == "X" || button.b3.value == "X" && button.b6.value == "X" && button.b9.value == "X" || button.b3.value == "X" && button.b5.value == "X" && button.b7.value == "X") alert("Выиграли X");
    else if (button.b1.value == "0" && button.b2.value == "0" && button.b3.value == "0" || button.b4.value == "0" && button.b5.value == "0" && button.b6.value == "0" || button.b7.value == "0" && button.b8.value == "0" && button.b9.value == "0" || button.b1.value == "0" && button.b5.value == "0" && button.b9.value == "0" || button.b2.value == "0" && button.b5.value == "0" && button.b8.value == "0" || button.b3.value == "0" && button.b6.value == "0" && button.b9.value == "0" || button.b3.value == "0" && button.b5.value == "0" && button.b7.value == "0") alert("Выиграли 0")
};

</script>
</body>
</html>

j0hnik · #10 (**permalink**) 25.11.2018, 18:44

<!DOCTYPE>
<html>
<head>
	<title>Крестики-нолики</title>
	<meta charset="utf-8">
</head>
<body>

	<form>
		<table height="" width="" border="0">
			<tr>
				<td> <input type="button" name="b1"> </td>
				<td> <input type="button" name="b2"> </td>
				<td> <input type="button" name="b3"> </td>
			</tr>
			<tr>
				<td><input type="button" name="b4"></td>
				<td><input type="button" name="b5"></td>
				<td><input type="button" name="b6"></td>
			</tr>
			<tr>
				<td><input type="button" name="b7"></td>
				<td><input type="button" name="b8"></td>
				<td><input type="button" name="b9"></td>
			</tr>    
		</table> 
	</form>

	<script>


		let hod = 0, 
		pol = document.querySelectorAll('input[type="button"]'),
		arrX=[],
		arrO=[],
		win=(a)=>[[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]].find(el=>el.every((el)=>a.includes(el)));

		pol.forEach((el,n)=> el.onclick = e =>{
			el.value = hod++ % 2  ? "0" : "X";
			el.value !== ''&& (el.value == 'X'?arrX.push(n):arrO.push(n));
			if(win(arrO)) alert('Выиграли: O');
			else if(win(arrX)) alert('Выиграли: X');
		});


	</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript