Search the Community
Showing results for tags 'move'.
Found 1 result
-
I am making this pointless thing where there is a blue square and the left of it moves into the right until you cant see it, and then the right side moves right to form a square again. After that, it does the same thing, but down, then left, and then back up to the starting point. I can't figure out what's wrong with my code though. So far I have until it goes left, but it doesn't finish. Try this out so you understand better. <!DOCTYPE html> <html> <head> <title>Square Matrix</title> </head> <body> <img id="BlueSquare" src="http://www.pd4pic.com/images/blue-square-color-block-background-pure-unicode.png" style="position:absolute; left:100px; top:100px" height="300" width="300"> <script type="text/javascript"> var blueHeight = 300; var blueWidth = 300; var blueX = 100; var blueY = 100; var blueNegX = 400; var blueNegY = 400; setInterval (function squareMatrix() { if (blueX < 400 && blueY == 100 && blueHeight < 301) { blueX += 1; blueWidth -= 1; document.getElementById("BlueSquare").width = blueWidth; document.getElementById("BlueSquare").style.left = blueX + "px"; } if (blueX > 399 && blueY == 100 && blueWidth < 301) { blueWidth += 1; document.getElementById("BlueSquare").width = blueWidth; } if (blueX == 400 && blueY < 400 && blueWidth > 299) { blueY += 1; blueHeight -= 1; document.getElementById("BlueSquare").height = blueHeight; document.getElementById("BlueSquare").style.top = blueY + "px"; } if (blueX == 400 && blueY > 399 && blueHeight < 301) { blueHeight += 1; document.getElementById("BlueSquare").height = blueHeight; } if (blueX > 399 && blueY == 400 && blueHeight > 299) { blueWidth -= 1; document.getElementById("BlueSquare").width = blueWidth; } if (blueX < 401 && blueY == 400 && blueWidth < 301) { blurX -= 1; blueWidth += 1; document.getElementById("BlueSquare").width = blueWidth; document.getElementById("BlueSquare").style.left = blueX + "px"; } }, 10); </script> </body> </html>
