Mission 1: Tic-Tac-Toe

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 dir den Code

CODE SKILLS

JavaScript hinzufügen

Mache das Spiel mit JavaScript interaktiv.

Hole dir den Code

CODE SKILLS

Kreise und Kreuze hinzufügen

Füge Kreise und Kreuze in das Spielfeld ein.

Hole dir den Code

CODE SKILLS

Zwei Spieler einrichten

Füge einen zweiten Spieler hinzu.

Hole dir den Code

CODE SKILLS

Den Gewinner ermitteln

Finde heraus, ob drei gleiche Symbole in einer Reihe sind.

Hole dir den Code

CODE SKILLS

Schleifen verwenden

Verwende Schleifen, um das gesamte Spielfeld zu prüfen.

Hole dir den Code

CODE SKILLS

Den Programmtext vereinfachen

Mache den Code-Block kürzer.

Hole dir den Code

CODE SKILLS

Das Spiel fertigstellen

Beseitige den letzten Bug in deinem Spiel!

Hole dir 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 dir den Code

Copyright © 2008 Walker Books Ltd
Illustrations © Duncan Beedie
All rights reserved.