Tic-tac-toe project / I'm student

JavaScript
1

I have a project called tic-tac-toe, I wrote the codes, but when I tested it, I couldn’t write a topic about who won. Is there anyone among us who can help me?

thank you

#html-css #css #javascript

2

Welcome to the forum!

If you can share your code with us, we might be able to help more easily.
You can paste code directly here by using the Preformatted Text tool (the </> icon or CTRL+e). Or if you have the code in a public repo somewhere you could share the link to it.

3

Thank you very much for your answer and I want the code I wrote to work on the screen like this, but I don’t know how to do it, so I want to do something similar to this link.

but I want to make the code I wrote like the one on the right , actually similar to the link above .

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tic Tac Toe</title>
  <link rel="stylesheet" href="style.css">2
  <script defer src="script.js"></script>
</head>
<body>
  <h1></h1>
  <main id="board">
    <div id="sq-0"></div>
    <div id="sq-1"></div>
    <div id="sq-2"></div>
    <div id="sq-3"></div>
    <div id="sq-4"></div>
    <div id="sq-5"></div>
    <div id="sq-6"></div>
    <div id="sq-7"></div>
    <div id="sq-8"></div>
  </main>
  <button>CLICK PLAY AGAIN</button>
</body>
</html>

* {
  box-sizing: border-box;
  font-family: sans-serif, Helvetica, Arial;
}



body{
  display:flex;
  flex-direction: column;
  align-items: center;
  background-color: black;
}

h1 {
  margin-top: 0;
  margin-bottom: 5vmin;
}

#board {
  display: grid;
  grid-template-columns: repeat(3, 20vmin);
  grid-template-rows: repeat(3, 20vmin);
  background-color: lightgrey;
  border-radius: 5vmin;
}

#board > div {
  margin: 3vmin;
  background-color: white;
  border: 1vmin solid white;
  border-radius: 50%;
}

#board > div.avail {
  cursor: pointer;
}

#board > div.avail:hover {
  border-color: grey;
}

button {
  margin-top: 5vmin;
  padding: 2vmin;
  background-color: grey;
  color: white;
  border-radius: 2vmin;
  font-size: 4vmin;
}

button:disabled {
  background-color: lightgrey;
  color: darkgrey;
}

button:hover:not(:disabled) {
  background-color: white;
  color: grey;
}


/*----- constants -----*/
const COLOR_LOOKUP = {
  '1': 'pink',
  '-1': 'green',
  'null': 'white'
};

const winningCombos = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];

/*----- app's state (variables) -----*/
let board, turn, winner;

/*----- cached element references -----*/
const message = document.querySelector('h1');
const playAgainBtn = document.querySelector('button');
// Note: Could also cache the <div> elements for the squares and avoid
//       the ids on them - like we did with the Connect-Four code-along

/*----- event listeners -----*/
document.getElementById('board').addEventListener('click', handleMove);
playAgainBtn.addEventListener('click', initialize);

/*----- functions -----*/
initialize();

// Initialize all state variables, then call render()
function initialize() {
  board = [null, null, null, null, null, null, null, null, null];
  // OR initialize like this:
  // board = new Array(9).fill(null);
  turn = 1;
  winner = null;
  render();
}

// Update all impacted state, then call render()
function handleMove(evt) {
  // obtain index of square
  const idx = parseInt(evt.target.id.replace('sq-', ''));
  // Guards
  if (
    // Didn't click <div> in grid
    isNaN(idx) ||
    // Square already taken
    board[idx] ||
    // Game over
    winner
  ) return;
  // Update state (board, turn, winner)
  board[idx] = turn;
  turn *= -1;
  winner = getWinner();
  // Render updated state
  render();
}

function getWinner() {
  for (let i = 0; i < winningCombos.length; i++) {
    if (Math.abs(board[winningCombos[i][0]] + board[winningCombos[i][1]] + board[winningCombos[i][2]]) === 3) return board[winningCombos[i][0]];
  }
  // Less elegant approach:
  // if (Math.abs(board[0] + board[1] + board[2]) === 3) return board[0];``
  // if (Math.abs(board[3] + board[4] + board[5]) === 3) return board[3];
  // if (Math.abs(board[6] + board[7] + board[8]) === 3) return board[6];
  // if (Math.abs(board[0] + board[3] + board[6]) === 3) return board[0];
  // if (Math.abs(board[1] + board[4] + board[7]) === 3) return board[1];
  // if (Math.abs(board[2] + board[5] + board[8]) === 3) return board[2];
  // if (Math.abs(board[0] + board[4] + board[8]) === 3) return board[0];
  // if (Math.abs(board[2] + board[4] + board[6]) === 3) return board[2];
  if (board.includes(null)) return null;
  return 'T';
}

// Visualize all state and info in the DOM
function render() {
  renderBoard();
  renderMessage();
  // Hide/show PLAY AGAIN button
  playAgainBtn.disabled = !winner;
}

function renderBoard() {
  board.forEach(function(sqVal, idx) {
    const squareEl = document.getElementById(`sq-${idx}`);
    squareEl.style.backgroundColor = COLOR_LOOKUP[sqVal];
    // Add class if square available for hover effect
    squareEl.className = !sqVal ? 'avail' : '';
  });
}

function renderMessage() {
  if (winner === 'T') {
    message.innerHTML = 'Rats, another tie!';
  } else if (winner) {
    message.innerHTML = `Congrats <span style="color: ${COLOR_LOOKUP[winner]}">${COLOR_LOOKUP[winner].toUpperCase()}</span>!`;
  } else {
    message.innerHTML = `<span style="color: ${COLOR_LOOKUP[turn]}">${COLOR_LOOKUP[turn].toUpperCase()}</span>'s Turn`;
  }
}

thank you so much

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.