Flash Website Builder- Trendy Site Builder is a Flash Site Building tool that helps users build stunning websites. Check Out Custom Custom Logo Design by LogoBee. Website Design and Free Logo Templates available.
 CodingForums.com Setting Boundaries

Before you post, read our: Rules & Posting Guidelines

Enjoy an ad free experience by logging in. Not a member yet? Register.
 12-19-2012, 01:55 PM PM User | #1 Fatt101 New to the CF scene   Join Date: Dec 2012 Posts: 6 Thanks: 1 Thanked 0 Times in 0 Posts 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.
 12-19-2012, 02:53 PM PM User | #2 niralsoni Regular Coder   Join Date: Mar 2008 Location: London Posts: 152 Thanks: 4 Thanked 42 Times in 42 Posts 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 Last edited by niralsoni; 12-19-2012 at 03:25 PM..
 12-19-2012, 02:58 PM PM User | #3 Fatt101 New to the CF scene   Join Date: Dec 2012 Posts: 6 Thanks: 1 Thanked 0 Times in 0 Posts 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); } 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).
 12-19-2012, 03:25 PM PM User | #4 niralsoni Regular Coder   Join Date: Mar 2008 Location: London Posts: 152 Thanks: 4 Thanked 42 Times in 42 Posts 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)
 12-19-2012, 03:45 PM PM User | #5 Fatt101 New to the CF scene   Join Date: Dec 2012 Posts: 6 Thanks: 1 Thanked 0 Times in 0 Posts oh ok, the code for the div image of the playboard is as shown Code: `
` 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? Last edited by Fatt101; 12-19-2012 at 03:49 PM..
 12-19-2012, 04:38 PM PM User | #6 niralsoni Regular Coder   Join Date: Mar 2008 Location: London Posts: 152 Thanks: 4 Thanked 42 Times in 42 Posts 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.
 12-19-2012, 05:19 PM PM User | #7 Fatt101 New to the CF scene   Join Date: Dec 2012 Posts: 6 Thanks: 1 Thanked 0 Times in 0 Posts 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=
not sure if that will be right.
 12-20-2012, 02:11 PM PM User | #8 Fatt101 New to the CF scene   Join Date: Dec 2012 Posts: 6 Thanks: 1 Thanked 0 Times in 0 Posts 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.

 Bookmarks

 Thread Tools Rate This Thread Rate This Thread: 5 : Excellent 4 : Good 3 : Average 2 : Bad 1 : Terrible

 Posting Rules You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is On HTML code is Off Forum Rules
 Forum Jump User Control Panel Private Messages Subscriptions Who's Online Search Forums Forums Home :: Client side development     JavaScript programming         DOM and JSON scripting         Ajax and Design         JavaScript frameworks         Post a JavaScript     HTML & CSS     XML     Flash & ActionScript         Adobe Flex     Graphics and Multimedia discussions     General web building         Site reviews         Building for mobile devices :: Server side development     Apache configuration     Perl/ CGI     PHP         Post a PHP snippet     MySQL         Other Databases     Ruby & Ruby On Rails     ASP     ASP.NET     Java and JSP     Other server side languages/ issues         ColdFusion         Python :: Computing & Sciences     Computer Programming     Computer/PC discussions     Geek News and Humour Web Projects and Services Marketplace     Web Projects         Small projects (quick fixes and changes)         Medium projects (new script, new features, etc)         Large Projects (new web application, complex features etc)         Unknown sized projects (request quote)         Vacant job positions         Looking for work/ for hire         Project collaboration/ partnership         Paid work offers and requests (Now CLOSED)     Career, job, and business ideas or advice     Domains, Sites, and Designs for sale         Domains for sale         Websites for sale         Design templates and graphics for sale :: Other forums     Member Offers     Forum feedback and announcements

All times are GMT +1. The time now is 04:54 AM.