Setting Boundaries

[Fatt101]

Hi, at the moment i have 4 squares moving freely around the window on load, two are going left to right along the x axis of a square (or playboard) and two are going up and down on the y axis.

the exact measurements of the playboard are
TOP:150px; LEFT:400px; WIDTH:400px; HEIGHT:300px

i am guessing that whatever happens with it, the actually measurements for the area i want to keep the sq in will be
TOP:150px == 450px
LEFT:400px == 800px

i am a bit clueless on how to keep the images within this area, any help would be greatly appreciated.

[niralsoni]

the boundary check condition should always be calculated as the position of the object and the width/height of the object.

For instance, say your board size is 400x300 (width x height). your object(square image) size is say 20x20 (width x height).

So, the boundary condition when moving left to right should be -

(left position of square) >= (left position of board)
AND
(left position of square + width of square) <= (left position of board + width of board)

Similarly, when moving top to bottom, the condition should be -

(top position of square) >= (top position of board)
AND
(top position of square + height of square) <= (top position of board + height of board)

Hope this helps you out...

Regards,
Niral Soni

[Fatt101]

var x = 0;
var y = 0;
var player1y = 0;
var player2y = 0;
var player3x=0;
var player4x=0;
var elem;
var elem2;
var elem3;
var elem4;
var UP=38, DOWN=40;
var UP2=87, DOWN2=83;
var LEFT=90, RIGHT=88;
var LEFT2=103, RIGHT2=105;
var up_pressed = down_pressed  = false;
var up2_pressed = down2_pressed = false;
var left_pressed = right_pressed = false;
var left2_pressed = right2_pressed = false;
var MOVE_INC = 4;

function key_down(key_code) {
	 if (key_code == DOWN) {
		down_pressed = true;
	} else if (key_code == UP) {
		up_pressed = true;
	}
	 if (key_code == DOWN2) {
	 down2_pressed = true;
	 } else if (key_code == UP2) {
	 up2_pressed = true;
	 }
	  if (key_code == LEFT) {
		left_pressed = true;
	} else if (key_code == RIGHT) {
		right_pressed = true;
	}
	 if (key_code == LEFT2) {
	 left2_pressed = true;
	 } else if (key_code == RIGHT2) {
	 right2_pressed = true;
	 }
	 }
	 {
	console.debug("::"+key_code);
}


function key_up(key_code) {
	 if (key_code == DOWN) {
		down_pressed = false;
	} else if (key_code == UP) {
		up_pressed = false;
	}
	 if (key_code == DOWN2) {
	 down2_pressed = false;
	 } else if (key_code == UP2) {
	 up2_pressed = false;
	 }
	 if (key_code == LEFT) {
		left_pressed = false;
	} else if (key_code == RIGHT) {
		right_pressed = false;
	}
	 if (key_code == LEFT2) {
	 left2_pressed = false;
	 } else if (key_code == RIGHT2) {
	 right2_pressed = false;
	 }
}

function loop() 
{	
{	var elem = document.getElementById("sq2");
	elem.style.position="absolute";
	elem.style.left = x+"px";
	elem.style.top = player1y+"px";
	if (down_pressed) {
		player1y+=MOVE_INC;
	}
	if (up_pressed) {
		player1y-=MOVE_INC;
	}
}

{	var elem2 = document.getElementById("sq1");
	elem2.style.position="absolute";
	elem2.style.left = x+"px";
	elem2.style.top = player2y+"px";
	if (down2_pressed) {
		player2y+=MOVE_INC;
	}
	if (up2_pressed) {
		player2y-=MOVE_INC;
	}
}

{	var elem3 = document.getElementById("sq3");
	elem3.style.position="absolute";
	elem3.style.left = player3x+"px";
	elem3.style.top = y+"px";
	if (left_pressed) {
		player3x+=MOVE_INC;
	}
	if (right_pressed) {
		player3x-=MOVE_INC;
	}
}
{	var elem4 = document.getElementById("sq4");
	elem4.style.position="absolute";
	elem4.style.left = player4x+"px";
	elem4.style.top = y+"px";
	if (left2_pressed) {
		player4x+=MOVE_INC;
	}
	if (right2_pressed) {
		player4x-=MOVE_INC;
	}
}



	
	window.setTimeout("loop()", 50);
}


	

function on_load() {
	window.addEventListener('keydown', function(evt) {
			key_down(evt.keyCode);
		},true);
	window.addEventListener('keyup', function(evt) {
			key_up(evt.keyCode);
		},true);
    loop();	
}

this is my code at the moment for the images moving, where abouts would i start to input the code for setting the boundary? would it be within each element tag for the various images? would i then have to reference a new image element with the background image i am trying to keep the moving images in? ( in this case they are sq 1, sq 2, sq 3, sq 4).

[niralsoni]

You need to code within every conditional blocks similar to shown below -

	if (down_pressed) {
            if(player1y+MOVE_INC <= BOARD_HEIGHT)
		player1y+=MOVE_INC;
	}
	if (up_pressed) {
           if(player1y-MOVE_INC >= BOARD_TOP)
		player1y-=MOVE_INC;
	}

[Fatt101]

oh ok, the code for the div image of the playboard is as shown

<div id="PB"><IMG STYLE="position:absolute; TOP:150px; LEFT:400px; WIDTH:400px; HEIGHT:300px" SRC="Images/playboard.png"></div>

would this mean that i have to input a code similar to this?

var elem4= document.getElementById("PB");
elem4.style.position="absolute";
elem4.style.left = x+"px";
elem4.style.top = y+"px";
elem4.style.width = width+"px";
elem4.style.height = height+"px";

with putting new variables at the top of the page

var height = 0
var width = 0

if i was to put the var elem4 code in, would i have to put it at the beginning of the function loop() code or somewhere else?

looking at it again, i think i would have to put specific pixel numbers in the pixel count after the variables to get what i want to happen?
so var height would be var height = 300 for the top of the playingboard and then var height2=600 for the bottom?

[niralsoni]

No, you dont need to add any code for the playboard. the inline style is sufficient. Only thing required is to define the variables PB_HEIGHT, PB_WIDTH, PB_TOP and PB_LEFT and use it in the loop() function.

Thumb rule is whenever you are incrementing x or y coordinates, you need to compare the PB_WIDTH or PB_HEIGHT, respectively.
AND
whenever you are decrementing x or y coordinates, you need to compare the PB_LEFT or PB_TOP, respectively.

[Fatt101]

ah ok, sorry im pretty new to javascript..

when defining the variables, i will have to make a reference to the div id in the html file? currently, im sourcing the javascript in the script link.

so the variables would have to be something like var PB_HEIGHT=<div id="PB"<IMG STYLE="Height:375px" SRC = "Images/playboard.png"></div>

not sure if that will be right.

[Fatt101]

have the squares going up and down stopping at the x axis of the point of the where the sq1 image is when you load the webpage, nothing else works tho :S.