Percubaan untuk menulis permainan tic-tac-toe menggunakan JavaScript
P粉733166744
P粉733166744 2023-09-03 15:07:48
0
1
436

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粉733166744
P粉733166744

membalas semua (1)
P粉021708275

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 kepadaGanti 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!

    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!