Hallo Leute,
Ich arbeite an einer Karte für einem Browsergame.
Soweit funktioniert alles. Verschieben kann man die Karte auch (Jquery draggable). Und da ist auch gleich mal Problem.
Wie schaffe ich es das die Karte dynamisch die Teile lädt die sie braucht und an die richtige stelle setzt?
Hier ist mein gesamter Code:
Code kann so wie er ist direkt getestet werden.
Falls jemand beim drüberlesen auf Fehler stoßt, dann bitte gleich sagen
Ich hoffe ihr könnt mir weiter helfen
MfG
Patrick
Ich arbeite an einer Karte für einem Browsergame.
Soweit funktioniert alles. Verschieben kann man die Karte auch (Jquery draggable). Und da ist auch gleich mal Problem.
Wie schaffe ich es das die Karte dynamisch die Teile lädt die sie braucht und an die richtige stelle setzt?
Hier ist mein gesamter Code:
Code:
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.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>
Code kann so wie er ist direkt getestet werden.
Falls jemand beim drüberlesen auf Fehler stoßt, dann bitte gleich sagen
Ich hoffe ihr könnt mir weiter helfen
MfG
Patrick
Zuletzt bearbeitet: