Крестики-нолики

Tarasov, Lesson 6, Events

by shurikation

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tick-tack-toe</title>
</head>
<body>
  
  <table id="game"></table>
  
</body>
</html>

CSS

* {
    box-sizing: border-box;
    }
    
   #game {
     width: 150px;
     margin: 50px auto;
     }

    #game td {
     width: 50px;
     height: 50px;
     border: 1px solid black;
     text-align: center;
   }

JavaScript

const ticTakToe = {
	gameTableElement: null, //либо document.querySelector('#game') или document.getElementById('game'), но лучше null
  status: 'playing',
  mapValues: [ //как игра выглядит, представление игры - поле 3 на 3
  ['', '', ''],
  ['', '', ''],
  ['', '', ''],
  ],
  phase: 'X', //кто ходит сейчас 
  
  init() {
  	this.gameTableElement = document.getElementById('game');
    this.renderMap();   
    this.initEventHandlers(); 
  },

	renderMap() {
  	for(let row = 0; row < 3; row++) {
    	const tr = document.createElement('tr');
      this.gameTableElement.appendChild(tr); 
      for (let col = 0; col < 3; col++) {
      	const td = document.createElement('td');
        
        //устанавливаем дата-атрибуты, типа, 0 - 0, 0 - 1 и т.д.
        td.dataset.row = row.toString(); //т.к. dataset в row принимает строку, поэтому приводим row к строке
        td.dataset.col = col.toString();
        
        tr.appendChild(td); 
      }
    }  
  },
  
  //вешает обработчики событий
  initEventHandlers() {
    //ставим обработчик событий на всю таблицу, а потом опредлим куда проходит клик
      this.gameTableElement.addEventListener('click', event => this.cellClickHandler(event))
  },
  
  cellClickHandler(event) {
    const row = event.target.dataset.row; //получаем дата-атрибут элемента, по которому был клик. Если клик не по ячейке, то вернет undefined
    const col = event.target.dataset.col;
    
    //если клик был НЕ по ячейке, то return
    if (!this.isStatusPlaying() || !this.isClickByCell(event) || !this.isCellEmpty(row, col)) { //true - если клик был по ячейке. Это он определит по (event)'у
      return; // И если ячейка НЕ является пустой, то тогда тоже return
    }
    
    //заполняем mapValues и ставим туда Х или О - внутреннее представление JS
    this.mapValues[row][col] = this.phase;
    //заполняем HTML и отобрадаем пользователю - внешнее представление на HTML
    event.target.textContent = this.phase;
    
    //а была ли победа
    if...