Karte im Onlinegame scrollen
Guten abend
Mein zweiter Tag hier im Forum beginnt
Also:
Ich habe vor ein kleines Onlinegame zu entwickeln. (kann leider kein JS -.-)
Wenn hier jemand das Spiel "Die Stämme" (
www.die-staemme.de ) kennt, weiß derjenige vielleicht eher was ich meine
Undzwar habe ich folgendes vor:
Ich erstelle eine Karte (1000x1000px) von der nur 200x200px im Browser zu sehen sind.
Wenn man dann auf eine der Pfeile klickt soll man dadurch (wie ein Ajax-Request
) auf der Karte hoch, runter usw. scrollen können.
Gibts dafür vielleicht irgendwo nen Codeschnipsel?
Weiß nämlich nicht wonach ich da suchen soll -.-
Aber am besten wäre es, wenn mir vielleicht jemand hier den Code dafür selbst machen könnte
LG L-Jay
PS: Hier mal ein Beispiel von die Stämme:
Rechtschreibfehler sind gewollt und dienen der Belustigung!
Bitte mal alle
hier klicken - Danke ;-)
schau mal
hier , da gehts u.a. darum eine Karte ohne Reload zu scrollen.
Mit einem XMLHttpRequest müsste das zu realisieren sein, frag mich aber bitte nicht wie.
ak
edit: Such mal mit Google nach "xmlhttprequest", da wirste genug finden
Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »andreaskeil« (18. Oktober 2008, 09:22)
Hat vielleicht noch jemand anderes ne Ahnung davon??
Kapier net so gut, wie des funzen soll...hab mich bis jez noch net so mit den Bild-Funktionen von PHP beschäftigt..
Rechtschreibfehler sind gewollt und dienen der Belustigung!
Bitte mal alle
hier klicken - Danke ;-)
Ich würde das Bild einfach in die von dir im Spiel benötigten ansichten zerschneiden und denen vom Titel her Koordinaten zuordnen.
"Fehler sind immer zu Verzeihen, wenn man den Mut hat, diese auch zu zugeben." Lee Jun-Fan
RE: Karte im Onlinegame scrollen
Guten abend
Aber am besten wäre es, wenn mir vielleicht jemand hier den Code dafür selbst machen könnte
du bist doch funny. du hast mir doch geschrieben dass wenn du dir ein quellcode anschaust, du dann es nachvollziehen kannst, andreaskeil hat dir doch ne url geschickt schau dort doch einfach mal nach. da sind schon fast komplette codeschnipsel
oder willste ein code für eine komplete map die in einer funktion drin ist wo du einfach nur in deinem html code map(); ausgibst und die map wird angezeigt? und naja ich weis net wenn man gerade dabei ist ein blogsystem zu programmieren sollte man sich nciht sofort an ein BG ranwagen würde ich mal behaupten. aber jedem ist das seine überlassen
MFG
EDIT:
PS meinste sowas??
http://cccpmik.wmw.cc/rpg/test.php
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »cccpmik« (20. Oktober 2008, 12:50)
hi also der mapvewer ist quasi fertig hier der quellcode denn du willst
index.php
PHP-Quelltext
1
2
3
4
<?
include "map.php" ;
?>
<body><? map (); ?> </body>
map.php
PHP-Quelltext
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<?
function map ()
{
$fileName = "test.map" ;
$handle = fopen ( $fileName , "r" );
$map = fread ( $handle , filesize ( $fileName ));
fclose ( $handle );
$map = explode ( ';' , $map );
$town = '
10;1;stadt1.gif;cccpmik;testTown;
4;4;stadt1.gif;cccpmik;Ultima;
5;6;stadt2.gif;Babaren;Omega;
0;10;stadt2.gif;cccpmik;test;
' ;
$town = explode ( ';' , $town );
$limit_vewx = 7 ;
$limit_vewy = 7 ;
$limit_mapx = 99 ;
$limit_mapy = 99 ;
$startx = 2 ;
$starty = 2 ;
$img_folder = "img/mapparts/" ;
$anzahl_mapteile = count ( $map )- 2 ;
$anzahl_towns = ( count ( $town )- 1 )/ 5 ;
$ty = 0 ;
$tx = 1 ;
$ti = 2 ;
$tb = 3 ;
$tn = 4 ;
for( $i = 0 ; $i < $anzahl_towns ; $i ++)
{
$tinhalt = 0 ;
$towns [ "town" . $i ][ $tinhalt ]= trim ( $town [ $ty ]);
$tinhalt ++;
$towns [ "town" . $i ][ $tinhalt ]= trim ( $town [ $tx ]);
$tinhalt ++;
$towns [ "town" . $i ][ $tinhalt ]= trim ( $town [ $ti ]);
$tinhalt ++;
$towns [ "town" . $i ][ $tinhalt ]= trim ( $town [ $tb ]);
$tinhalt ++;
$towns [ "town" . $i ][ $tinhalt ]= trim ( $town [ $tn ]);
$tinhalt ++;
$ty += 5 ;
$tx += 5 ;
$ti += 5 ;
$tb += 5 ;
$tn += 5 ;
}
for( $i = 0 ; $i <= $anzahl_mapteile ; $i ++)
{
$mapparts [ "mappart" . $i ]= trim ( $map [ $i ]. '.jpg' );
}
$json_mapparts = json_encode ( $mapparts );
$json_towns = json_encode ( $towns );
?>
<script type="text/javascript" src="js/map.js">
</script>
<script type="text/javascript">
var imgfolder = '<? echo $img_folder ; ?> ';
var limit_mapx = <? echo $limit_mapx ; ?> ;
var limit_mapy = <? echo $limit_mapy ; ?> ;
var limit_vewx = <? echo $limit_vewx ; ?> ;
var limit_vewy = <? echo $limit_vewy ; ?> ;
var mapObj = <? echo $json_mapparts ; ?> ;
var townObj = <? echo $json_towns ; ?> ;
var limit_towns = <? echo $anzahl_towns ?> ;
var vx = checkx(<? echo $startx ; ?> ,limit_mapx ,limit_vewx);
var vy = checky(<? echo $starty ; ?> ,limit_mapy ,limit_vewy);
</script>
<script type="text/javascript" src="js/map.js">
</script>
<body onload="javascript:initImages();javascript:drawMap()">
<div id="scroll" style="position:absolute;width:<? echo $limit_vewx * 50 + 72 ; ?> px;height:<? echo $limit_vewy * 50 + 72 ; ?> px;border:1px solid;">
<div onclick="mapScroll('up')" style="position:absolute;width:30px;height:30px;top:0px;left:<? echo ( $limit_vewx * 50 + 72 )/ 2 ; ?> px;"><img src="img/others/up.gif" height="15"width="28"></div>
<div onclick="mapScroll('lo')" style="position:absolute;width:30px;height:30px;top:0px;left:0px;"><img src="img/others/lo.gif" height="15"width="15"></div>
<div onclick="mapScroll('left')" style="position:absolute;width:30px;height:30px;top:<? echo ( $limit_vewy * 50 + 72 )/ 2 ; ?> px;left:0px;"><img src="img/others/left.gif" height="28"width="15"></div>
<div onclick="mapScroll('lu')" style="position:absolute;width:30px;height:30px;top:<? echo $limit_vewy * 50 +( 72 - 16 ); ?> px;left:0px;"><img src="img/others/lu.gif" height="15"width="15"></div>
<div onclick="mapScroll('down')" style="position:absolute;width:30px;height:30px;top:<? echo $limit_vewy * 50 +( 72 - 16 ); ?> px;left:<? echo ( $limit_vewx * 50 + 72 )/ 2 ; ?> px;"><img src="img/others/down.gif" height="15"width="28"></div>
<div onclick="mapScroll('ro')" style="position:absolute;width:30px;height:30px;top:0px;left:<? echo $limit_vewx * 50 +( 72 - 16 ); ?> px;"><img src="img/others/ro.gif" height="15"width="15"></div>
<div onclick="mapScroll('right')" style="position:absolute;width:30px;height:30px;top:<? echo ( $limit_vewy * 50 + 72 )/ 2 ; ?> px;left:<? echo $limit_vewx * 50 +( 72 - 16 ); ?> px;"><img src="img/others/right.gif" height="28"width="15"></div>
<div onclick="mapScroll('ru')" style="position:absolute;width:30px;height:30px;top:<? echo $limit_vewy * 50 +( 72 - 16 ); ?> px;left:<? echo $limit_vewx * 50 +( 72 - 16 ); ?> px;"><img src="img/others/ru.gif" height="15"width="15"></div>
<div id="coords" style="position:absolute;width:<? echo $limit_vewx * 50 + 32 ; ?> px;height:<? echo $limit_vewy * 50 + 32 ; ?> px;border:1px solid;margin:20px;">
<div id="map" style="position:absolute;left:30px;bottom:-2px;width:<? echo $limit_vewx * 50 + 2 ; ?> px;height:<? echo $limit_vewy * 50 + 2 ; ?> px">
</div>
</div>
</div>
<br>
<div style="position:absolute;top:<? echo $limit_vewy * 50 + 92 ; ?> px;border:1px solid;">
<input onclick="geheZu()" type="submit" value="Gehe zu..">
X: <input type="text" id="x" name="x" size="5" value="0">
Y: <input type="text" id="y" name="y" size="5" value="0">
</div>
</body>
<?
}
?>
testmap.map
Quellcode
1
2
3
4
5
6
7
8
9
10
b;b;b;b;b;b;b;b;b;b;
b;c;c;c;c;c;c;c;c;c;b;
b;c;c;c;c;c;c;c;c;c;b;
b;c;c;c;c;c;c;c;c;c;b;
b;c;c;c;c;c;c;c;c;c;b;
b;c;c;c;c;c;c;c;c;c;b;
b;c;c;c;c;c;c;c;c;c;b;
b;c;c;c;c;c;c;c;c;c;b;
b;c;c;c;c;c;c;c;c;c;b;
b;b;b;b;b;b;b;b;b;b;
map.js
Javascript-Quelltext
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
var zahl = 0 ;
var bild_name = new Array (limit_mapy);
var towns = new Array (limit_towns);
for (var i = 0 ;i < = limit_mapy;i++ )
{
bild_name[i] = new Array (limit_mapx);
}
for (var i = 0 ;i < = limit_towns;i++ )
{
towns[i] = new Array (4 );
}
function for (var mapy = 0 ; mapy < = limit_mapy;mapy++ )
{
for (var mapx = 0 ; mapx < = limit_mapx;mapx++ )
{
bild_name[mapy][mapx] = mapObj['mappart' + zahl+ '' ];
zahl++ ;
}
}
for (var town = 0 ; town < limit_towns;town++ )
{
for (var town_inhalt = 0 ; town_inhalt < 5 ;town_inhalt++ )
{
towns[town][town_inhalt] = townObj['town' + town+ '' ][town_inhalt];
}
}
}
function document .getElementById('div' + id+ '' ).innerHTML = ' ' ;
for (var town = 0 ; town < limit_towns;town++ )
{
if ((towns[town][0 ] = = ty) && (towns[town][1 ] = = tx))
{
document .getElementById('div' + id+ '' ).innerHTML = '<img src="img/buildings/' + towns[town][2 ]+ '" width="45" height = "45">' ;
}
}
}
function document .getElementById('coords' ).innerHTML + = '<p id = "xy" style="position:absolute;width:10px;height:10px;top:0px;left:0px;">Y/X</p>' ;
for (var y = 0 ; y< limit_vewy;y++ )
{
document .getElementById('coords' ).innerHTML + = '<p id ="y_' + y+ '" style="position:absolute;width:10px;height:10px;top:' + ((y* 50 )+ 45 )+ 'px;left:0px;"> </p>' ;
document .getElementById('y_' + y+ '' ).firstChild.nodeValue = '' + (y+ vy)+ '' ;
}
for (var x = 0 ; x< limit_vewx;x++ )
{
document .getElementById('coords' ).innerHTML + = '<p id ="x_' + x+ '" style="position:absolute;width:10px;height:10px;top:0px;left:' + ((x* 50 )+ 45 )+ 'px;"> </p>' ;
document .getElementById('x_' + x+ '' ).firstChild.nodeValue = '' + (x+ vx)+ '' ;
}
}
function var id = 0 ;
for (var y = 0 ; y < limit_vewy;y++ )
{
for (var x = 0 ; x < limit_vewx;x++ )
{
document .getElementById('map' ).innerHTML + = '<div id="div' + id+ '" style="width:50px;height:50px;top:' + (y* 50 )+ 'px;left:' + (x* 50 )+ 'px;float:left;background-image:url(' + imgfolder+ '' + bild_name[y+ vy][x+ vx]+ ');"></div>' ;
drawTowns(id,y+ vy,x+ vx);
id++ ;
}
}
drawCoords();
}
function var id = 0 ;
for (var y = 0 ; y < limit_vewy;y++ )
{
for (var x = 0 ; x < limit_vewx;x++ )
{
document .getElementById('div' + id+ '' ).style.backgroundImage = 'url(' + imgfolder+ '' + bild_name[y+ vy][x+ vx]+ ')' ;
drawTowns(id,y+ vy,x+ vx);
id++ ;
}
}
drawCoords();
}
function switch (direction)
{
case 'left' :
{
if (vx < = 0 )
{
vx = vx;
}
else
{
vx- = 1 ;
mapRefresh();
}
break ;
}
case 'right' :
{
if (vx > (limit_mapx - limit_vewx))
{
vx = vx;
}
else
{
vx+ = 1 ;
mapRefresh();
}
break ;
}
case 'up' :
{
if (vy < = 0 )
{
vy = vy;
}
else
{
vy- = 1 ;
mapRefresh();
}
break ;
}
case 'down' :
{
if (vy > (limit_mapy - limit_vewy))
{
vy = vy;
}
else
{
vy+ = 1 ;
mapRefresh();
}
break ;
}
case 'lo' :
{
if ((vx < = 0 )|| (vy < = 0 ))
{
vx = vx;
vy = vy;
}
else
{
vx- = 1 ;
vy- = 1 ;
mapRefresh();
}
break ;
}
case 'lu' :
{
if ((vx < = 0 )|| (vy > (limit_mapy - limit_vewy)))
{
vx = vx;
vy = vy;
}
else
{
vx- = 1 ;
vy+ = 1 ;
mapRefresh();
}
break ;
}
case 'ro' :
{
if ((vx > (limit_mapx - limit_vewx))|| (vy < = 0 ))
{
vx = vx;
vy = vy;
}
else
{
vx+ = 1 ;
vy- = 1 ;
mapRefresh();
}
break ;
}
case 'ru' :
{
if ((vx > (limit_mapx - limit_vewx))|| (vy > (limit_mapy - limit_vewy)))
{
vx = vx;
vy = vy;
}
else
{
vx+ = 1 ;
vy+ = 1 ;
mapRefresh();
}
break ;
}
}
}
function var x = document .getElementById('x' ).value;
var y = document .getElementById('y' ).value;
vx = checkx(x,limit_mapx ,limit_vewx);
vy = checky(y,limit_mapx ,limit_vewx);
mapRefresh();
}
function if ((x- vew_x)< 0 )
{
x= 0 ;
return x;
}
else
{
if ((max_x- vew_x)< x)
{
x = (max_x- vew_x)+ 1 ;
return x;
}
else
{
x - = Math .round((vew_x- 0 .01 )/ 2 );
return x;
}
}
}
function if ((y- vew_y)< 0 )
{
y= 0 ;
return y;
}
else
{
if ((max_y- vew_y)< y)
{
y = (max_y- vew_y)+ 1 ;
return y;
}
else
{
y - = Math .round((vew_y- 0 .01 )/ 2 );
return y;
}
}
}
index.php
PHP-Quelltext
1
2
3
4
<?
include "map.php" ;
?>
<body><? map (); ?> </body>
map.php
PHP-Quelltext
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<?
function map ()
{
$fileName = "test.map" ;
$handle = fopen ( $fileName , "r" );
$map = fread ( $handle , filesize ( $fileName ));
fclose ( $handle );
$map = explode ( ';' , $map );
$town = '
10;1;stadt1.gif;cccpmik;testTown;
4;4;stadt1.gif;cccpmik;Ultima;
5;6;stadt2.gif;Babaren;Omega;
0;10;stadt2.gif;cccpmik;test;
' ;
$town = explode ( ';' , $town );
$limit_vewx = 7 ;
$limit_vewy = 7 ;
$limit_mapx = 99 ;
$limit_mapy = 99 ;
$startx = 2 ;
$starty = 2 ;
$img_folder = "img/mapparts/" ;
$anzahl_mapteile = count ( $map )- 2 ;
$anzahl_towns = ( count ( $town )- 1 )/ 5 ;
$ty = 0 ;
$tx = 1 ;
$ti = 2 ;
$tb = 3 ;
$tn = 4 ;
for( $i = 0 ; $i < $anzahl_towns ; $i ++)
{
$tinhalt = 0 ;
$towns [ "town" . $i ][ $tinhalt ]= trim ( $town [ $ty ]);
$tinhalt ++;
$towns [ "town" . $i ][ $tinhalt ]= trim ( $town [ $tx ]);
$tinhalt ++;
$towns [ "town" . $i ][ $tinhalt ]= trim ( $town [ $ti ]);
$tinhalt ++;
$towns [ "town" . $i ][ $tinhalt ]= trim ( $town [ $tb ]);
$tinhalt ++;
$towns [ "town" . $i ][ $tinhalt ]= trim ( $town [ $tn ]);
$tinhalt ++;
$ty += 5 ;
$tx += 5 ;
$ti += 5 ;
$tb += 5 ;
$tn += 5 ;
}
for( $i = 0 ; $i <= $anzahl_mapteile ; $i ++)
{
$mapparts [ "mappart" . $i ]= trim ( $map [ $i ]. '.jpg' );
}
$json_mapparts = json_encode ( $mapparts );
$json_towns = json_encode ( $towns );
?>
<script type="text/javascript" src="js/map.js">
</script>
<script type="text/javascript">
var imgfolder = '<? echo $img_folder ; ?> ';
var limit_mapx = <? echo $limit_mapx ; ?> ;
var limit_mapy = <? echo $limit_mapy ; ?> ;
var limit_vewx = <? echo $limit_vewx ; ?> ;
var limit_vewy = <? echo $limit_vewy ; ?> ;
var mapObj = <? echo $json_mapparts ; ?> ;
var townObj = <? echo $json_towns ; ?> ;
var limit_towns = <? echo $anzahl_towns ?> ;
var vx = checkx(<? echo $startx ; ?> ,limit_mapx ,limit_vewx);
var vy = checky(<? echo $starty ; ?> ,limit_mapy ,limit_vewy);
</script>
<script type="text/javascript" src="js/map.js">
</script>
<body onload="javascript:initImages();javascript:drawMap()">
<div id="scroll" style="position:absolute;width:<? echo $limit_vewx * 50 + 72 ; ?> px;height:<? echo $limit_vewy * 50 + 72 ; ?> px;border:1px solid;">
<div onclick="mapScroll('up')" style="position:absolute;width:30px;height:30px;top:0px;left:<? echo ( $limit_vewx * 50 + 72 )/ 2 ; ?> px;"><img src="img/others/up.gif" height="15"width="28"></div>
<div onclick="mapScroll('lo')" style="position:absolute;width:30px;height:30px;top:0px;left:0px;"><img src="img/others/lo.gif" height="15"width="15"></div>
<div onclick="mapScroll('left')" style="position:absolute;width:30px;height:30px;top:<? echo ( $limit_vewy * 50 + 72 )/ 2 ; ?> px;left:0px;"><img src="img/others/left.gif" height="28"width="15"></div>
<div onclick="mapScroll('lu')" style="position:absolute;width:30px;height:30px;top:<? echo $limit_vewy * 50 +( 72 - 16 ); ?> px;left:0px;"><img src="img/others/lu.gif" height="15"width="15"></div>
<div onclick="mapScroll('down')" style="position:absolute;width:30px;height:30px;top:<? echo $limit_vewy * 50 +( 72 - 16 ); ?> px;left:<? echo ( $limit_vewx * 50 + 72 )/ 2 ; ?> px;"><img src="img/others/down.gif" height="15"width="28"></div>
<div onclick="mapScroll('ro')" style="position:absolute;width:30px;height:30px;top:0px;left:<? echo $limit_vewx * 50 +( 72 - 16 ); ?> px;"><img src="img/others/ro.gif" height="15"width="15"></div>
<div onclick="mapScroll('right')" style="position:absolute;width:30px;height:30px;top:<? echo ( $limit_vewy * 50 + 72 )/ 2 ; ?> px;left:<? echo $limit_vewx * 50 +( 72 - 16 ); ?> px;"><img src="img/others/right.gif" height="28"width="15"></div>
<div onclick="mapScroll('ru')" style="position:absolute;width:30px;height:30px;top:<? echo $limit_vewy * 50 +( 72 - 16 ); ?> px;left:<? echo $limit_vewx * 50 +( 72 - 16 ); ?> px;"><img src="img/others/ru.gif" height="15"width="15"></div>
<div id="coords" style="position:absolute;width:<? echo $limit_vewx * 50 + 32 ; ?> px;height:<? echo $limit_vewy * 50 + 32 ; ?> px;border:1px solid;margin:20px;">
<div id="map" style="position:absolute;left:30px;bottom:-2px;width:<? echo $limit_vewx * 50 + 2 ; ?> px;height:<? echo $limit_vewy * 50 + 2 ; ?> px">
</div>
</div>
</div>
<br>
<div style="position:absolute;top:<? echo $limit_vewy * 50 + 92 ; ?> px;border:1px solid;">
<input onclick="geheZu()" type="submit" value="Gehe zu..">
X: <input type="text" id="x" name="x" size="5" value="0">
Y: <input type="text" id="y" name="y" size="5" value="0">
</div>
</body>
<?
}
?>
testmap.map
Quellcode
1
2
3
4
5
6
7
8
9
10
b;b;b;b;b;b;b;b;b;b;
b;c;c;c;c;c;c;c;c;c;b;
b;c;c;c;c;c;c;c;c;c;b;
b;c;c;c;c;c;c;c;c;c;b;
b;c;c;c;c;c;c;c;c;c;b;
b;c;c;c;c;c;c;c;c;c;b;
b;c;c;c;c;c;c;c;c;c;b;
b;c;c;c;c;c;c;c;c;c;b;
b;c;c;c;c;c;c;c;c;c;b;
b;b;b;b;b;b;b;b;b;b;
map.js
Javascript-Quelltext
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
var zahl = 0 ;
var bild_name = new Array (limit_mapy);
var towns = new Array (limit_towns);
for (var i = 0 ;i < = limit_mapy;i++ )
{
bild_name[i] = new Array (limit_mapx);
}
for (var i = 0 ;i < = limit_towns;i++ )
{
towns[i] = new Array (4 );
}
function for (var mapy = 0 ; mapy < = limit_mapy;mapy++ )
{
for (var mapx = 0 ; mapx < = limit_mapx;mapx++ )
{
bild_name[mapy][mapx] = mapObj['mappart' + zahl+ '' ];
zahl++ ;
}
}
for (var town = 0 ; town < limit_towns;town++ )
{
for (var town_inhalt = 0 ; town_inhalt < 5 ;town_inhalt++ )
{
towns[town][town_inhalt] = townObj['town' + town+ '' ][town_inhalt];
}
}
}
function document .getElementById('div' + id+ '' ).innerHTML = ' ' ;
for (var town = 0 ; town < limit_towns;town++ )
{
if ((towns[town][0 ] = = ty) && (towns[town][1 ] = = tx))
{
document .getElementById('div' + id+ '' ).innerHTML = '<img src="img/buildings/' + towns[town][2 ]+ '" width="45" height = "45">' ;
}
}
}
function document .getElementById('coords' ).innerHTML + = '<p id = "xy" style="position:absolute;width:10px;height:10px;top:0px;left:0px;">Y/X</p>' ;
for (var y = 0 ; y< limit_vewy;y++ )
{
document .getElementById('coords' ).innerHTML + = '<p id ="y_' + y+ '" style="position:absolute;width:10px;height:10px;top:' + ((y* 50 )+ 45 )+ 'px;left:0px;"> </p>' ;
document .getElementById('y_' + y+ '' ).firstChild.nodeValue = '' + (y+ vy)+ '' ;
}
for (var x = 0 ; x< limit_vewx;x++ )
{
document .getElementById('coords' ).innerHTML + = '<p id ="x_' + x+ '" style="position:absolute;width:10px;height:10px;top:0px;left:' + ((x* 50 )+ 45 )+ 'px;"> </p>' ;
document .getElementById('x_' + x+ '' ).firstChild.nodeValue = '' + (x+ vx)+ '' ;
}
}
function var id = 0 ;
for (var y = 0 ; y < limit_vewy;y++ )
{
for (var x = 0 ; x < limit_vewx;x++ )
{
document .getElementById('map' ).innerHTML + = '<div id="div' + id+ '" style="width:50px;height:50px;top:' + (y* 50 )+ 'px;left:' + (x* 50 )+ 'px;float:left;background-image:url(' + imgfolder+ '' + bild_name[y+ vy][x+ vx]+ ');"></div>' ;
drawTowns(id,y+ vy,x+ vx);
id++ ;
}
}
drawCoords();
}
function var id = 0 ;
for (var y = 0 ; y < limit_vewy;y++ )
{
for (var x = 0 ; x < limit_vewx;x++ )
{
document .getElementById('div' + id+ '' ).style.backgroundImage = 'url(' + imgfolder+ '' + bild_name[y+ vy][x+ vx]+ ')' ;
drawTowns(id,y+ vy,x+ vx);
id++ ;
}
}
drawCoords();
}
function switch (direction)
{
case 'left' :
{
if (vx < = 0 )
{
vx = vx;
}
else
{
vx- = 1 ;
mapRefresh();
}
break ;
}
case 'right' :
{
if (vx > (limit_mapx - limit_vewx))
{
vx = vx;
}
else
{
vx+ = 1 ;
mapRefresh();
}
break ;
}
case 'up' :
{
if (vy < = 0 )
{
vy = vy;
}
else
{
vy- = 1 ;
mapRefresh();
}
break ;
}
case 'down' :
{
if (vy > (limit_mapy - limit_vewy))
{
vy = vy;
}
else
{
vy+ = 1 ;
mapRefresh();
}
break ;
}
case 'lo' :
{
if ((vx < = 0 )|| (vy < = 0 ))
{
vx = vx;
vy = vy;
}
else
{
vx- = 1 ;
vy- = 1 ;
mapRefresh();
}
break ;
}
case 'lu' :
{
if ((vx < = 0 )|| (vy > (limit_mapy - limit_vewy)))
{
vx = vx;
vy = vy;
}
else
{
vx- = 1 ;
vy+ = 1 ;
mapRefresh();
}
break ;
}
case 'ro' :
{
if ((vx > (limit_mapx - limit_vewx))|| (vy < = 0 ))
{
vx = vx;
vy = vy;
}
else
{
vx+ = 1 ;
vy- = 1 ;
mapRefresh();
}
break ;
}
case 'ru' :
{
if ((vx > (limit_mapx - limit_vewx))|| (vy > (limit_mapy - limit_vewy)))
{
vx = vx;
vy = vy;
}
else
{
vx+ = 1 ;
vy+ = 1 ;
mapRefresh();
}
break ;
}
}
}
function var x = document .getElementById('x' ).value;
var y = document .getElementById('y' ).value;
vx = checkx(x,limit_mapx ,limit_vewx);
vy = checky(y,limit_mapx ,limit_vewx);
mapRefresh();
}
function if ((x- vew_x)< 0 )
{
x= 0 ;
return x;
}
else
{
if ((max_x- vew_x)< x)
{
x = (max_x- vew_x)+ 1 ;
return x;
}
else
{
x - = Math .round((vew_x- 0 .01 )/ 2 );
return x;
}
}
}
function if ((y- vew_y)< 0 )
{
y= 0 ;
return y;
}
else
{
if ((max_y- vew_y)< y)
{
y = (max_y- vew_y)+ 1 ;
return y;
}
else
{
y - = Math .round((vew_y- 0 .01 )/ 2 );
return y;
}
}
}
hier das ergebnis:
http://cccpmik.wmw.cc/rpg/test.php
Veil Spaß damit
MFG
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »cccpmik« (20. Oktober 2008, 15:17)
Die oberen Zahlen der Map sind etwas zu weit unten. Sie sind schon fast halb auf dem grünen. Vielleicht solltest du das noch ändern, wenn das geht.
Hey cool, danke =)
Also hätt dann nur noch ein Problem:
http://ljay.selfip.com/map/
Also grafisch ist das halt nicht so wie bei dir
Wollte fragen, welche Grafiken ich dazu noch brauche und ob es so wie es jetzt ist richtig angezeigt wird.
LG L-Jay
Rechtschreibfehler sind gewollt und dienen der Belustigung!
Bitte mal alle
hier klicken - Danke ;-)
Hey cool, danke =)
Also hätt dann nur noch ein Problem:
http://ljay.selfip.com/map/
Also grafisch ist das halt nicht so wie bei dir
Wollte fragen, welche Grafiken ich dazu noch brauche und ob es so wie es jetzt ist richtig angezeigt wird.
LG L-Jay
Die Pfeile fehlen bzw. werden nicht angezeigt.
Und sonst ist die Karte halt weiß und leer.
Die Pfeile fehlen bzw. werden nicht angezeigt.
Hab ich auch schon gesehn
Wollt nur wissen an was das liegt..
Rechtschreibfehler sind gewollt und dienen der Belustigung!
Bitte mal alle
hier klicken - Danke ;-)
Die oberen Zahlen der Map sind etwas zu weit unten. Sie sind schon fast halb auf dem grünen. Vielleicht solltest du das noch ändern, wenn das geht.
das liegt daran, dass ich bis jetzt nur mit dem IE gearbeitet habe auf andere browser ist es nicht angepasst. und zu den grafiken du brauchst 1. die richtigen grafik namen also a.jpbg b.jpg c.jpg usw und die müssen sich im ordner img/mapparts befinden. und stadt namen müssen stadt1.gif stadt2.gif usw heißen und im ordner img/details liegen. und die pfeile müssen in img/others liegen. schau einfach im quelltext nach den ordner namen und datei namen nach. so wie ihc es dir per pm gesagt habe einfach copy paste geht net
MFG
EDIT: btw dein link geht net
Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »cccpmik« (20. Oktober 2008, 17:55)
EDIT: btw dein link geht net
Lag daran dass ich vorhin kein Internet hatte
Rechtschreibfehler sind gewollt und dienen der Belustigung!
Bitte mal alle
hier klicken - Danke ;-)
naja bin mal gespannt was du mit der map anstellen wirst/kannst
Ich auch
Naja, ich mach erstmal meine Community/Blog un dann schau ich nochmal weiter
Rechtschreibfehler sind gewollt und dienen der Belustigung!
Bitte mal alle
hier klicken - Danke ;-)
73%
22%
19%
11%
6%
Spoiler
Zitat
Die Pfeile fehlen bzw. werden nicht angezeigt.
PHP »
Traffic testen
(14. Oktober 2008, 08:53)