JavaScript Canvas implementiert Tic-Tac-Toe-Spiel

In diesem Artikel wird der spezifische Code von JavaScript Canvas zur Implementierung des Tic-Tac-Toe-Spiels zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Hauptseite

<!DOCTYPE html>
<html>
    <Kopf>
        <Titel>Tic Tac Toe</Titel>
        <Stil>
            * {
                Polsterung: 0;
                Rand: 0;
            }
 
            Text, HTML, #Spiel {
                Höhe: 100%;
                Hintergrund: #FCFCFC;
            }
 
            #Spiel {
                Anzeige: Flex;
                Elemente ausrichten: zentrieren;
                Inhalt ausrichten: zentriert;
            }
        </Stil>
    </Kopf>
    <Text>
        <div id="Spiel">
            <Leinwand-ID="Leinwand" Breite="300" Höhe="300"></Leinwand>
        </div>
        <script src="spiel.js"></script>
    </body>
</html>

spiel.js

Spieler = 2;
Zellenanzahl = 3;
Gewinnanzahl = 3;
Zellengröße = 100;
Größe = Zellengröße * Zellenanzahl;
 
 
var Leinwand = document.getElementById('Leinwand');
canvas.width = Größe;
canvas.height = Größe;
 
canvas.addEventListener('klicken', klicken, false);
 
 
var ctx = canvas.getContext('2d');
 
ctx.imageSmoothingEnabled = falsch;
ctx.Linienbreite = 3;
 
 
Funktion löschen() {
    ctx.clearRect(0, 0, Leinwandbreite, Leinwandhöhe);
}
 
Funktion Linie(x, y, w, h, Farbe = '#ccc') {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + w, y + h);
    ctx.strokeStyle = Farbe;
    ctx.stroke();
    ctx.closePath();
}
 
Funktion fillRect(i, j, Farbe = '#F5F5F5') {
    ctx.fillStyle = Farbe;
    ctx.fillRect(i * Zellengröße, j * Zellengröße, Zellengröße, Zellengröße);
}
 
