Hello,
I'm new hear and this is not the first Forum where I post.
I programm a browsergame and now its the time where i have to create a map for it.
I can create the map and i can drag it in the map window. My problem is that I don't know how i can load the needed parts of the map dynamically.
Here is my code:
I am coming von Austria, so my Comments are in german. Please ask me if you want a translation.
<html>
<head>
<script type="text/javascript" src="js/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery_ui/jquery-ui-1.10.4.custom.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
// Kartenbreite & Kartenhöhe
var map_width;
var map_height;
// Breite & Höhe eines Feldes in Pixel
var field_width_px;
var field_height_px;
// Fensterbreite & Fensterhöhe
var window_width;
var window_height;
// X-Koordinate & Y-Koordinate oben/links
var window_topleft_x;
var window_topleft_y;
// Kartenfelder
var fields = new Array();
// X-Koordinate & Y-Koordinate der aktuellen Position
var x_coord;
var y_coord;
// Kartengröße definieren in Felder (z.B.: 5x5 Felder)
function setSize(width, height) {
map_width = width;
map_height = height;
}
// Feldgröße definieren in PX
function setFieldSize(width_px, height_px) {
field_width_px = width_px;
field_height_px = height_px;
}
// Felder setzen
function setField(x, y, field) {
if ((x < 100) || (y < 100) || (x >= map_width) || (y >= map_height)) {
return false;
}
var ix=x;
var iy=y;
for (; ix == x; ix++) {
for (; iy == y; iy++) {
fields[x] = new Array();
fields[x][y] = field;
}
}
}
// Felder holen
function getField(x, y) {
if (typeof(fields[x])!="undefined") {
if (typeof(fields[x][y])!="undefined") {
return fields[x][y];
} else {
return false;
}
} else {
return false;
}
}
// Position setzen
function setPosition(x, y) {
if (x < 100) {
x = 100;
}
if (y < 100) {
y = 100;
}
if (x >= map_width) {
x = map_width - 1;
}
if (y >= map_height) {
y = map_height - 1;
}
x_coord = x;
y_coord = y;
setWindowPosition(x - Math.round(window_width / 2) + 1, y - Math.round(window_height / 2) + 1);
}
// Fenstergröße in Feldern
function setWindowSize(width, height) {
window_width = width;
window_height = height;
}
function setWindowPosition(x, y) {
if (x < 100) {
x = 100;
}
if (y < 100) {
y = 100;
}
if (x + window_width > map_width) {
x = map_width - window_width;
}
if (y + window_height > map_height) {
y = map_height - window_height;
}
window_topleft_x = x;
window_topleft_y = y;
}
function getWindowHtml() {
var code = '<div id="map_wrapper" style="overflow:hidden;width:490px; height:350px; border: black solid 1px;text-align:center;" >';
code += '<div id="mymapwindow" style="min-width:' + "" + ((field_width_px) * window_width) + "" + 'px; min-height:' + "" + (field_height_px) * window_height + "" + 'px;">';
var window_bottomright_x = (window_topleft_x + (window_width - 1));
var window_bottomright_y = (window_topleft_y + (window_height - 1));
for (var y = window_topleft_y; y <= window_bottomright_y; y++) {
for (var x = window_topleft_x; x <= window_bottomright_x; x++) {
var field = getField(x, y);
if (field) {
var color = field['color'];
var caption = field['caption'];
} else {
color = '#009933';
caption = '';
}
code += '<div style="float: left; width: ' + "" + (field_width_px - 1) + "" + 'px; height: ' + "" + (field_height_px - 1) + "" + 'px; margin-right: 1px; margin-bottom: 1px; background-color: ' + "" + color + "" + '; text-align: center;" title=" ' + "" + caption + "" + ' ">(' + "" + x + "" + '|' + "" + y + "" + ')</div>';
}
code += '<div style="clear:both;"></div>';
}
code += '</div>';
code += '</div>';
code += '<div style="clear:both;"></div>';
$("div#map").html(code);
}
// Kartengröße definieren in Felder (z.B.: 30x30 Felder)
setSize(1000, 1000);
// Feldgröße definieren
setFieldSize(70, 50);
// Felder definieren
setField(106, 106, {"color":"red", "caption":'Dorf'});
// Fenstergröße der Karte definieren in Felder (z.B.: 9x9 Felder)
setWindowSize(7, 7);
// Aktuelle Position zentrieren sofern möglich
setPosition(106, 106);
// Karte ausgeben
getWindowHtml();
$("#mymapwindow").draggable({
drag: function(event, ui) {
// neue koordinaten berechnen
var current_y = ui.position.top + y_coord;
var current_x = ui.position.left + x_coord;
$("div#drag").text("drag: \nx: "+ current_x + "\ny: " + current_y);
}
});
});
</script>
<body>
<div id="map"></div>
<div id="drag"></div>
</body>
</html>
You can copy and paste the code and test it. I hope I describe my problem exactly enough.
Hope you can help me.
Best regards
Patrick
