Möglichkeiten Karte zu erstellen?

G

ghost

0
Vor einiger Zeit hab ich das Browsergame Inselkampf gespielt (Startinsel ausbaun, andere Inseln erobern, Allianz mit anderen Spielern bilden ). Damals haben manche Karten und Tools geproggt. Jetzt ist mal wieder ein Inselkampf-Klon aufgetaucht und dort wird grad drüber gesprochen das so eine Karte ( Serverkarte = Karte des ganzen Ozeans auf denen die Inseln entsprechend gekennzeichnet sind ). Jetzt hab ich mich gefragt wie man sowas generell erstellen kann.

Die Voraussetzungen wären:
- Ozean z.B.: 50x50 oder 100x100 Bereiche groß
- Je Bereich 5x5 Plätze an denen Inseln sein können
- einfachstes Design d.h. Kästchen die entsprechend eingefärbt werden
http://editthis.info/images/inselkampf/a/ae/Example.PNG
http://mole.gnubb.net/die_staemme/continentmap.png
< so ähnlich, also weisser oder blauer Hintergrund und das Kästchen wo die Insel ist ne andere Farbe
- Mouseover, also wenn man mit dem Cursor über ne Insel geht werden Infos dazu angegeben
- Online erzeugen, übern Server, nicht lokal am Rechner

Ich hab mir jetzt mal diese einfachen Karten angeschaut und mich gefragt wie man die erstellen kann. Das einfachste wäre wohl mit Tabellen. Aber ist das die einzige Möglichkeit? Und was ist wenn der Ozean recht groß ist ( z.B.: 100x100 ) wie kann man sowas erzeugen?
 
Das einfachste hierbei wäre m.M. nach nicht HTML dafür zu nehmen, weil du ja auch auf den Daten arbeiten musst, und das was du darstellen willst definitiv keine tabellarische Daten sind.

An deiner Stelle würde ich ein JS-SDK programmieren, welches eine Karte in Form eines 2D-Arrays nimmt(bzw. Array mit Objekten welche Infos über den Zustand des Feldes enthalten) und diese würde ich dann mittels Canvas einfach darstellen.

Dadurch würde dann die Datenstruktur auf der du arbeitest das Feld bedingen und nicht das Feld die Daten auf dennen du arbeitest.
Macht den Code einfacher.
Gruß

Fluffy

P.s.:
Schon geil die HTML5 Sache.
Sie erlaubt es uns nun genauso zu programmieren wie mit Java,C#, etc.
 
Falls es um den Klon Seekampf geht gibt es eine API für Daten in Echtzeit ohne große Restriktionen.

Laut dem was auf der Webseite steht werden die Daten irgendwie in JSON-geliefert (vermutlich als Array).

Im Grunde genommen läuft das ja meist so ab:

1. per API: Daten der Spieler und Allianzen (Name bzw Tag wird wohl reichen)
- diese Daten würde ich zwischenspeichern und nur gelegentlich mal aktualisieren, da der Betreiber bei zu viel Traffic über die API bestimmt irgendwelche Regeln diesbezüglich erlässt.
2. per Client/Webseite: Information vom User bekommen welcher Spieler und welche Allianzen markiert werden sollen. (per AJAX oder Websockets lassen sich da tolle Vorschläge während des Tippens anzeigen)
3. per API: die Inseln dieser Spieler und Allianzen laden (sofern möglich) oder alle Inseln laden und nur die bestimmten markieren.
4. Darstellung: ich würde dir zu einer Canvas raten und schöne Rechtecke per JS darauf zeichnen. Tutorials gibt es dazu Tausende mit denen du das erfährst was du wissen musst.
 
Ja da gibts ne API und ich könnt die Daten immer beim erstellen laden aber auch 2-3x täglich in ne DB packen. Mir gehts primär um die "Darstellung", was da so alles möglich ist.

Mit JS steh ich persönlich bisher auf Kriegsfuss XD entweder es lief nur aufm IE ( bei ner zu ändernden Webseite ) oder es war bei den Leuten deaktiviert. :rolleyes:

