Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

1. ## Setting Boundaries

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.

• 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 -
Code:
```(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 -
Code:
```(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

• Code:
```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);
}

key_down(evt.keyCode);
},true);
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).

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

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

• ## Users who have thanked niralsoni for this post:

Fatt101 (12-19-2012)

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

Code:
`<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?

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

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

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

•

#### Posting Permissions

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