Een kaart in PHP met aanklikbare steden
Ik ben bezig met een browsergame. Echter wil ik daar een kaart bij hebben met steden erop. Op PHP.net had ik deze link gevonden: http://php.net/manual/en/function.imageline.php
Verder heb ik op internet rond gezocht, maar ben ik niet gekomen waar ik wil zijn. Weet iemand hoe ik een kaart maak waar steden op komen als spelers zich registreren?
Misschien met enig hulp van Canvas.
Ondertussen ben ik zover dat de "Steden" er staan. Echter op de telefoon gaan deze overlappen. Wat kan ik daartegen doen? Ook als ik op de PC mijn scherm kleiner maak gebeurt hetzelfde.
Plaatje:
http://i.imgur.com/1PFeRQS.png
Op de telefoon gaan de rondjes met S over elkaar heen schuiven. CSS:
(1e 10 plaatjes):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
#kaart{
position:relative;
left:33%;
top:16%;
width:400px;
height:400px;
min-height:400px;
min-width:400px;
}
#locatie1{
position:absolute;
left:33%;
top:16%;
width:20px;
height:20px;
min-height:20px;
min-width:20px;
display: inline;
}
#locatie2{
position:absolute;
left:36%;
top:16%;
width:20px;
height:20px;
min-height:20px;
min-width:20px;
display: inline;
}
#locatie3{
position:absolute;
left:39%;
top:16%;
width:20px;
height:20px;
min-height:20px;
min-width:20px;
}
#locatie4{
position:absolute;
left:42%;
top:16%;
min-height:20px;
min-width:20px;
}
#locatie5{
position:absolute;
left:45%;
top:16%;
min-height:20px;
min-width:20px;
}
#locatie6{
position:absolute;
left:48%;
top:16%;
min-height:20px;
min-width:20px;
}
#locatie7{
position:absolute;
left:51%;
top:16%;
min-height:20px;
min-width:20px;
}
#locatie8{
position:absolute;
left:54%;
top:16%;
min-height:20px;
min-width:20px;
}
#locatie9{
position:absolute;
left:57%;
top:16%;
min-height:20px;
min-width:20px;
}
#locatie10{
position:absolute;
left:60%;
top:16%;
min-height:20px;
min-width:20px;
}
position:relative;
left:33%;
top:16%;
width:400px;
height:400px;
min-height:400px;
min-width:400px;
}
#locatie1{
position:absolute;
left:33%;
top:16%;
width:20px;
height:20px;
min-height:20px;
min-width:20px;
display: inline;
}
#locatie2{
position:absolute;
left:36%;
top:16%;
width:20px;
height:20px;
min-height:20px;
min-width:20px;
display: inline;
}
#locatie3{
position:absolute;
left:39%;
top:16%;
width:20px;
height:20px;
min-height:20px;
min-width:20px;
}
#locatie4{
position:absolute;
left:42%;
top:16%;
min-height:20px;
min-width:20px;
}
#locatie5{
position:absolute;
left:45%;
top:16%;
min-height:20px;
min-width:20px;
}
#locatie6{
position:absolute;
left:48%;
top:16%;
min-height:20px;
min-width:20px;
}
#locatie7{
position:absolute;
left:51%;
top:16%;
min-height:20px;
min-width:20px;
}
#locatie8{
position:absolute;
left:54%;
top:16%;
min-height:20px;
min-width:20px;
}
#locatie9{
position:absolute;
left:57%;
top:16%;
min-height:20px;
min-width:20px;
}
#locatie10{
position:absolute;
left:60%;
top:16%;
min-height:20px;
min-width:20px;
}
Code (php)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
ul.map {
width: 500px;
height: 500px;
background: url('statischekaart.jpg');
}
ul.map li {
width: 25px;
height: 25px;
float: left;
}
ul.map li a.cityOn {
background: url('stad.jpg');
}
width: 500px;
height: 500px;
background: url('statischekaart.jpg');
}
ul.map li {
width: 25px;
height: 25px;
float: left;
}
ul.map li a.cityOn {
background: url('stad.jpg');
}
Stel je hebt dus een kaart met max 400 steden. Dan zou je bij het laten registreren een plek kunnen kiezen. Zo kom je dan aan het stadID. Die sla je dus bij de gebruiker op.
Gewijzigd op 01/03/2014 21:01:04 door Milo S
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
ul.map {
width: 500px;
height: 500px;
background: url('kaart.png');
}
ul.map li {
width: 25px;
height: 25px;
float: left;
}
ul.map li a.cityOn {
background: url('stad.png');
}
</style>
<ul id="map">
<?php
include '../conn.php';
$res = mysql_query("SELECT kaart_nr FROM S1_Steden")or die(mysql_error());
$i = 1;
while( $rec = mysql_fetch_assoc( $res ) )
{
$cityOn = ( $rec['kaart_nr'] == $i ) ? 'class="cityOn" ' : '';
echo '<li><a '.$cityOn.'href=""></a></li>';
$i++;
}
?>
</ul>
ul.map {
width: 500px;
height: 500px;
background: url('kaart.png');
}
ul.map li {
width: 25px;
height: 25px;
float: left;
}
ul.map li a.cityOn {
background: url('stad.png');
}
</style>
<ul id="map">
<?php
include '../conn.php';
$res = mysql_query("SELECT kaart_nr FROM S1_Steden")or die(mysql_error());
$i = 1;
while( $rec = mysql_fetch_assoc( $res ) )
{
$cityOn = ( $rec['kaart_nr'] == $i ) ? 'class="cityOn" ' : '';
echo '<li><a '.$cityOn.'href=""></a></li>';
$i++;
}
?>
</ul>
(Heb ik voor nu even in Mysql veranderd).
Nu krijg ik het volgende resultaat:
http://i.imgur.com/rrwsRVe.png
Tabel S1_Steden:
Code (php)
1
2
3
4
2
3
4
|ID|Username|kaart_nr|Punten| ->> Verder met alle grondstoffen etc.
|1 |Trivium.|4 |225 |
|2 |Godin |1 |225 |
|3 |POTG |2 |225 |
|1 |Trivium.|4 |225 |
|2 |Godin |1 |225 |
|3 |POTG |2 |225 |
Beter gezegd: De plaatsen 1,2,3,4 en 6 zijn bezet. Waarom krijg ik nu niet de steden te zien met de kaart?
Verder was dit een duw in de goede richting en moet je de rest zeker nog zelf bedenken. Nu zul je waarschijnlijk alle steden naast elkaar krijgen. Wat je niet wilt uiteraard.
Hiertegen kun je 2 dingen doen. Of allemaal lege list items aan gaan maken voor de nog niet bezette plekken. Of je gaat een combinatie maken van jou en mijn idee. Dat laatste zou inhouden dat je met php coördinaten gaat berekenen om de list item op de goede plek te krijgen.
Voorbeeld voor het laatste
Code (php)
Topmargin is de naarbeneden afgeronde uitkomst van je stad id gedeelt door het aantal rijen maal het aantal pixels.
Je leftmargin is je stad id min de naarbeneden afgeronde uitkomst maal het aantal rijen waarvan het totaal ook weer keer het aantal pixels word gedaan.
Oh en voor ik het vergeet nog een opmerking over jou geplaatste code, ik mis een correcte foutafhandeling.