Logical (Game) mit JavaScript programmieren?

Ich muss für die Schule ein Game programmieren und ich habe mich für ein Logical entschieden. Das Raster, um die Kreuze und die Kreise zu setzen, habe ich programmiert und komme jetzt zu dem Teil, bei dem ich ein „Korrigieren“-Button einfügen um die Antworten zu kontrollieren. Wenn die Antwort falsch war, wäre das Ziel, dass das betroffene Feld rot wird. Die richtig angekreuzten Felder sollen grün werden. Ich würde es gerne mit Arrays machen, jedoch weiss ich nicht genau, wie ich dies machen muss. Ich denke, es wäre am einfachsten, für jede Spalte oder Zeile ein Array zu generieren und den richtigen Array mit diesem zu vergleichen.

So sieht mein Programm bis jetzt aus.

HTML:

JavaScript:

CSS:

und so sieht das Raster aus:

Könnte mir jemand helfen?

Answer 1

[regex9]

Du kannst ein zweidimensionales Array anlegen, welches deine Matrix abbildet.

Beispiel mit boolschen Werten:

const matrix = [
  [ true, false, false ],
  [ false, false, false ],
  [ false, true, true ]
];

Mit Schleifen kannst du später über dieses Array iterieren.

Beispiel:

for (let row = 0; row < matrix.length; ++row) {
  for (let column = 0; column < matrix[row].length; ++column) {
    console.log(matrix[row][column]);
  }
}

Wenn du in deinem Markup jede Zelle mit einer ID ausstattet, die sich nach einem festen Muster aufbaut, welches die Reihe und Spalte beinhaltet (z.B. cell-1-2), dann könntest du diese ID auch innerhalb der Schleife aufbauen und dazu nutzen, um im DOM nach dem Zellenelement zu suchen.

PS.: Alle Seitenelemente, die den sichtbaren Inhalt der Webseite repräsentieren, gehören in den body-Bereich. Außerhalb von head- und body darf kein anderes Element stehen.