chucky2361
New member
Hallo Leute,
Ich bins mal wieder, hab schon mal bezüglich einer Map hier gepostet und mir wurde auch ein bisschen geholfen
Jedoch stehe ich nun wieder vor einem Problem :/
Ich habe nun eine die Karte, sie wird auch erstellt und angezeit. Sogar per Jquery draggable kann man sie bewegen...
Nur mein Problem ist ich weiß nicht wie ich es schaffe das ich jetzt die richtigen Teile dazulade und auf die richtigen Stelle setze.
ich poste hier mal meinen gesamten Code:
Falls ihr nebenbei Fehler endeckt oder verbesserungsvorschläge habt dann immer her damit
Code könnte meines Wissens komplett kopiert und selbst getestet werden. Ich bitte jedoch es nicht für seine eigenen Projekten zu nutzen. Danke
Ich bins mal wieder, hab schon mal bezüglich einer Map hier gepostet und mir wurde auch ein bisschen geholfen
Jedoch stehe ich nun wieder vor einem Problem :/
Ich habe nun eine die Karte, sie wird auch erstellt und angezeit. Sogar per Jquery draggable kann man sie bewegen...
Nur mein Problem ist ich weiß nicht wie ich es schaffe das ich jetzt die richtigen Teile dazulade und auf die richtigen Stelle setze.
ich poste hier mal meinen gesamten Code:
Code:
<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>Falls ihr nebenbei Fehler endeckt oder verbesserungsvorschläge habt dann immer her damit
Code könnte meines Wissens komplett kopiert und selbst getestet werden. Ich bitte jedoch es nicht für seine eigenen Projekten zu nutzen. Danke