Bouwen van een Tic Tac Toe Spel met React

Welkom bij mijn versie van het klassieke Tic Tac Toe spel! Ik heb een Tic Tac Toe spel gemaakt met React en SCSS, en het in ongeveer 6 uur voltooid. Het spel heeft een single-player modus tegen de computer, een popup voor het aankondigen van de winnaar, en win tellers voor beide spelers. Terwijl het speelveld aanpasbaar is naar n x n, ondersteunt de huidige winnende logica alleen 3 x 3. Toekomstige verbeteringen omvatten slimmere zetten van de computer en real-time multiplayer functionaliteit.

Overzicht

• Totaal benodigde ontwikkelingstijd: ~6 uur
• Gebruikte technologieën: JavaScript (React) + SCSS

Spelregels

1. Doel

Het doel van het spel is om drie van jouw symbolen (X of O) in een horizontale, verticale of diagonale rij op een 3 x 3 speelveld uit te lijnen.

2. Beurtvolgorde

• Speler A begint altijd en speelt als X.
• De computer tegenstander speelt als O en maakt zijn zet onmiddellijk na Speler A.

3. Gameplay

• Spelers om beurten markeren lege cellen op het speelveld.
• De eerste speler die drie symbolen uitlijnt wint het spel.

4. Winnende voorwaarden

Een speler wint als ze bereiken:

• Drie symbolen in een horizontale rij
• Drie symbolen in een verticale kolom, of
• Drie symbolen in een diagonale lijn

5. Teken

Als alle cellen zijn ingevuld en geen speler aan de winnende voorwaarden voldoet, eindigt het spel in een gelijkspel.

6. Score bijhouden

Win-tellers houden het totale aantal overwinningen bij voor zowel Speler A als de computer.

Geïmplementeerde functies (MVP)

Dit is wat er in deze versie van het spel is opgenomen:

1. Speel tegen de computer: Een leuke single-player modus waarin je het tegen de computer opneemt
2. Winnaar aankondiging popup: Aan het einde van elk spel onthult een popup de winnaar.
3. Win-tellers: Houd het totale aantal overwinningen bij voor zowel de speler als de computer.
4. Aanpasbaar raster: Maak een n x n raster (hoewel de winnende logica momenteel alleen 3 x 3 ondersteunt).

Mogelijke verbeteringen

Als we vooruitkijken, zijn hier een paar gebieden voor verbetering:

1. [UX] Lokale opslag voor scores: Bewaar spelscores lokaal zodat ze blijven bestaan na het vernieuwen van de browser.
2. [UX/Tech] Slimmere computermoves: Vervang willekeurige zetten door een algoritme voor een competitievere gameplay.
3. [UX] Real-time multiplayer: Sta twee spelers in staat om in real-time te concurreren met behulp van technologieën zoals Socket.io.
4. [Tech] Geavanceerde SCSS organisatie: Refactor SCSS met behulp van mixins, variabelen en betere structuurtechnieken.
5. [UX/Tech] Graceful degradation: Zorg voor compatibiliteit met niet-moderne browsers voor bredere ondersteuning.

Setup en Ontwikkeling

Vereisten

Voordat je begint, zorg ervoor dat je Node.js hebt geïnstalleerd (aanbevolen versie: 6.4.1).

Aan de Slag

1. Clone de repository van GitHub.

2. Installeer afhankelijkheden:

npm install

3. Start de ontwikkelingsserver:

npm start

• Open http://localhost:3000 in je browser om de app te bekijken.

4. (Optioneel) Bouw het project voor productie:

npm run build

Dit creëert een geoptimaliseerde build map, klaar voor implementatie.

Testen

Voer tests uit in interactieve kijkmodus met:

npm test

Technische Details

Bestandsstructuur

Het project volgt de standaard Create React App structuur met een modulaire component-gebaseerde aanpak.

src
├── index.js
├── App.css
├── App.js
├── Components
│   └── Board
│       ├── Board.scss
│       ├── Cross.jsx
│       ├── ScoreBoard.jsx
│       ├── index.jsx
│       ├── Round.jsx
│   └── Footer
│       ├── Footer.scss
│       ├── index.jsx
│   └── Header
│       ├── Header.scss
│       ├── index.jsx
├── utils
│   └── lib.js
public
├── index.html

Beschrijving en Aanpak

• De app is opgestart met Create React App voor een snelle MVP setup.
• Het spel initialiseert een n x n raster voor gameplay.
• Elke cel heeft een click event listener, waardoor Speler A (X) de eerste zet kan doen.
• De beurt van de computer wordt gesimuleerd met een logica voor willekeurige celselectie, die moet worden verbeterd voor aangepaste rasterformaten.
• Gebruikte SCSS voor styling met een focus op snelheid boven complexiteit tijdens de ontwikkeling.

Testaanpak

Handmatige Tests

• Zorg ervoor dat de computer een zet doet nadat Speler A klaar is.
• Verifieer dat het spel eindigt met een winnaar aankondigingsbanner.
• Test geautomatiseerde zetten door de computer.

Potentiële Eenheidstests

• Controleer of de computer zich verplaatst na Speler A.
• Valideer dat het spel de juiste winnaar toont.
• Test randgevallen voor rasterinitialisatie en gebruikersinteracties.

Conclusie

Bedankt voor het verkennen van mijn project!

Je kunt de complete broncode vinden en bijdragen aan dit project op GitHub. Laten we samen coole dingen bouwen!