Mission 1: Tic-Tac-Toe - Ullmannmedien

In Mission 1 wirst du Tic-Tac-Toe programmieren und dabei HTML, CSS und JavaScript einsetzen. Du fängst mit einer HTML-Seite an, die die Basisstruktur des Spiels enthält. Dann verwendest du CSS, um das Aussehen auf dem Bildschirm zu ändern. Schließlich lernst du, wie du mit JavaScript dein Spiel interaktiv machen kannst.

Das Spielfeld von Tic-Tac-Toe ist ein Raster mit drei Spalten und drei Zeilen und wird mit einem HTML-<div>-Tag aufgebaut. Wenn ein Spieler eine Zelle des Rasters anklickt, wird entweder ein Kreuz oder ein Kreis angezeigt. Wenn ein Spieler drei gleiche Symbole hintereinander hat, erscheint eine Alert-Box mit der Meldung, dass sie oder er gewonnen hat.

CODE SKILLS:Das Spielfeld
Erstelle das Spielfeld mit HTML und CSS.
Hole den Code
CODE SKILLS:JavaScript hinzufügen
Mache das Spiel mit JavaScript interaktiv.
Hole den Code
CODE SKILLS:Kreise und Kreuze hinzufügen
Füge Kreise und Kreuze in das Spielfeld ein.
Hole den Code
CODE SKILLS:Zwei Spieler einrichten
Füge einen zweiten Spieler hinzu.
Hole den Code
CODE SKILLS:Den Gewinner ermitteln
Finde heraus, ob drei gleiche Symbole in einer Reihe sind.
Hole den Code
CODE SKILLS:Schleifen verwenden
Verwende Schleifen, um das gesamte Spielfeld zu prüfen.
Hole den Code
CODE SKILLS:Den Programmtext vereinfachen
Mache den Code-Block kürzer.
Hole den Code
CODE SKILLS:Das Spiel fertigstellen
Beseitige den letzten Bug in deinem Spiel!
Hole den Code

SUPER SKILLS: Entwickle dein Spiel weiter!

Hole den kompletten Quellcode für dein Spiel. Nutze deine neuen Code-Skills: Wie kannst du das Aussehen deines Spielfelds verändern?

Hole den Code

Name	Borlabs Cookie
Anbieter	Eigentümer dieser Website, Impressum
Zweck	Speichert die Einstellungen der Besucher, die in der Cookie Box von Borlabs Cookie ausgewählt wurden.
Cookie Name	borlabs-cookie
Cookie Laufzeit	1 Jahr

Akzeptieren	Google Analytics
Name	Google Analytics
Anbieter	Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Ireland
Zweck	Cookie von Google für Website-Analysen. Erzeugt statistische Daten darüber, wie der Besucher die Website nutzt.
Datenschutzerklärung	https://policies.google.com/privacy?hl=de
Cookie Name	_ga,_gat,_gid
Cookie Laufzeit	2 Jahre

CODE SKILLS:Das Spielfeld

CODE SKILLS:JavaScript hinzufügen

CODE SKILLS:Kreise und Kreuze hinzufügen

CODE SKILLS:Zwei Spieler einrichten

CODE SKILLS:Den Gewinner ermitteln

CODE SKILLS:Schleifen verwenden

CODE SKILLS:Den Programmtext vereinfachen

CODE SKILLS:Das Spiel fertigstellen

SUPER SKILLS: Entwickle dein Spiel weiter!