Мануал Как легко сделать крестики и нолики на js

Xxxtreton · 6 Сен 2021

Всем здравствуйте я вам покажу как легко сделать крестики и нолики на 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();
}

Переход в группу "Пользователь"

Мануал Как легко сделать крестики и нолики на js

Xxxtreton

Изучающий