Mein erstes Projekt in JavaScript – Dicegame 1.0
Mein erstes Projekt in JavaScript – Dicegame 1.0

Mein erstes Projekt in JavaScript – Dicegame 1.0

Projekt

Ich habe mein erstes JavaScript Projekt in Form eines kleinen Würfelspiels erstellt und es funktioniert auch nach einigen sehr kleinen Anlaufschwierigkeiten.

Nachdem ich einige Wochen die Basic von JavaScript verinnerlicht hatte wollte ich mein Wissen in einem Projekt anwenden anstatt immer nur in der Console zu arbeiten.

Die Idee

Ich hatte gelern dass man mit den beiden Funktionen Math.random() und Math.floor() einen Würfel simulieren kann. Nach einigem rumprobieren habe ich es sogar geschafft zwei Würfel gegeneinander konkurrieren zu lassen und je nach Ergebnis die passende Message auszugeben.

Ich beabsichtigte also dieses Wissen im Browser optisch umzusetzen. Der User würfelt gegen den Computer und je nachdem wie das Ergebnis ausfällt, werden verschieden Icons angezeigt.

Visuelle Aspekte

Es gibt insgesamt 8 Felder:

  • Avatar Machine
  • Avatar User
  • Würfel Machine
  • Würfel User
  • 2 Felder für eine Message oben
  • 2 Felder die als Button fungieren sollen unten

Die einzelnen Piktogramme habe ich in Canva erstellt.

Anforderungen

  • Der User klickt auf den Button „Play“ und die Würfel fallen
  • Gewinnt de User ist dessen Avatar grün und lächelt
  • Verliert der User ist dessen Avatar rot und traurig
  • Genauso verhält es sich für den Avatar des Computers, also Machine
  • Je nach Ergebnis haben die Würfel entweder die Farbe rot oder grün
  • Die Message in den beiden Feldern oberhalb passt sich den Umsänden an

Im Folgenden werde ich Schritt für Schritt erklären wie ich die HTML-Struktur erstellt habe.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.