εμφάνιση χάρτη παιχνιδιού με html/css

[xpan]

καλημέρα.

Ήθελα να φτάξω ένα μικρό web based παιχνίδι και θα ήθελα τη βοήθειά σας στο παρακάτω πρόβλημα. Θέλω να εμφανίσω έναν απλό 2D χάρτη που να είναι όμως interactive. Δηλαδή ο παίχτης να πατάει σε διάφορα σημεία κια να παίρνει πληροφορίες. Όχι κίνηση και τέτοια. Κάτι απλό.

Έχω τον χάρτη (τον έφτιαξα με ένα απλό 2D map πρόγραμα) και στη βάση μου (MySQL) έχω τις πόλεις και τις συντεταγμένες τους (loc_x, loc_y). Για την επικοινωνία με τη ΒΔ θα χρησιμοποιήσω Python.

Το ερώτημά μου είναι πως θα εμφανίσω το χάρτη με τις πόλεις ενσωματωμένες. Π.χ. με τη χρήση <table> και το χάρτη σαν ackground image και στα αντίστοιχα κελιά να εμφανίζω τις πόλεις (σύμφωνα με τις συντεταγμένες);

υπάρχει κάποια καλύτερη ιδέα;
Ευχαριστώ.

[xp1988]

Μπορείς να έχεις τον χάρτη σαν background-image ενός div και να έχεις πολλά div μέσα που να είναι relatively positioned.

<div style="width:300px; height:300px;" id="map">
<div id="city1" style="position:relative; top:30px; left:30px;"></div>
<div id="city2" style="position:relative; top:60px; left:30px;"></div>
</div>

Το city1 div θα είναι πάνω απ τον χάρτη. Η θέση του θα είναι 30 pixel κάτω (απ το πάνω μερος του map) και 30 pixel πιο δεξιά (απ την αριστερή μεριά του map).

Οπότε θα πρέπει να βρεις κάποια συνδεση ανάμεσα στις συντεταγμένες που έχεις αποθηκευμένες στην βάση με τα pixel του χάρτη.

Τώρα αν θέλει ο χρήστης να μπορεί να κάνει drag τον χάρτη θα πρεπει να γράψεις λίγο javascript για να μετακινούνται ανάλογα και οι πόλεις όσο κουνιεται ο χάρτης.

[xpan]

Σε ευχαριστώ πολύ. Μου ακούγεται μια χαρά η λύση που προτείνεις και θα την δοκιμάσω άμεσα κιόλας. Μια ερώτηση μόνο. Τι γίνεται σε περίπτωση που ο χρήστης αυξομειώσει το μέγεθος του παραθύρου; Διατηρούνται οι συντεταγμένες;

Γενικά css άρχισα να διαβάζω πριν λίγες μέρες και δεν έχω μεγάλη εμπειρία. Η εμπειρία μου βρισκεται κυρίως σε server side programming (java, python, κλπ)

YΓ. Επίσης να υποθέσω πως αν θέλω να εφαρμόσω κάποιο event τύπου (onMouseEnter()) στο div της πόλης θα μπορώ να εμφανίζω κάποιο floating παράθυρο με πληροφορίες της πόλης.

[xp1988]

Τι γίνεται σε περίπτωση που ο χρήστης αυξομειώσει το μέγεθος του παραθύρου; Διατηρούνται οι συντεταγμένες;

Εάν διατηρείται το μέγεθος του map div τοτε θα διατηρήσουν την θέση τους και τα divάκια μέσα. Βάλε το width και height του div να είναι καθορισμένο, πχ στο css:

#map
{
    width:400px;
    height: 400px;
}

Επίσης να υποθέσω πως αν θέλω να εφαρμόσω κάποιο event τύπου (onMouseEnter()) στο div της πόλης θα μπορώ να εμφανίζω κάποιο floating παράθυρο με πληροφορίες της πόλης.

Ναι αμέ, σε κάθε div θα έχεις ενα onmouseover="showInfo('Athens','The capital of Greece')" . για παράδειγμα το οποίο θα δημιουργείται δυναμικά ανάλογα με τα στοιχεια κάθε πόλης και θα βγάζει ένα popup με τις πληροφορίες που περνάς ως παραμέτρους. Η function στην javascript θα είναι κάτι του τύπου:

function showInfo(cityName, cityDescription)
{
    alert(cityName + ': '+ cityDescription);
}

Εννοείται οτι δεν θα χρησιμοποιήσεις alert γιατι θα είναι απιστευτα ενοχλητικό, απλά το αναφέρω σαν παράδειγμα.

[xpan]

Ευχαριστώ και πάλι. Θα το δοκιμάσω όλα αυτά και θα επανέλθω εαν χρειαστεί.

[xpan]

Καλημέρα.

Έκανα ότι είπες άλλα μάλλον κάτι κάνω λάθος.

οι πόλεις εμφανίζονται στον χάρτη στις θέσεις που θέλω. Μόνο που όταν ο χάρτης "κατεβαίνει" γραμμή (π.χ. επειδή μπορεί να πρόσθεσα μια γραμμή κείμενο στην παράγραφο πάνω από τον χάρτη) οι πόλεις δεν προσαρμόζονται. Παραμένουν στις θέσεις που είχαν πριν προσθέσω τη γραμμή.

