- Регистрация
- 5 Окт 2020
- Сообщения
- 110
- Лучшие ответы
- 2
- Репутация
- 22
Всем здравствуйте я вам покажу как легко сделать крестики и нолики на js
HTML:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="content">
<div class="currentPlayer">
<span>Сейчас ходит: <span id="curPlyr">X</span></span>
</div>
<div id="area"></div>
<div class="stat">
<table>
<th colspan="2">Статистика</th>
<tr>
<td>X</td>
<td><span id="sX">0</span></td>
</tr>
<tr>
<td>O</td>
<td><span id="sO">0</span></td>
</tr>
<tr>
<td>Ничьи</td>
<td><span id="sD">0</span></td>
</tr>
</table>
</div>
<script src="js/main.js"></script>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font-family: "Roboto Light", monospace;
}
body {
background-color: rebeccapurple;
font-size: 14px;
}
.content {
display: flex;
margin: 100px 250px 50px 50px;
font-family: sans-serif;
}
#area {
width: 156px;
border: 1px solid #000;
margin: 0 auto;
font-size: 0;
}
.cell {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
display: inline-block;
font-size: 26px;
border: 1px solid #000;
cursor: pointer;
vertical-align: middle;
transition: background .1s;
}
.cell:hover {
background-color: #F1F1F1;
}
.currentPlayer {
width: 170px;
font-size: 18px;
display: flex;
align-items: center;
position: absolute;
left: 390px;
margin-top: -25px;
}
.stat {
display: flex;
align-items: center;
font-size: 18px;
}
.stat table {
border-collapse: collapse;
}
.stat table, .stat th, .stat td {
border: 1px solid #000;
padding: 5px;
text-align: center;
}
JavaScript:
let area = document.getElementById('area');
let cell = document.getElementsByClassName('cell');
let currentPlayer = document.getElementById('curPlyr');
let player = 'x';
let stat = {
'x': 0,
'o': 0,
'd':0
}
let winindex = [
[1,2,3],
[4,5,6],
[7,8,9],
[1,4,7],
[2,5,8],
[3,6,9],
[1,5,9],
[3,5,7]
];
for(let i = 1; i <= 9; i++) {
area.innerHTML += "<div class='cell' pos="+ i +"></div>"
}
for(let i =0; i < cell.length; i++) {
cell[i].addEventListener('click', cellclick);
}
function cellclick() {
data = [];
if (!this.innerHTML) {
this.innerHTML = player;
}
else {
alert('Ячейка занята');
return;
}
for(let i in cell) {
if(cell[i].innerHTML === player) {
data.push(parseInt(cell[i].getAttribute('pos')));
}
}
if(CheckWin(data)) {
stat[player] += 1;
restart('Победа! ' + player)
}
else {
let draw = true;
for(let i in cell) {
if(cell[i].innerHTML === '') draw = false;
}
if(draw) {
stat.d += 1;
restart('Ничья!')
}
}
player = player === 'x' ? 'o' : "x";
currentPlayer.innerHTML = player.toUpperCase();
}
function updateStat() {
document.getElementById('sX').innerHTML = stat.x;
document.getElementById('sO').innerHTML = stat.o;
document.getElementById('sD').innerHTML = stat.d;
}
function CheckWin(data) {
for(let i in winindex) {
let win = true;
for(let j in winindex[i]) {
let id = winindex[i][j]
let ind = data.indexOf(id);
if(ind === -1) {
win = false
}
}
if(win) return true;
}
return false;
}
function restart(text) {
alert(text)
for (let i=0; i <cell.length; i++) {
cell[i].innerHTML = '';
}
updateStat();
}