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!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket