Alanslob,
в css вместо content можно использовать background-image.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.box{
width: 90px;
height: 90px;
line-height: 70px;
border: 1px solid #000000;
box-sizing: border-box;
font-size: 90px;
text-align: center;
}
.box.x:after{
content: "x";
}
.box.o:after{
content: "o";
}
#area{
width: 270px;
display: flex;
flex-wrap: wrap
}
</style>
</head>
<body>
<div id="area">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<script>
let area = document.getElementById('area'),
move = 0;
area.addEventListener('click', function(event) {
if (move % 2 === 0) {
event.target.classList.add('x');
} else {
event.target.classList.add('o');
}
move++;
check();
});
function check() {
let boxes = document.querySelectorAll('.box');
let arr = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
]
for (let [a, b, c] of arr) {
if (boxes[a].classList.contains('x') && boxes[b].classList.contains('x') && boxes[c].classList.contains('x')) {
win('Победили крестики!');
break;
} else if (boxes[a].classList.contains('o') && boxes[b].classList.contains('o') && boxes[c].classList.contains('o')) {
win('Победили нолики!');
break;
}
}
}
const win = str => setTimeout(() => {
alert(str);
location.reload();
});
</script>
</body>
</html>