Показать сообщение отдельно
  #9 (permalink)  
Старый 08.11.2018, 13:52
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,552

4-e задание
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>

body{text-align: center;}

div{
	width: 310px;
	height: 100px;
	position: relative;
	margin: auto;
	font-size: 60px;
}
div>div{
	width: 100px;
	height: 100px;
	outline: 1px solid black;
	border: 1px solid black;
	display: block;
	float: left;
}
p{
	font-size: 40px;
	height: 10px;
}
</style>
</head>
<body>
<div><div></div><div></div><div></div></div>
<div><div></div><div></div><div></div></div>
<div><div></div><div></div><div></div></div>
<p>Ходит: X</p>
<button>ИГРАТЬ ЗАНОВО</button>

<p><span>0</span>-Побед X</p>
<p><span>0</span>-Побед O</p>
<p><span>0</span> - Ничья</p>

</body>
<script>
var i = 0, x = 1, 
pol = document.querySelectorAll('div>div'),
res = document.querySelector('p'),
span = document.querySelectorAll('span'),
combo = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];

document.querySelector('button').onclick=e=>{
	pol.forEach(el=>{
		el.textContent = '';
		el.style.backgroundColor = 'white';
	});
	i=0; x=1; res.textContent='Ходит: X';
};

function start(e){
	if(x){
		if(e.target.textContent == "") e.target.textContent = i++%2?'O':'X';
		var arrX=[], arrO=[], arrA=[], arrC=[];
		pol.forEach((el,n)=>{
			el.textContent !== ''&& (el.textContent == 'X'?arrX.push(n):arrO.push(n));
			el.textContent !== '' && arrA.push(n);
			el.textContent == '' && arrC.push(n);
		});

		res.textContent = i%2?i==9?'Ничья':'Ходит: O':'Ходит: X';

		if(win(arrX)) {
			res.textContent =  'Победил: X';
			span[0].textContent++; x=0;
			pol.forEach((el,i)=>{
				if(win(arrX).includes(i)) el.style.backgroundColor = 'red';
			});
		}
		else if(win(arrO)) {
			res.textContent =  'Победил: O';
			span[1].textContent++; x=0;
			pol.forEach((el,i)=>{
				if(win(arrO).includes(i)) el.style.backgroundColor = 'green';
			});
		}
		else if(i==9) span[2].textContent++;
	}
}

pol.forEach(el=>el.onclick = start);
var win=(a)=>combo.find(el=>el.every((el)=>a.includes(el)));

</script>
</html>

могу бота дописать если надо.
Ответить с цитированием