Hmmm Canvas, werd ich wohl nicht drum rum kommen mich damit mal intensiver zu beschäftigen ;)
 
Die Canvas mit dynamischen Daten ist ohne JS praktisch nutzlos. In Zeiten von FB & Co haben meiner Erfahrung nach viel weniger Leute JS deaktiviert als es früher mal der Fall war.

Wenn du eine "besser" getypte Sprache nutzen möchtest für den Client (oder auch den Server!) magst du dir vielleicht mal Dart angucken. Die Sprache ist finde ich persönlich ein guter Mittelweg und ziemlich komfortabel.
 
Hab mir jetzt mal Canvas - kurz und gut von O´Reilly geholt und gehs mal durch. Dabei werd ich sicher meine JS Kenntnisse aufpolieren/erweitern müssen *g*

Sollte aber wer ein Canvas-Beispiel für so eine Karte kennen ( oder etwas ähnliches das in das Schema passt ), dann bitte mir einfach den Link schicken ;)
 
Ich verstehe das Problem nicht.

Wenn du weißt was du markieren willst brauchst du nur die Größe deiner Canvas bzw. die größe des Ozeans und die Größe der einzelnen Markierungen. Außerdem musst du ja wissen was du markieren willst.

Fangen wir damit an: du hast L:B:I (Längengrad:Breitengrad:Insel) L und B zusammen identifizieren den "Sektor" indem sich die Insel befindet. Je nachdem wie herum gezählt wird bei den Sektoren (also links nach rechts oder oben nach unten) musst du das entsprechend in andere Koordinaten umrechnen.

Da nehme ich jetzt einfach mal an, dass die Sektoren von links nach rechts gezählt werden und die Koordinaten am Ende die x|y-Form haben sollen, nur eben dass 0 bei der y Koordinate oben bedeutet und nicht unten (also entgegen der Art, wie man Graphen zeichnen würde).

Dann kannst du das relativ leicht umrechnen:
Code: 
L:B:I = 34:06:74
x|y = 464|307
Als Formel kann man das so rechnen:
Code: 
x = (L mod 10)*100 + (B mod 10) * 10 + I mod 10
y = (L div 10)*100 + (B div 10) * 10 + I div 10
Wichtig: div ist in diesem Fall explizit die Ganzzahldivision mit abgerundetem Ergebnis.

Mit den x|y - Koordinaten kann jetzt gezeichnet werden.

Wenn eine Insel wie im Eingangsposting erwähnt dann 5x5 Felder groß sein soll ist die Zeichenposition durch (5*x, 5*y) gegeben:

Code: 
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(5*x,5*y,5,5);
"angepasst" von Quelle

Ich glaube auf dieser Seite findest du auch alles was du brauchst um mit der Canvas auch die Grenzen einzuzeichnen.



Kurz: es wird nicht einfacher als das.
 
Ähem ich hab ja nix von nem Problem gesagt, nur das ichs mir erst zu gemüte führen muss da ich ein extremer JS Laie bin XD

Das "ausmalen" hab ich auch schon verinnerlicht. Mein Kopf streikt nur noch beim dem Punkt wie ich den Übergang von Daten aus DB/XML zu einzelne Inseln/Quadrate zeichnen bewerkstellige.

Bei ner html Tabelle hatte ich da beim Tabellenaufbau die Abfrage ( Tabellenaufbau in Schleifen - Zelle 1/1 - DB-Abfrage - Insel da > roter Hintergrund - Zelle 1/2 ( Schleife zählt weiter ) - nächste DB-Abfrage ... usw. ).

Deshalb die Frage nach nem ähnlich gelagerten Beispiel. Ich versteh noch nicht so wie ich bei JS/Canvas die Daten aus der DB an die richtige Bildposition krieg, da hängts noch.

Edit: Ebenso müssten zumindest zwischen den Bereichen ( also großer Ozean > unterteilt in Unterabschnitte von 100x100 ) ein "Rahmen" sein ( siehe Bsps. im 1. Post bzw. hier http://gh0st.bplaced.net/map.JPG). Das ganze sollte halt etwas übersichtlich sein.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben