Percubaan untuk menulis permainan tic-tac-toe menggunakan JavaScript

Question

Saya cuba melaksanakan X dan O dalam Tic Tac Toe melalui JavaScript dengan mengklik segi empat sama pada papan saya. Saya perlu mencipta X atau O untuk permainan Tic Tac Toe. Tetapi saya tidak pasti bagaimana untuk membuat X atau O. Dan saya memerlukannya untuk berfungsi seperti permainan tic-tac-toe yang sebenar.

P粉021708275 · Answer

Anda perlu mengulangi setiap petak kerana querySelectorAll mengembalikan berbilang nod dan anda tidak boleh menambah pendengar acara secara langsung padanya kerana addEventListener hanya boleh berfungsi pada satu nod pada satu masa.

Saya juga menambahkan beberapa CSS pada coretan kod di bawah supaya anda dapat melihatnya berfungsi apabila anda menjalankannya. Abaikan ini dalam projek akhir.

window.onload = () => {
    
    const squares = document.querySelectorAll(".square")

    let currentPlayer = "X";

    squares.forEach(square => {

        square.addEventListener("click", () => {
                
                if (square.innerHTML === "") {
                    square.innerHTML = currentPlayer;
                    currentPlayer = currentPlayer === "X" ? "O" : "X";
                }
    
            });
    });
};

document.querySelector('#reset-btn').addEventListener('click', () => {
    document.querySelectorAll('.square').forEach(square => {
        square.innerHTML = "";
    });
});

#board {
  margin: 0 auto;
  width: 50%;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.square {
  border: 1px solid black;
  padding: 1rem;
  cursor: pointer;
  text-align: center;
  aspect-ratio: 1/1;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.square:hover {
  background-color: #CCCCCC;
}

Edit: Saya menukar coretan kod di atas kepada Ganti pada klik, yang boleh digunakan dengan memulakan pembolehubah dengan pemain semasa (X atau O) dan menukar klik menggunakan pernyataan ternary yang mudah. Saya juga menambah fungsi pada butang set semula anda!

Percubaan untuk menulis permainan tic-tac-toe menggunakan JavaScript

membalas semua(1)saya akan balas