Δηλαδή κάθε φορά που αλλάζω το κείμενο θα πρέπει να πηγαίνω στη βάση και να τροποποιώ τα x,y locations.

#map1{
    background-color: #000;
    background-image: url(/site_media/images/map1-sm.png);
    width:800px;
    height:500px; 
}

div .city {
    position: absolute;
    width: 64px;
    height: 35px;
    text-align: center;
} 

αν αλλάξω το position σε relative τότε οι πόλεις βγαίνουν σε σχετικό σημείο η μία από την άλλη και όχι από τον χάρτη. Ή κάτι τέτοιο έχω καταλάβει εγώ, τουλάχιστον.

Τι κάνω λάθος;

[hedgehog]

Μία εναλλακτική προσέγγιση που πιθανώς βρεις ενδιαφέρουσα είναι να παράγεις δυναμικά τον χάρτη σε svg μορφή.
Για να εξασφαλίσεις την συμβατότητα με παλαιότερους browsers μπορείς να τον κάνεις και rasterize σε jpg φυσικά, χάνωντας όμως τα πλεονεκτήματα του svg...

[xp1988]

Absolute χρειάζεται έχεις δίκιο. Δεν μπορώ να καταλάβω όμως γιατί δεν κατεβάινουν και οι πόλεις όσο κατεβάινει ο χάρτης. Άν θέλεις δοκίμασε να κάνεις position: absolute και τον χάρτη να δεις μήπως αλλάξει κάτι.

[xpan]

Μία εναλλακτική προσέγγιση που πιθανώς βρεις ενδιαφέρουσα είναι να παράγεις δυναμικά τον χάρτη σε svg μορφή.
Για να εξασφαλίσεις την συμβατότητα με παλαιότερους browsers μπορείς να τον κάνεις και rasterize σε jpg φυσικά, χάνωντας όμως τα πλεονεκτήματα του svg...

Θα μπορεί να είναι interactive ο χάρτης με σχετικά εύκολο τρόπο; Βάζοντας τις πόλεις πάνω στο χάρτη κατά τη διάρκεια του rendering της σελίδας διατηρώ την δυνατότητα να αλληλεπιδράσω. Π.χ. επιλέγοντας μια πόλη και βλέποντας τα στατιστικά της ή επιλέγοντας 2-3 πόλεις μαζί... κλπ κλπ

Absolute χρειάζεται έχεις δίκιο. Δεν μπορώ να καταλάβω όμως γιατί δεν κατεβάινουν και οι πόλεις όσο κατεβάινει ο χάρτης. Άν θέλεις δοκίμασε να κάνεις position: absolute και τον χάρτη να δεις μήπως αλλάξει κάτι.

παραθέτω και το html.

<div id="map1">
        {% for city in cities %}
        <div class="city" style="top: {{ city.y }}px; left: {{ city.x }}px;">
            <div class="citypop">{{ city.population }}</div>
            <a href="javascript:selectCity({{region.id}}, {{city.id }});"><img src="/site_media/images/city1.png" title="{{ city.name }} [{{ city.population }}]" /></a>
            <p>{{ city.name }}</p>
     
        </div>        
        {% endfor %}        
    </div> 

μήπως βγάλετε άκρη

[hedgehog]

Θα μπορεί να είναι interactive ο χάρτης με σχετικά εύκολο τρόπο; Βάζοντας τις πόλεις πάνω στο χάρτη κατά τη διάρκεια του rendering της σελίδας διατηρώ την δυνατότητα να αλληλεπιδράσω. Π.χ. επιλέγοντας μια πόλη και βλέποντας τα στατιστικά της ή επιλέγοντας 2-3 πόλεις μαζί... κλπ κλπ

Ναι, μια markup γλώσσα είναι και αυτή που μεταξύ άλλων υποστιρίζει a tag

[xp1988]

Να σου πω, κοίταξα λίγο το CSS σου και νόμιζω πως το λάθος είναι εδω:

div .city { /* Δεν χρειάζεται space! */
position: absolute;
width: 64px;
height: 35px;
text-align: center;
}  

Θα έπρεπε να είναι

div.city 
{
position: absolute;
width: 64px;
height: 35px;
text-align: center;
}  

Δοκίμασε λίγο και πες μου. Τα στοιχεία απο μόνα τους έχουν position: static το οποίο θα εξηγούσε γιατί όσο κατεβάινει ο χάρτης δεν μετακινούνται και οι εικόνες (static σημαινει θέση σε σχέση με το browser window).

[xpan]

δεν ξέρω αν αυτό έπαιξε ρόλο όμως έκανα και μια μικρή αλλαγή και έπαιξε κανονικά:

#map1{
    background-color: #000;
    background-image: url(/site_media/images/map1-sm.png);
    width:800px;
    height:500px;
    position:relative;
}

div.city {
    width: 64px;
    position: absolute;
    height: 35px;
    text-align: center;
} 

Δηλαδή άλλαξα μόνο το position του map1 id σε 'relative'. Ειλικρινά δεν ξέρω γιατί, άλλα έπαιξε.