astralaaron

edit:nevermind

Nevermind, I have fixed the problem... I can't fully explain it..basically the camera positions itself based on the player X position, and since I had my player moving at a speed of 2.5 instead of a whole number like 2 or 3, there was a .5 position difference in the tiles... as soon as I changed it to a whole number..problem fixed

Well, I implemented (on a different link) only drawing tiles that are within the camera box...however, it did not fix the lines between tiles like I thought it might... so I am out of ideas about why this is happening...

This is related to a previous thread about a small game I am making: http://w3schools.invisionzone.com/index.php?showtopic=48682

The problem I am having now is as the player walks around the map, as soon as the camera starts scrolling to follow the player, the map tiles seem to show a tiny space between them, resulting in lines through the map.

I realized, that I was not doing any kind of "flip" function (drawing everything to a temporary canvas, then copying the entire canvas onto the game screen) so I added that, which gives a better result, but still you see the lines between tiles.

Here is a link so you can test it yourself to see (press enter to get to the map screen)

The one thing that I haven't implemented yet is only drawing tiles that are within the game gamera. As of right now, the entire map draws out each frame. Do you think this might fix it? Or do you have any other ideas of why the tiles seem to slightly split apart? Thanks for any advice.

Thank you Ignolme

Ignolme, you are right.. I changed it to this and it works:

 this.showMap = function() {        for(var i=0; i < engine.tiles.length; i++) {            for(var j=0; j<engine.tiles[0].length; j++) {                if (engine.tiles[i][j].type==0) continue;                var spriteOffset = {                    'x': engine.tiles[i][j].W * (engine.tiles[i][j].type - 1),                    'y': 0,                    'w': engine.tiles[i][j].W,                    'h': engine.tiles[i][j].H                }                engine.getScreen().drawImage(engine.tileSheet, spriteOffset.x, spriteOffset.y, spriteOffset.w, spriteOffset.h, engine.tiles[i][j].X, engine.tiles[i][j].Y, engine.tiles[i][j].W, engine.tiles[i][j].H);            }        }    }

If it was a blank tile (0) then it was causing it to go -1. Thanks so much for your help. By the way, how did you see the error?

EDIT: when visiting the example links, press enter to get to level one (map screen)

Making a small game for fun/learning...but I ran into a problem. I am hoping someone can explain why this is happening.

Subject 1:

LevelOne.prototype.draw = function() { 		this.game.showMap();	for (var i=0; i < this.gameObjects.length; i++) {		this.gameObjects[i].draw();	}	}

If I leave out the showMap(); function, the game objects draw fine (small character that can walk around, and a couple stationary characters) When I add the showMap(); function, the map draws out fine, but the game objects are not there.

click here for example 1

Subject 2:

LevelOne.prototype.draw = function() { 		for (var i=0; i < this.gameObjects.length; i++) {		this.gameObjects[i].draw();	}	this.game.showMap();}

when I change this function to code above (draw objects first), the map draws, and so do the gameObjects, but as you would expect..the map is overlaying on top of my game objects...

click here for example 2

in case it will help diagnose... here is the showMap() function:

	this.showMap = function() {		for(var i=0; i < engine.tiles.length; i++) {			for(var j=0; j<engine.tiles[0].length; j++) {				var spriteOffset = {					'x': engine.tiles[i][j].W * (engine.tiles[i][j].type - 1),					'y': 0,					'w': engine.tiles[i][j].W,					'h': engine.tiles[i][j].H 				}				engine.getScreen().drawImage(engine.tileSheet, spriteOffset.x, spriteOffset.y, spriteOffset.w, spriteOffset.h, engine.tiles[i][j].X, engine.tiles[i][j].Y, engine.tiles[i][j].W, engine.tiles[i][j].H);			}		}	}

Really appreciate any help, this has my head spinning.

Ignolme, are you saying in html5 we don't need to close tags like <img /> <hr /> etc. for the document to be valid?

Looks like the z-index of the menu is lower than that of the page content

What do you mean by things go wrong? I don't see any problem... Do you mean you want the content to stay at the same spot on the screen even when the page is scrolling?

DaveJ your example worked fine. I was just doing multiple links to mess around and practice up a bit. I appreciate what you did.

perfect! thanks JSG

	for(var j=0; j < list.length; j++) {		for(var i=list[j].childNodes.length-1; i > 0; i--) {			if(list[j].childNodes[i].nodeName != 'A') {				list[j].removeChild(list[j].childNodes[i]);			}		}	}

ahh right I totally spaced that you mentioned to loop backwards. I'll give that a shot.

