Erstellen Sie eine Website für Tic Tac Toe-Spiele-CSS-Tutorial-php.cn

Build a Tic Tac Toe Game Website

Einführung

Hallo, liebe Entwickler! Ich freue mich, mein neuestes Projekt vorzustellen: ein klassisches Tic-Tac-Toe-Spiel. Dieses Projekt ist eine großartige Möglichkeit, Ihre JavaScript-Kenntnisse zu üben, insbesondere im Umgang mit Spiellogik, DOM-Manipulation und Benutzerinteraktionen. Egal, ob Sie gerade erst mit JavaScript anfangen oder nach einer lustigen Herausforderung suchen, dieses Tic-Tac-Toe-Spiel ist perfekt, um Ihre Fähigkeiten zu verbessern.

Projektübersicht

Das Tic-Tac-Toe-Spiel ist eine webbasierte Umsetzung des beliebten Zwei-Spieler-Spiels. Das Projekt zeigt, wie man interaktive Elemente erstellt, den Spielstatus verwaltet und einfache KI-Logik implementiert. Das Spiel ist so konzipiert, dass es vollständig responsiv ist, sodass es sowohl auf Desktop- als auch auf Mobilgeräten spielbar ist.

Merkmale

Zwei-Spieler-Modus: Spielen Sie mit einem Freund auf demselben Gerät.
Spiellogik: Prüft automatisch nach jedem Zug, ob ein Gewinner oder ein Unentschieden vorliegt.
Reset-Funktionalität: Starten Sie das Spiel jederzeit einfach neu.
Responsive Design: Das Spiellayout passt sich an verschiedene Bildschirmgrößen an und sorgt so für ein einheitliches Erlebnis auf allen Geräten.

Verwendete Technologien

HTML: Strukturiert die Spieloberfläche.
CSS: Gestaltet das Spielbrett, die Schaltflächen und andere UI-Elemente.
JavaScript: Verwaltet die Spiellogik, einschließlich Spielerzüge, Siegbedingungen und Zurücksetzen des Spiels.

Projektstruktur

Hier ein kurzer Blick auf die Projektstruktur:

Tic-Tac-Toe/
├── index.html
├── styles.css
└── script.js

Nach dem Login kopieren

index.html: Enthält die HTML-Struktur des Tic-Tac-Toe-Spiels.
styles.css: Enthält CSS-Stile für das Spielbrett und responsives Design.
script.js: Verwaltet die Spiellogik, einschließlich Spielerzüge und Siegbedingungen.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

Klonen Sie das Repository:

git clone https://github.com/abhishekgurjar-in/Tic-Tac-Toe.git

Nach dem Login kopieren

Öffnen Sie das Projektverzeichnis:
```
cd Tic-Tac-Toe
```
Nach dem Login kopieren
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in einem Webbrowser, um mit dem Spielen des Tic-Tac-Toe-Spiels zu beginnen.

Verwendung

Öffnen Sie die Website in einem Webbrowser.
Starten Sie das Spiel indem Sie auf eine beliebige leere Zelle im Raster klicken.
Wechseln Sie sich ab, um Ihre Markierungen (X oder O) in den Zellen zu platzieren.
Überprüfen Sie das Ergebnis: Das Spiel gibt einen Gewinner bekannt, wenn es eine Gewinnkombination gibt, oder ein Unentschieden, wenn alle Felder ausgefüllt sind.
Spiel zurücksetzen: Klicken Sie auf die Schaltfläche „Spiel zurücksetzen“, um ein neues Spiel zu starten.

Code-Erklärung

HTML

Die Datei index.html legt die Struktur des Tic-Tac-Toe-Spiels fest, einschließlich des Spielbretts und der Steuertasten. Hier ist ein Ausschnitt:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tic-Tac-Toe Game</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="msg-container hide">
      <p id="msg">Winner</p>
      <button id="new-btn">New Game</button>
    </div>
    <main>
      <h1>Tic Tac Toe</h1>
      <div class="container">
        <div class="game">
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
        </div>
      </div>
      <button id="reset-btn">Reset Game</button>
    </main>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

Nach dem Login kopieren

CSS

Die Datei „styles.css“ stilisiert das Tic-Tac-Toe-Spiel, einschließlich des Rasterlayouts, der Schaltflächen und des responsiven Designs. Hier sind einige wichtige Stile:

