Ich versuche, ein interaktives Raster für ein Web-Spiel (HTML, JS usw.) zu erstellen, in dem jede Zelle ihre Füllung beim Bewegen / Klicken ändern soll. Ich brauche sowohl ein regelmäßiges quadratisches als auch ein dreieckiges Gitter. Ich möchte, dass es vektorbasiert ist, damit es sich an verschiedene Bildschirmgrößen anpasst. Ich dachte, der einfachste Weg wäre, ein Muster zu erstellen und es in ein Rechteck zu füllen. Dies ist der Code, den ich bisher habe:

<pattern id="baseTile" width="10" height="10" patternUnits="userSpaceOnUse">
<path id="tile" d="M 0,0 L 0,10 10,10 10,0 Z" fill="none" stroke="gray" stroke-width="1"/>
</pattern>

Für das Quadrat und dies für das Dreiecksgitter:

<pattern id="baseTile" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 5,0 L 10,2.5 10,7.5 5,10 0,7.5 0,2.5 Z" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 5,0 L 5,10" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,2.5 L 10,7.5" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,7.5 L 10,2.5" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,0 L 0,2.5 M 0,7.5 L 0,10" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 10,0 L 10,2.5 M 10,7.5 L 10,10" fill="none" stroke="gray" stroke-width=".1" />
</pattern>

Sie produzieren die Gitter, die ich brauche, aber ich weiß nicht, wie ich jede Zelle einzeln ansteuern soll. Ich vermute, da ich keine Informationen dazu gefunden habe, ist es einfach nicht möglich und es sollte eine andere Lösung als die verwendet werden. Irgendwelche Ideen

Edit: Ich möchte per Mausklick durch verschiedene Füllungen blättern können. Für das quadratische Gitter verwende ich den Code, den ich hier gefunden habe:http: //bl.ocks.org/bunkat/260501 aber für das Dreiecksgitter habe ich absolut keine Ahnung, wo ich anfangen soll. Deshalb habe ich mir gedacht.

PS: Ich sollte hinzufügen, dass ich keine Programmiererfahrung habe. Ich versuche, ein Nonogramm-Spiel zu erstellen, um mir selbst etwas Javascript beizubringen.