www.webdeveloper.com
Results 1 to 4 of 4

Thread: javascript map using jquery

  1. #1
    Join Date
    Feb 2011
    Posts
    3

    javascript map using jquery

    Hi there, I am having some issues and im hoping for some information.
    I've been building a browser game and i've been playing with ideas for a map. Now i have a perfectly working map that uses my database etc... The map is using jquery to update divs. It uses a large container div and it fills the inside of that container with larger section divs, then as you drag closer to those section divs it fills them with smaller divs that contain the tile images to make the map actually look like something. (i will explain further or better if someone needs me too)

    Now all of this works very well my problem is with loading the new little image divs, in EI8 it seems to take an unnessecary amount of time to display these little divs (it would only be displaying about 75 at one time) now taking time to load is fine and i dont have a problem with that, what i do have a problem with is when its loading those divs/images you cant drag or click or do anything because its stuck in the for loop doing the loading.

    Now i understand javascript does not multitask so this is supposed to be impossible to call an event while another one is doing something. However i am confused because if you look at google maps or even maps in other games those maps applications(using javascript) dont have any issues loading new area while you still have full functionality. If anyone could enlighten me on a better way to build this map or something im doing wrong that would be great, thank you very much.

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    sounds like the code is slow.
    javascript performance optimization makes a big difference in IE compared to fast browsers, have you applied all the normal performance tweaks like timeOuts, and object/length/jQuery caching?

    loops are the slowest part of any program so make sure to highly tweak their contents.

    Post the code in question if you want optimizations or advice.

  3. #3
    Join Date
    Feb 2011
    Posts
    3
    Ok im going to post this code, however this code i have not even gone over myself for optizmations and im sure its going to look horribly bad aswell. However im going to post it dispite my embarassment, im desperate to get some pointers on how to make this better.

    HTML Code:
    function Map(viewingBox) {
       	var m = this;
       	m.mouseDown = false;
    	m.viewingBox = viewingBox;
       	m.viewingBox.css("overflow", "hidden");
       	m.lastPosition = new Point();
       	
       	
       	// Add a child div that will contain our inner map
    	m.viewingBox.append('<div class="innerMap"></div>');
    	$("div.innerMap").css({"width" : cellWidth * mapWidth});
    	$("div.innerMap").css({"height" : cellHeight * mapHeight});
    	m.innerMap = $("div.innerMap");
    	$("div.viewingBox").bind('loadTiles',function(e,data){
    		if (data.mousedown = "false"){
    		loading = "true";
    		x = data.x;
    		y = data.y;
    		lastloaded.left = data.x;
    		lastloaded.top = data.y;
    		startX = Math.floor(((225 + x) / (cellPerTile * cellWidth)) -  loadTiles);
    		endX = Math.floor(((225 + x) / (cellPerTile * cellWidth)) + loadTiles);
    		startY = Math.floor(((225 + y) / (cellPerTile * cellHeight)) - loadTiles);
    		endY = Math.floor(((225 + y) / (cellPerTile * cellHeight)) + loadTiles);
    		if (startX < 0) {startX = 0;}
    		if (startY < 0) {startY = 0;}
    		if (endX > ((mapWidth / cellPerTile) -1)) {endX = (mapWidth / cellPerTile) -1;}
    		if (endY > ((mapHeight / cellPerTile) -1)) {endY = (mapHeight / cellPerTile) -1;}
    			var loadedsomething = false;
    	
    		for(var j = startY; j < (endY +1) ; j++) {
    			for(var i = startX; i < (endX +1); i++) {
    			if (maploaded [i] [j] == false) {
    			maploaded [i] [j] = true;
    			var currentRow2 = $("div.Coord"+i+"-"+j+":last");
    			for(var ii = 0; ii < cellPerTile ; ii++) {
    				for(var jj = 0; jj < cellPerTile; jj++) {
    					currentRow2.append('<div class="cCoord'+((i * cellPerTile) + jj)+'-'+((j * cellPerTile) + ii)+'" style="height: '+cellHeight+'px; width: '+cellWidth+'px; float: left;" url="'+((i * cellPerTile) + jj)+'-'+((j * cellPerTile) + ii)+'" xy="'+((i * cellPerTile) + jj)+' - '+((j * cellPerTile) + ii)+'"></div>');
    					var currentRow4 = $("div.cCoord"+((i * 5) + jj)+"-"+((j * 5) + ii)+":last");
    					$("div.cCoord"+((i * cellPerTile) + jj)+'-'+((j * cellPerTile) + ii)).css({"background" :"url('images/" + mapdata[((i * cellPerTile) + jj)][((j * cellPerTile) + ii)]["img"]+"')"});
    					$("div.cCoord"+((i * cellPerTile) + jj)+'-'+((j * cellPerTile) + ii)).click(function(event){
    					if((originalClick.x == event.pageX) &&(originalClick.y == event.pageY)){
       	 				window.location = $(this).attr("url");}
    					});
    					$("div.cCoord"+((i * cellPerTile) + jj)+'-'+((j * cellPerTile) + ii)).hover(function(event){
    					document.getElementById("coord").firstChild.nodeValue = $(this).attr("xy");
    					});
    				}
    			}
    			}
    			}
    		}
    		if (loadedsomething = true) {Unloadtiles(startX,endX,startY,endY);}
    		function Unloadtiles(startX,endX,startY,endY) {
    		var newstartX = startX -unloadTiles;
    		var newendX = endX +unloadTiles;
    		var newstartY = startY -unloadTiles;
    		var newendY = endY +unloadTiles;
    		if (newstartX < 0) {newstartX = 0;}
    		if (newstartY < 0) {newstartY = 0;}
    		if (newendX > ((mapWidth / cellPerTile) -1)) {newendX = (mapWidth / cellPerTile) -1;}
    		if (newendY > ((mapHeight / cellPerTile) -1)) {newendY = (mapHeight / cellPerTile) -1;}
    		var unstartX = startX - unloadTiles +1;
    		var unendX = endX + unloadTiles -1;
    		var unstartY = startY - unloadTiles + 1;
    		var unendY = endY + unloadTiles -1;
    		if (unstartX < 0) {unstartX = 0;}
    		if (unstartY < 0) {unstartY = 0;}
    		if (unendX > ((mapWidth / cellPerTile) -1)) {unendX = (mapWidth / cellPerTile) -1;}
    		if (unendY > ((mapHeight / cellPerTile) -1)) {unendY = (mapHeight / cellPerTile) -1;}
    	
    	
    		for(var j = newstartY; j < (newendY +1) ; j++) {
    			for(var i = newstartX; i < (newendX +1); i++) {
    				if ((i >= unstartX ) && (i <= unendX) && (j >= unstartY) && (j <= unendY)) {
    				} else{
    					if (maploaded [i] [j] == true) {
    						maploaded [i] [j] = false;
    						$("div.Coord"+i+"-"+j).empty();
    						}
    					}
    				}
    			}
    		}
    	}
    	loading = "false";
    	});
    
    		
    	// Initializes the map inside the inner div
    		for(var j = 0; j < (mapHeight / cellPerTile); j++) {
    		for(var i = 0; i < (mapWidth / cellPerTile); i++) {
    			m.innerMap.append('<div class="Coord'+i+'-'+j+'" style="height: '+ (cellHeight * cellPerTile) + 'px; width:' + (cellWidth * cellPerTile) +'px; float: left; background: url(images/loading.png); display: block;"></div>');
    			}
    		}
    	m.innerMap.css({"left" : (m.lastPosition.x * -1) + "px","top" : (m.lastPosition.y * -1) + "px"});
    	
    	var pos = m.innerMap.position();
    	document.getElementById("coord").firstChild.nodeValue = (pos.left *-1) + " - " + (pos.top * -1);
    	$("div.viewingBox").trigger('loadTiles',{x: (pos.left * -1), y: (pos.top * -1), mousedown: m.mouseDown});
    		
    	m.viewingBox.mousedown( function(event) {
    	if (loading == "false") {
    		m.mouseDown = true;
          		m.lastPosition.x = originalClick.x = event.pageX;
    		m.lastPosition.y = originalClick.y = event.pageY;
    		}
       	});
    
    	m.viewingBox.mousedown( function(event) {
    	if (loading == "false") {
    		m.mouseDown = true;
    		}
    	});
    
    	m.viewingBox.mouseup( function(event) {
    		m.mouseDown = false;
    		if ((lastloaded.left - (cellWidth * cellPerTile) >= (pos.left * -1)) || (lastloaded.left + (cellWidth * cellPerTile) <= (pos.left * -1)) || (lastloaded.top - (cellHeight * cellPerTile) >= (pos.top * -1)) || (lastloaded.top + (cellHeight * cellPerTile) <= (pos.top * -1)))  {$("div.viewingBox").trigger('loadTiles',{x: (pos.left * -1), y: (pos.top * -1), mousedown: m.mouseDown});}
    	});
    
    	m.viewingBox.mouseleave( function(event) {
    		m.mouseDown = false;
    		if ((lastloaded.left - (cellWidth * cellPerTile) >= (pos.left * -1)) || (lastloaded.left + (cellWidth * cellPerTile) <= (pos.left* -1)) || (lastloaded.top - (cellHeight * cellPerTile) >= (pos.top * -1)) || (lastloaded.top + (cellHeight * cellPerTile) <= (pos.top * -1)))  {$("div.viewingBox").trigger('loadTiles',{x: (pos.left * -1), y: (pos.top * -1), mosuedown: m.mouseDown});}
    	});
    
    	m.viewingBox.mousemove( function(event) {
    		if(m.mouseDown) {
    			// Find the change in position since our last move
    			var dx = event.pageX - m.lastPosition.x;
    			var dy = event.pageY - m.lastPosition.y;
    
    			// Find the new position of the map
    			pos = m.innerMap.position();
    			pos.left += dx;
    			pos.top += dy;
    
    			
    			// Change the absolute position of the inner map
    			m.innerMap.css({
    				"left" : (pos.left) + "px",
    				"top" : (pos.top) + "px"
    			});
    
    			m.lastPosition.x = event.pageX;
    			m.lastPosition.y = event.pageY;
    
    			// Prevents any default mousemove handler the browser
    			// might have
    			event.preventDefault();
    						
    			}
    	});
    	
    		
    }
    
    
    function Point() {
    	this.x = 0;
    	this.y = 0;
    }
    var cellHeight = 90;
    var cellWidth = 90;
    var cellPerTile = 5;
    var mapHeight = 100;
    var mapWidth = 100;
    var loadTiles = 1;
    var unloadTiles = 4;
    var lastloaded = new Point();
    var loading = "true";
    
    var maploaded = new Array(29);
    for (a = 0; a < (mapWidth / cellPerTile); ++ a) {
    	maploaded [a] = new Array(29);
    	for (b = 0; b < (mapHeight / cellPerTile); ++ b){
    		maploaded[a] [b] = false;
    	}
    }
    originalClick = new Point();
    pos = new Point();
    $(document).ready(function() {
       // Places the map inside of the viewing box
       	var map = new Map($("div.viewingBox"));
    });

  4. #4
    Join Date
    Feb 2011
    Posts
    3
    still need some help here is anyone is able, im hoping to get started with a better plan.

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