var zeichnen = {
    Raster: (Farbe = '#ccc') => {
        für (lass i = 1; i < Zellzahl; i++) {
            Zeile (Zellengröße * i, 0, 0, Größe, Farbe);
            Zeile (0, Zellengröße * i, Größe, 0, Farbe);
    }
    },
 
    // nichts zeichnen, Stumpf
    0: (i, j, _) => {
    },
 
    // X-Figur zeichnen
    1: (i, j, Farbe = '#3F51B5') => {
        sei links = (i + 0,1) * Zellengröße,
                oben = (j + 0,1) * Zellengröße,
                Größe = 0,8 * Zellengröße;
 
        Linie (links, oben, Größe, Größe, Farbe);
        Linie (links + Größe, oben, -Größe, Größe, Farbe);
    },
 
    // O-Figur zeichnen
    2: (i, j, Farbe = '#FF5722') => {
        ctx.beginPath();
        ctx.arc((i + 0,5) * Zellengröße, (j + 0,5) * Zellengröße, 0,4 * Zellengröße, 0, Math.PI * 2, false);
        ctx.strokeStyle = Farbe;
        ctx.stroke();
        ctx.closePath();
    },
 
    // zeichne Δ Figur
    3: (i, j, Farbe = '#FDE619'/*'#FFEB3B'*/) => {
        sei Mitte = (i + 0,5) * Zellengröße,
                Größe = Math.sqrt(3) * 0,525 * Zellengröße,
                oben = (j + 0,125) * Zellengröße,
                Höhe = 0,75 * Zellengröße,
                Schritt = Größe / 2;
 
        Linie (Mitte, oben, -Schritt, Höhe, Farbe);
        Linie (Mitte, oben, Schritt, Höhe, Farbe);
        Linie (Mitte – Schritt, oben + Höhe, Größe, 0, Farbe);
    }
};
 
 
let grid = neues Array(Zellenzahl * Zellenzahl).fill(0),
        erhalte = (i, j) => Raster [j * Zellenanzahl + i],
        setze = (i, j, val = 0) => Raster[j * Zellenzahl + i] = val,
        istFrei = (i, j) => get(i, j) == 0,
        checkVictory = (wer) => {
    lass iterieren = getter => {
        für (lass i = 0; i < winCount; i++)
            wenn (Getter(i) != wer)
                gibt false zurück;
        gibt true zurück;
    };
 
    let Zeile, Spalte, Pfad = {
        vertikal: _ => iterieren(i => get(Zeile + i, Spalte)),
        horizntl: _ => iterieren(j => get(col, row + j)),
        diagonal: _ => iterieren(i => holen(Zeile + i, Spalte + i)),
        Gegenteil: _ => iterieren(i => get(row + i, col + winCount - 1 - i)),
    };
 
    für (Zeile = 0; Zeile <= Zellenanzahl - WinCount; Zeile++) {
        für (col = 0; col < cell_count; col++) {
            wenn (Pfad.vertikal())
                return ['vertikal', Zeile, Spalte];
            wenn (Pfad.horizntl())
                return ['horizntl', Spalte, Zeile];
        }
 
        für (col = 0; col <= Zellenanzahl - WinCount; col++) {
            wenn (Pfad.diagonal())
                return ['diagonal', Zeile, Spalte];
            wenn (Pfad.gegenüber())
                return ['Gegenteil', Zeile, Spalte];
        }
    }
 
    zurückkehren [];
},
        onWin = ([Typ, Zeile, Spalte]) => {
    wenn (!Typ)
        zurückkehren;
 
    lass iterieren = Aktion => {
        für (lass i = 0; i < winCount; i++)
            Aktion(i);
    };
 
    lass drawSequence = {
        vertikal: _ => iterieren(i => fillRect(Zeile + i, Spalte)),
        horizntl: _ => iterieren(j => fillRect(Zeile, Spalte + j)),
        diagonal: _ => iterieren(i => fillRect(row + i, col + i)),
        Gegenteil: _ => iterieren(i => fillRect(row + i, col + winCount - 1 - i)),
    };
 
    klar();
    zeichneSequenz[Typ]();
    zeichne.raster();
 
    für (lass i = 0; i < Zellzahl; i++) {
        für (lass j = 0; j < Zellenanzahl; j++)
            zeichnen[holen(i, j)](i, j);
    }
 
    gibt true zurück;
};
 
 
lass playerTurn = 0;
 
Funktion Klick(e) {
    sei i = e.offsetX / Zellengröße | 0,
            j = e.offsetY / Zellengröße | 0;
 
    wenn (istFrei(i, j)) {
        lass Figur = SpielerTurn++ % Spieler + 1;
 
        Satz (i, j, Abbildung);
        zeichne[Abbildung](i, j);
        beim Sieg (checkVictory (Abbildung)) und canvas.removeEventListener (,click‘, click, false);
        ;
    }
}
 
 
zeichne.raster();

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Detaillierte Erklärung der benutzerdefinierten Swiper-Komponente in JavaScript
Detaillierte Erklärung des Unterschieds zwischen Pfeilfunktionen und normalen Funktionen in JavaScript
Karusselleffekte mit JavaScript implementieren
Javascript zum Wechseln von Bildern per Mausklick
Zusammenfassung verschiedener Methoden für JavaScript um festzustellen ob es sich um ein Array handelt
JavaScript zum Erzielen von Feuerwerkseffekten (objektorientiert)
Detaillierte Diskussion der Unterschiede zwischen Schleifen in JavaScript
Zusammenfassung einiger gängiger Möglichkeiten zum Abkürzen von Javascript-Code
13 JavaScript-Einzeiler, die Sie wie einen Experten aussehen lassen

<<: MySQL-Datenbankoptimierung: Detaillierte Erläuterung der Sharding-Operationen für Tabellen und Datenbanken

>>: Zusammenfassung der 10 am häufigsten gestellten Fragen in Linux-Interviews