Написать игру на html, css, javascript в крестики нолики

Question

Написать игру на html, css, javascript в крестики нолики

nikitamagellanov Магелланов Ученик (4), на голосовании 6 месяцев назад

Добрый день! Нужно написать игру в крестики нолики на HTML, css, JavaScript. Пожалуйста помогите , так как я не силён в этих технологиях, а курсовую работу нужно сделать именно с использованием HTML, css, JavaScript. Игра должна предусматривать как для двух игроков, так и для игрока и компьютера. К коду,если можно,добавьте пожалуйста комментарии. Заранее спасибо за помощь.

Answer 1

Hesus Мудрец (12105) 7 месяцев назад

На сайт kwork тебе

Answer 2

Это довольно объемная задача, особенно что касается мультиплеера

Answer 3

Делал когда-то крестики-нолики именно на данном стеке
https://jsfiddle.net/m965yLh2/5/
Но тогда еще был совсем начинающим и не всё там получилось идеально.
Кстати вариант "для игрока и компьютера" не интересен, потому что если играть строго по правилам - максимум ничья

Answer 4

Ботаник Ин Мастер (1194) 7 месяцев назад

................................................

Answer 5

Это набросок для демонстрации принципа. Логики нет, она является рандомной. То есть за второго игрока играет просто тупой генератор ноликов

tictac.html

  
 
 
 
 
Tic Tac Toe

styles.css

 .container { 
  display: grid; 
  grid-template-columns: repeat(3, 100px); 
  grid-template-rows: repeat(3, 100px); 
  grid-gap: 5px; 
  justify-content: center; 
  align-items: center; 
  margin-top: 50px; 
} 
 
.cell { 
  width: 100px; 
  height: 100px; 
  background-color: lightgray; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 36px; 
  cursor: pointer; 
}

script.js

 document.addEventListener('DOMContentLoaded', function() { 
  const cells = document.querySelectorAll('.cell'); 
 
  cells.forEach(cell => { 
    cell.addEventListener('click', function() { 
      if (!cell.textContent.trim()) { // Проверяем, что ячейка пуста 
        cell.textContent = 'X'; // Пользователь ставит крестик 
        setTimeout(computerMove, 20); // Пауза перед ходом компьютера 
      } 
    }); 
  }); 
 
  function computerMove() { 
  const emptyCells = document.querySelectorAll('.cell'); 
  const availableCells = Array.from(emptyCells).filter(cell => !cell.textContent.trim()); 
   
  if (availableCells.length > 0) { 
    const randomIndex = Math.floor(Math.random() * availableCells.length); 
    availableCells[randomIndex].textContent = 'O'; // Компьютер ставит нолик 
  } 
} 
 
});