JavaScript を使用して三目並べゲームを作成する試み

Question

ボード上の四角をクリックして、JavaScript を使用して三目並べの X と O を実装しようとしています。三目並べゲームの X または O を作成する必要があります。しかし、XかOをどうやって出すのかわかりません。そして、実際の三目並べゲームのように機能する必要があります。

Answer 1

querySelectorAll は複数のノードを返し、addEventListener は一度に 1 つのノードでしか機能しないため、イベント リスナーをノードに直接追加できないため、各正方形を反復処理する必要があります。

また、実行時に動作を確認できるように、以下のコード スニペットに CSS を追加しました。最終プロジェクトではこれを無視してください。

リーリー リーリー リーリー

編集: 上記のコード スニペットを alternate on click に変更しました。これは、現在のプレーヤー (X または O) で変数を初期化し、単純な 3 項ステートメントを使用してクリック時に交換することで実行できます。リセットボタンにも機能を追加しました。