Помогите доделать игру на js

207
26 июня 2018, 15:10

Игра называется крестики-нолики. В ней осталось доделать "ничью".

Для этого надо чтобы при заполнении всех тегов div возможность их перезаполнять отсутствовала.

Подскажите, как это делается?

var name1; 
var name2 = 'player2'; 
window.onload = function() { 
  name1 = prompt('Введите свое имя', 'player1'); 
  name2 = prompt('Введите свое имя', 'player2'); 
  alert('Игра началась'); 
  for (i = 0; i < 9; i++) { 
    document.getElementById("game").innerHTML += '<div class="block"></div>' 
  } 
  var turn = 0; 
  document.getElementById("game").onclick = function(e) { 
    if (event.target.className == 'block') { 
      if (turn % 2 == 0) { 
        event.target.innerHTML = 'x'; 
        document.getElementById('player').innerHTML = "Ход: " + name2; 
      } else { 
        event.target.innerHTML = 'o'; 
        document.getElementById('player').innerHTML = "Ход: " + name1; 
      } 
      turn++; 
      checkWinner(); 
    } 
  } 
 
  function checkWinner() { 
    var allblock = document.getElementsByClassName('block'); 
    if (allblock[0].innerHTML == 'x' && allblock[1].innerHTML == 'x' && allblock[2].innerHTML == 'x') document.getElementById("winner").innerHTML = 'победитель: ' + name1; 
    if (allblock[3].innerHTML == 'x' && allblock[4].innerHTML == 'x' && allblock[5].innerHTML == 'x') document.getElementById("winner").innerHTML = 'победитель: ' + name1; 
    if (allblock[6].innerHTML == 'x' && allblock[7].innerHTML == 'x' && allblock[8].innerHTML == 'x') document.getElementById("winner").innerHTML = 'победитель: ' + name1; 
    if (allblock[0].innerHTML == 'x' && allblock[3].innerHTML == 'x' && allblock[6].innerHTML == 'x') document.getElementById("winner").innerHTML = 'победитель: ' + name1; 
    if (allblock[1].innerHTML == 'x' && allblock[4].innerHTML == 'x' && allblock[7].innerHTML == 'x') document.getElementById("winner").innerHTML = 'победитель: ' + name1; 
    if (allblock[2].innerHTML == 'x' && allblock[5].innerHTML == 'x' && allblock[8].innerHTML == 'x') document.getElementById("winner").innerHTML = 'победитель: ' + name1; 
    if (allblock[0].innerHTML == 'x' && allblock[4].innerHTML == 'x' && allblock[8].innerHTML == 'x') document.getElementById("winner").innerHTML = 'победитель: ' + name1; 
    if (allblock[6].innerHTML == 'x' && allblock[4].innerHTML == 'x' && allblock[2].innerHTML == 'x') document.getElementById("winner").innerHTML = 'победитель: ' + name1; 
 
    if (allblock[0].innerHTML == 'o' && allblock[1].innerHTML == 'o' && allblock[2].innerHTML == 'o') document.getElementById("winner").innerHTML = 'победитель: ' + name2; 
    if (allblock[3].innerHTML == 'o' && allblock[4].innerHTML == 'o' && allblock[5].innerHTML == 'o') document.getElementById("winner").innerHTML = 'победитель: ' + name2; 
    if (allblock[6].innerHTML == 'o' && allblock[7].innerHTML == 'o' && allblock[8].innerHTML == 'o') document.getElementById("winner").innerHTML = 'победитель: ' + name2; 
    if (allblock[0].innerHTML == 'o' && allblock[3].innerHTML == 'o' && allblock[6].innerHTML == 'o') document.getElementById("winner").innerHTML = 'победитель: ' + name2; 
    if (allblock[1].innerHTML == 'o' && allblock[4].innerHTML == 'o' && allblock[7].innerHTML == 'o') document.getElementById("winner").innerHTML = 'победитель: ' + name2; 
    if (allblock[2].innerHTML == 'o' && allblock[5].innerHTML == 'o' && allblock[8].innerHTML == 'o') document.getElementById("winner").innerHTML = 'победитель: ' + name2; 
    if (allblock[0].innerHTML == 'o' && allblock[4].innerHTML == 'o' && allblock[8].innerHTML == 'o') document.getElementById("winner").innerHTML = 'победитель: ' + name2; 
    if (allblock[6].innerHTML == 'o' && allblock[4].innerHTML == 'o' && allblock[2].innerHTML == 'o') document.getElementById("winner").innerHTML = 'победитель: ' + name2; 
 
  } 
  restart.onclick = function() { 
    name1 = prompt('Введите свое имя', 'player1'); 
    name2 = prompt('Введите свое имя', 'player2'); 
    alert('Игра началась'); 
    document.getElementsByClassName('block')[0].innerHTML = ""; 
    document.getElementsByClassName('block')[1].innerHTML = ""; 
    document.getElementsByClassName('block')[2].innerHTML = ""; 
    document.getElementsByClassName('block')[3].innerHTML = ""; 
    document.getElementsByClassName('block')[4].innerHTML = ""; 
    document.getElementsByClassName('block')[5].innerHTML = ""; 
    document.getElementsByClassName('block')[6].innerHTML = ""; 
    document.getElementsByClassName('block')[7].innerHTML = ""; 
    document.getElementsByClassName('block')[8].innerHTML = ""; 
    document.getElementById('player').innerHTML = "Ход: "; 
    document.getElementById("winner").innerHTML = 'победитель: ' 
  } 
}
#game { 
  width: 150px; 
  height: 150px; 
  background: orangered; 
} 
 
.block { 
  width: 50; 
  height: 50; 
  float: left; 
  border: 1px solid white; 
  box-sizing: border-box; 
  line-height: 50px; 
  text-align: center; 
  font-size: 40px; 
  text-transform: uppercase; 
} 
 
#restart { 
  width: 60px; 
  height: 30px; 
  background: white; 
  border: 3px solid orangered; 
  text-align: center; 
}
<div id="game"> 
</div> 
<b><p id="player">Ход:</p></b> 
<b><p id="winner">Победитель:</p></b> 
<div id="restart">Restart</div>

READ ALSO
Убрать &lt;TD&gt; в коде JS?

Убрать <TD> в коде JS?

Как убрать здесь "td?

185
Почему не подключается js библиотека bitrix24?

Почему не подключается js библиотека bitrix24?

В официальной документации описаны удобные js методы по работе с битрикс24Мне нужно достать всю информацию о задаче с определенным ID

228
Почему шаблон не компилируется в тестах?

Почему шаблон не компилируется в тестах?

Я написал спек для своего контроллераAngular модуль ngCountdownRibbon имеет логику, которая добавляет ленту со счетчиком в тело документа

216