Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    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.

  • #2
    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 02:25 PM.

  • #3
    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).

  • #4
    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)

  • #5
    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:
    <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?
    Last edited by Fatt101; 12-19-2012 at 02:49 PM.

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

  • #7
    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=<div id="PB"<IMG STYLE="Height:375px" SRC = "Images/playboard.png"></div>

    not sure if that will be right.

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


  •  

    Posting Permissions

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