Well, this works:

	for(var j=0; j < list.length; j++) {		var bold = list[j].getElementsByTagName('b');		for(var x=0; x < bold.length; x++) {			for(var y=0; y < bold[x].childNodes.length; y++) {				bold[x].removeChild(bold[x].childNodes[y]);			}		}		for(var i=0; i < list[j].childNodes.length; i++) {			if(list[j].childNodes[i].nodeName != 'A') {				list[j].removeChild(list[j].childNodes[i]);			}		}	}

I guess for each type of tag I would need to add a loop.

First of all, davej's example worked perfect for what I needed. That being said, I am messing around and trying to add multiple <a> tags and make it work. here is what I came up with so far:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Strip Children from td's in table except links </title><script>window.onload = init;function init(){document.getElementById('btn1').onclick = tableloop}function tableloop(){var table = document.getElementById('abc');var list = table.getElementsByTagName('td');	for(var j=0; j < list.length; j++) {		for(var i=0; i < list[j].childNodes.length; i++) {			if(list[j].childNodes[i].nodeName != 'A') {				list[j].removeChild(list[j].childNodes[i]);			}		}	}}</script></head><body><table id="abc"><tr><td><a id="a1" href="">test1</a><b>asdf</b>qwert qwert<a id="a1" href="">test2</a><b>werq</b>qwert</td></tr><tr><td><a id="a1" href="">test</a><b>asdf</b>qwert qwert<b>werq</b>qwert</td></tr><tr><td><a id="a1" href="">test</a><b>asdf</b>qwert qwert<b>werq</b>qwert</td></tr><tr><td><a id="a1" href="">test</a><b>asdf</b>qwert qwert<b>werq</b>qwert</td></tr></table><br/><input type="button" id="btn1" value="Strip Unwanted"/><div id="out"></div></body></html>

It works, except for it will not remove the bold text. It seems like <b>test</b> may be counted as 1 node instead of 3...and will not remove? I am not quite sure...any simple fix to this? or is it more complicated, as far as needing to check each node for their own child nodes? thanks for the help!

I see, thank you.

Thanks a bunch davej I am going to mess with this a bit later.

Thanks JSG. Is a regular expression the only way? Davej's example seemed to work for the one TD. I am very comfortable with regular expressions. I guess this is a good time to get some practice in.

By the way I didn't nececarily need to remove, hiding is really all I needed, but I ran into problems with older versions of IE.

All of the td's inside of the <table id="news01">

Ignolme, I am just curious about whether or not there is an advantage to creating a hidden <img> element rather than the way davej showed in his example ( var img = new Image(); img.src = "Weymouth%20by%20steam%202012%20047.jpg"; )

thanks

Well it turns out in IE7 there is an issue with the way that I used font-size:0 to handle this... so I will need to do something else. I am going to try to use davej's example to build from. I appreciate any help with this. Here is an example of the table I need to strip from:

<table id="news01"><tr><td id="abc"><a id="a1" href="">test</a><b>asdf</b>qwert qwert<b>werq</b>qwert</td></tr><tr><td id="abc"><a id="a1" href="">test</a><b>asdf</b>qwert qwert<b>werq</b>qwert</td></tr><tr><td id="abc"><a id="a1" href="">test</a><b>asdf</b>qwert qwert<b>werq</b>qwert</td></tr></table>

I guess what needs to happen is grab the table id, and filter through the child elements and apply the changes to each table definition... I'm going to try my best to figure it out, again I appreciate any help.

It might help if we actually saw that section of the HTML markup. Multiple elements with the same id isn't just poor practice -- it is a total screw-up.

lol I agree.. its just like your example but with multiple td id="abc"

The scientist, if you look at my example:

<td id="abc"> <a id="a1" href="">test</a><b>asdf</b>qwert qwert<b>werq</b>qwert</td>

the "qwert qwert" is not inside of the <b> tags. So when I do display none on the abc id, obviously it will hide all it including the anchor. Setting the text to the background color doesnt work out because I need to get rid of the spacing as well, I forgot to mention there are some break lines in there after the <b> tags. Setting the font size to 0 worked out but I don't have access to IE currently, so I am just hoping it is working cross browser. For learning purposes though I appreciate the javascript example

by the way davej, this CMS I am working with is using some really bad practices (multiple td's with the same ID) your script strips out the first <td id="abc"> but leaves all of the others alone. Any way around this?

Thanks for the response everyone. (davej, I haven't tried that out yet, I will today. I appreciate you typing all of that up)

 

Or you could just set the display of all child elements in a <td> tag that you want to hide to none

td b{  display: none;}

Thescientist, that was my first thought, I tried something like this but since not all of the text is within the <b> tag, or any other element It wouldn't work. The <a> would also display none. I tried adding display:block!important; to the <a> but had no luck.

Thanks JSG.

I was able to get around my problem with some css...(the tables are auto generated content by a CMS)... what I did was set the font-size to 0 of everything in the TD's then set the font size of the anchors back to their normal size and it worked out.