Добро пожаловать на Pawno-Info.Ru - Портал о программировании №1

Присоединяйтесь к нам сейчас, чтобы получить доступ ко всем нашим функциям и ответы на все интересующие Вас вопросы. После регистрации Вы сможете создавать темы, публиковать ответы, влиять на репутацию пользователей форума, обмениваться личными сообщениями и многое другое. Это быстро и совершенно бесплатно, так чего же Вы ждете?

Маппинг для сервера

Если вы хотите обновить Ваш сервер новыми доработками - то зайдите в наш раздел. Большой выбор готовых решений от наших пользователей

Моды для сервера

Огромный выбор различных модификаций для Вашего сервера. Пролистайте эти темы! Возможно именно там Вы найдете то, что искали уже давно.

Модификации SA

Хотите разнообразить свою игру в San Andreas? Смелее в наш раздел. Отличный сборник готовых решений. Играйте с удовольствием

Xxxtreton

Начинающий
Пользователь
Регистрация
5 Окт 2020
Сообщения
67
Лучшие ответы
0
Репутация
4
Всем здравствуйте я вам покажу как легко сделать крестики и нолики на 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();
}
 

SatoruMikami

Начинающий
Пользователь
Регистрация
18 Июн 2021
Сообщения
90
Лучшие ответы
2
Репутация
14
Показал бы как это выглядит и работает ли оно вообще.

Вот мне лень это всё самому смотреть.
 

PIRU

The world on the edge of reality
Команда форума
CREATOR
Регистрация
10 Ноя 2010
Сообщения
11,177
Лучшие ответы
16
Репутация
2,470
Возраст
9
Адрес
СССР
Веб-сайт
pawno.info
  • Герой PI
@SatoruMikami, но, было не лень написать комментарий ))) Интересно!
 

zazais

Заблокирован
Пользователь
Регистрация
16 Янв 2021
Сообщения
1,147
Лучшие ответы
18
Репутация
712

Коляниус

Начинающий
Пользователь
Регистрация
12 Ноя 2013
Сообщения
34
Лучшие ответы
0
Репутация
0
Очень интересно, возьму на заметку
 
shape1
shape2
shape3
shape4
shape7
shape8
Сверху Снизу