Browsergame Map - Teile dynamisch laden

chucky110

Grünschnabel
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:
<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:
Bind mal jQuery und Ui direkt ein von google oder JQuery ein. Dann kann manns gleich testen wie du geschrieben hast.

Dann guck ichs mir an.
 
nein so wie sie jetzt verschiebbar ist, so soll es auch sein :).
Mein Problem ist, dass es natürlich beim verschieben die nächsten Daten aufgerufen werden sollen... und ich weiß eben nicht wie ich das mache bzw. wie ich dann festlege auf welcher seite das hinzugefügt werden soll...
 
Zurück