www.webdeveloper.com
Results 1 to 6 of 6

Thread: Browsergame Map - Load Parts dynamically

  1. #1
    Join Date
    Mar 2014
    Posts
    3

    Browsergame Map - Load Parts dynamically

    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.

    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>
    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

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    beware of Mr. Slashes ))

  3. #3
    Join Date
    Mar 2014
    Posts
    3
    How does it help me?

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    believe me it does. approximately the same way your locally linked libraries help someone to use the code you posted

  5. #5
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,031
    I've only taken a brief look at your code, so I would need some time to actually build the solution myself. Translating the comments may help a bit, but it's probably not worth the time.

    If I understand what you want, I feel you should store your map in an object. I'll admit I don't actually understand what the map will be used for, but ultimately the concept would remain the same.

    If you can load the entire map into an object then this allows you to set a range (let's say it's the size of the viewing area plus an additional 5 boxes in each direction) and load all of the boxes within that range from your object. As you drag the map, you can reload this range, adjusting it each time the map moves by 1 or so units.

    I'll take a look at it today and make some adjustments but feel free to try this concept by yourself.

  6. #6
    Join Date
    Mar 2014
    Posts
    3
    <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>

    Here are the links to test it...(I can't edit my post)

    Thank you Sup3rkirbe. The idea of the map ist that I can use it to make attacts to other villages or build a new village and so on.
    I will try it to programm it by myself, but it would be very nice if you can give me a small code block for my problem...
    Thank you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles