[JS] grenzen veranderen - Softwareontwikkeling

dinsdag 14 december 2004 10:21

Acties:

Verwijderd

Topicstarter

Hallo,

wij hebben een opdracht om 8 blokjes binnen een veld te laten bewegen.
Dit hebben wij met JavaScript gedaan, helaas houdt alleen blokje 0 zich aan die grens.

Het is moeilijk uit te leggen, daarom staat hier een voorbeeld van de huidige situatie:
De pagina.

Nu is het de bedoeling dat alle blokjes binnen het groene vlak blijven.
Maar wij zien de fout niet.
Hier is de code:

JavaScript:

<html>
    <head>
        <title>Animatie a</title>
        <script type="text/javascript" language="Javascript">
        
            xVerplaats = new Array(5,6,7,8,9,10,11,12);
            yVerplaats = new Array(10,11,12,13,14,15,16,17,18);
            xPos = new Array(10,20,30,40,50,10,10,40);
            yPos = new Array(10,20,30,40,50,10,10,40);
            
            var tijd = "";
            var delay = 50;
            var aantal = 8;
            var niets;
                
            function startVerplaats()
            {
                if (tijd == ""){
                    tijd = setInterval ("verplaatsen()", delay);
                }   
            }
            
            function verplaatsen()
            {
                for( var i=0; i<aantal; i++){
                    if(xPos[i]<=0)
                    {
                        xVerplaats[i]=xVerplaats[i]*-1;
                    }
                
                    if(yPos[i]<=0)
                    {
                        yVerplaats[i]=yVerplaats[i]*-1;
                    }
            
                    if(xPos[i]>=280)
                    {
                        xVerplaats[i]=xVerplaats[i]*-1;
                    }
                
                    if(yPos[i]>=380)
                    {
                        yVerplaats[i]=yVerplaats[i]*-1;
                    }
                                        
                xPos[i]+=xVerplaats[i];
                yPos[i]+=yVerplaats[i];
                
                
                document.getElementById(i) .style.left = xPos[i] + "px";
                document.getElementById(i) .style.top = yPos[i] + "px";
                }
            }
                
        </script>
    
        <style type="text/css">
            #tafel { position:absolute; left:0px;   top:0  px; z-index:1; background:green; width:300px; height:400}
            
            #0 {position:absolute;  z-index:9; background:violet;   width:20px;   height:20  }
            #1 {position:absolute;  z-index:2; background:orange;   width:20px;   height:20  }
            #2 {position:absolute;  z-index:3; background:red;      width:20px;   height:20  }
            #3 {position:absolute;  z-index:4; background:white;    width:20px;   height:20  }
            #4 {position:absolute;  z-index:5; background:pink;         width:20px;   height:20  }
            #5 {position:absolute;  z-index:6; background:yellow;   width:20px;   height:20  }
            #6 {position:absolute;  z-index:7; background:blue;         width:20px;   height:20  }
            #7 {position:absolute;  z-index:8; background:black;    width:20px;   height:20  } 
        </style>
    </head>
    <body onload = "startVerplaats();">
        <div id="tafel">
        <div id="0">
        <div id="1">
        <div id="2">
        <div id="3">
        <div id="4">
        <div id="5">
        <div id="6">
        <div id="7">
    </body>
</html>

De waarde van de blokjes staan in Array's.
Op de 1e positie in de xVerplaats array is de horizontale verplaatsing van het blokje met id 0
geplaatst. Dit is ook zo met de yVerplaats, hier staan de waarden in voor de verticale verplaatsing.

In de xPos en yPos staan de begin posities van de blokjes, deze worden veranderd met de functie verplaatsen(). Indien de zijkanten voorbij het vlak komen, wordt de horizontale verplaatsing omgedraaid. (*-1, dus -5 * -1 = 5 en 5 *-1 = -5 worden.) Hierdoor gaat het blokje de andere kant uit.
Dit is ook voor de boven en onderrand gedaan.

Omdat de randen gewoon in de vergelijking (if xPos >= 280) worden meegegeven en volgens ons dus niet zou kunnen veranderen, wat hij in het voorbeeld dus wel doet.

Heeft iemand een idee wat het probleem is?

dinsdag 14 december 2004 10:29

Acties:

Stubby

Misschien is het handig om je div tags af te sluiten

Ik zir nu namelijk alleen maar een groen vlak.

Kijk trouwens gewoon even naar de output van de w3c validator en fix je site, dat zou volgens mij je probleem op moeten lossen.

http://validator.w3.org/c...weakers%2Fdeel%2520b.html

[ Voor 53% gewijzigd door Stubby op 14-12-2004 10:31 ]

dinsdag 14 december 2004 10:33

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

een ID mag nooit enkel een getal zijn

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

http://www.w3.org/TR/html4/types.html#h-6.2

de fout is volgens mij ook de niet afgesloten DIV's, daardoor berekenen ze de positie tov elkaar (position: absolute is relatief aan het parent-element dat een position heeft)

[ Voor 24% gewijzigd door RM-rf op 14-12-2004 10:39 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

dinsdag 14 december 2004 11:33

Acties:

Verwijderd

Topicstarter

RM-rf schreef op dinsdag 14 december 2004 @ 10:33:
een ID mag nooit enkel een getal zijn

[...]

http://www.w3.org/TR/html4/types.html#h-6.2

de fout is volgens mij ook de niet afgesloten DIV's, daardoor berekenen ze de positie tov elkaar (position: absolute is relatief aan het parent-element dat een position heeft)

Nu ik de div's heb afgesloten werkt hij inderdaad goed.
Alleen gaan enkele blokjes nog over de rand heen.

Dat probleem is nu ook opgelost, heel stom, 380/15 is niet een rond getal, daarom zal hij er enkele pixels overheen schieten. Dat probleem is nu opgelost, bedankt voor alle hulp.

Maar bedankt, wij kunnen nu vol goede moed verder.

[ Voor 16% gewijzigd door Verwijderd op 14-12-2004 12:04 . Reden: probleempje opgelost ]