* {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: #548687;
    text-align: center;
  }

  .container {
    height: 70vh;
    display: flex;

    justify-content: center;
    align-items: center;
  }

  .game {
    height: 60vmin;
    width: 60vmin;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5vmin;
  }

  .box {
    height: 18vmin;
    width: 18vmin;
    border-radius: 1rem;
    border: none;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
    font-size: 8vmin;
    color: #b0413e;
    background-color: #ffffc7;
  }

  #reset-btn {
    padding: 1rem;
    font-size: 1.25rem;
    background-color: #191913;
    color: #fff;
    border-radius: 1rem;
    border: none;
  }

  #new-btn {
    padding: 1rem;
    font-size: 1.25rem;
    background-color: #191913;
    color: #fff;
    border-radius: 1rem;
    border: none;
  }

  #msg {
    color: #ffffc7;
    font-size: 5vmin;
  }

  .msg-container {
    height: 100vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4rem;
  }

  .hide {
    display: none;
  }
.footer {
  margin: 50px;
  text-align: center;
  color: white;
}

Nach dem Login kopieren

JavaScript

Die Datei „script.js“ verwaltet die Spiellogik, einschließlich der Handhabung von Spielerzügen, der Suche nach einem Gewinner und dem Zurücksetzen des Spiels. Hier ist ein Ausschnitt:

let boxes = document.querySelectorAll(".box");
let resetBtn = document.querySelector("#reset-btn");
let newGameBtn = document.querySelector("#new-btn");
let msgContainer = document.querySelector(".msg-container");
let msg = document.querySelector("#msg");

let turnO = true; //playerX, playerO
let count = 0; //To Track Draw

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

const resetGame = () => {
  turnO = true;
  count = 0;
  enableBoxes();
  msgContainer.classList.add("hide");
};

boxes.forEach((box) => {
  box.addEventListener("click", () => {
    if (turnO) {
      //playerO
      box.innerText = "O";
      turnO = false;
    } else {
      //playerX
      box.innerText = "X";
      turnO = true;
    }
    box.disabled = true;
    count++;

    let isWinner = checkWinner();

    if (count === 9 && !isWinner) {
      gameDraw();
    }
  });
});

const gameDraw = () => {
  msg.innerText = `Game was a Draw.`;
  msgContainer.classList.remove("hide");
  disableBoxes();
};

const disableBoxes = () => {
  for (let box of boxes) {
    box.disabled = true;
  }
};

const enableBoxes = () => {
  for (let box of boxes) {
    box.disabled = false;
    box.innerText = "";
  }
};

const showWinner = (winner) => {
  msg.innerText = `Congratulations, Winner is ${winner}`;
  msgContainer.classList.remove("hide");
  disableBoxes();
};

const checkWinner = () => {
  for (let pattern of winPatterns) {
    let pos1Val = boxes[pattern[0]].innerText;
    let pos2Val = boxes[pattern[1]].innerText;
    let pos3Val = boxes[pattern[2]].innerText;

    if (pos1Val != "" && pos2Val != "" && pos3Val != "") {
      if (pos1Val === pos2Val && pos2Val === pos3Val) {
        showWinner(pos1Val);
        return true;
      }
    }
  }
};

newGameBtn.addEventListener("click", resetGame);
resetBtn.addEventListener("click", resetGame);

Nach dem Login kopieren

Live-Demo

Sie können sich hier die Live-Demo des Tic-Tac-Toe-Spiels ansehen.

Abschluss

Das Erstellen dieses Tic-Tac-Toe-Spiels war eine unterhaltsame Erfahrung, die es mir ermöglichte, JavaScript zu üben, insbesondere beim Erstellen interaktiver Webanwendungen. Ich hoffe, dieses Projekt inspiriert Sie dazu, Ihre eigenen Spiele zu entwickeln und die Möglichkeiten mit JavaScript zu erkunden. Viel Spaß beim Codieren!

Credits

Dieses Projekt wurde im Rahmen meiner fortlaufenden Reise zur Verbesserung meiner Webentwicklungsfähigkeiten entwickelt, mit Schwerpunkt auf JavaScript und DOM-Manipulation.

Autor

Abhishek Gurjar
- GitHub-Profil

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Website für Tic Tac Toe-Spiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!