Fragen zu Browsergameerstellung

Dein Vorhaben ist schon etwas komplex. Ich würde es mit Canvas und einer Bibliothek wie jCanvas machen, weil diese Drag&Drop unterstützt. Das Spielfeld könntest du leicht mit zwei verschachtelten Schleifen anlegen. Menü mit den Gebäuden ebenfalls anlegen. Dann mit Drag&Drop die Gebäude auf eine Kachel ziehen lassen.

Noch etwas komplexer würde es, wenn es in 3D sein soll. Auch dafür gibt es, glaube ich, Bibliotheken, aber ich habe keine Erfahrung damit.

Wenn Du auch noch keine Erfahrung hast, würde ich empfehlen, mit einer 2D-Version zu beginnen.

Zitat

Wie bekomme ich dieses raster dann nur funktionsfähig (Woher will der Browser erkennen auf welche Vierecke ich genau klicke)?

Idee: diese vierecke verlinken

Wohl weniger verlinken, sondern eher mit einem Eventhandler versehen. Informiere dich über die Funktion addEventListener bzw. die Äquivalente bei jQuery.

Zitat

Und dann wenn man dieses anklickt diese mit hintergrundfarbe rot machen und das menü öffnen mit den Häusern

So geht es auch. Ich hatte daran gedacht, die Häuser auf dem Spielfeld zu platzieren und der Spieler kann sie per Drag&Drop auf ein Viereck drauf ziehen.

Zitat

Wie kann man es denn realisieren das Wohnhäuser nur 1 viereck haben, Kirchen 8 (2 felder breite, 8 felder länge), Rathhaus (4 felder breite, 4 felder länge) haben ?

Wahrscheinlich müsstest Du festlegen, dass man auf das linke obere Viereck klicken/ziehen muss. Dann die Felder belegen:

// Geklicktes Element hat die Koordinaten x und y
var len = 4, width = 2;
for (var i = 0; i < len; i++) {
    for (var j = 0; j < width; j++) {
        // Viereck mit den Koordinaten x+i und y+j mit Gebäude belegen
    }
}

Zitat

Da könnte mann dann jedes Haus als array machen, und in diesem array die keys , verbrauchte Rohstoffe sowie einwohnerzahl mit deren value geben. Und dann beim Bauen die benötigten Ressourcen abziehen + die Einwohnerzahl addieren.

Dafür wurde sich ein Objekt i. S. von Javascript anbieten, in dem Du die gesammelten Informationen ablegst. Oder in einen objektorientierten Ansatz einsteigen und die Gebäude als Instanzen einer "Klasse" anlegen.

Zitat

Upleveln neue Gebäude/Ressourcen freischalten: Überprüfung ob erhaltene punkte den sollpunktezahl erreicht hat und wenn ja die disabled Häuser/Ressourcen enablen. Aber wie soll man dies denn machen, das enablen ?

Ich würde weniger enabeln als vielmehr die Gebäude/Ressourcen neu anlegen. Die Gebäude, die einem Spieler gehören, in einem Array ablegen und neue hinzufügen. Für das Anlegen würde sicher ebenfalls ein objektorientierter Ansatz anbieten, dann kann man ein neues Gebäude mir "new" anlegen und die Eigenschaften wie Einwohnerzahl, etc. sind gleich verfügbar.

Zitat

Woher will der Browser nun wissen wo denn die Kästchen sind auf denen man die Häuser platziert?

Also wenn man nun ein haus aus dem menü zieht auf das raster, dass dann der Browser sieht dort sind die kästchen wo es platziert werden kann. Und nicht in der Mitte der Kästchen.

Dafür sehe ich zwei Möglichkeiten:

1. Beim Ziehen sind die Koordinaten der Maus oder des Kästchens verfügbar. Kennt man die linke obere Ecke der Matrix mit den Kästchen, kann man berechnen, in welchem sich die Maus oder das gezogene Element befinden.

2. Man könnte die Daten der Kästchen einschl. x- und y-Koordinaten in einem Array ablegen. Dann kann man ebenfalls ermitteln, in welchen Kästchen man sich befindet. Man kann das Objekt auch auf den Kästchen einrasten lassen, siehe hier:

https://projects.calebevans.me/jcanvas/docs/draggableLayers/

(ganz unten)

Zitat

Also ist in javascript schon ein Objekt für solche Angelegenheiten vorhanden, wo man einfach mit den funktionen nutzen kann ?

Zu Objekten siehe z. B. hier:

https://wiki.selfhtml.org/wiki/JavaScript/Objekte

Ein Objekt gibt es nicht fertig für einen bestimmten Anwendungszweck, sondern man muss es selber anlegen:

var kirche = {breite: 2, laenge: 5, einwohner: 100, key_a: "xxx", key_b: "yyy"};

Zitat

Was bedeutet das i.S. ?

Das bedeutet "im Sinne von": Der Begriff "Objekt" ist leider mehrdeutig, wie Du aus dem Link oben entnehmen kannst.