# How do you make images move towards the left?

## Recommended Posts

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>

<title>Square Matrix</title>

<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>
Edited by The Mighty Goat

##### Share on other sites

It sounds like one of your if conditions isn't matching, you should add some code to print the values that you're checking to see what everything is, so that when it stops you can figure out why it's not matching anything.

##### Share on other sites

<!DOCTYPE html>

<html lang="en">

<meta charset="utf-8"/>

<title>moving block</title>

<script>

window.onerror = function(a,b,c){

return true;

}

</script>

<style>

*{

margin:0;

}

#container{

position:relative;

height:750px;

border:5px solid red;

}

#BlueSquare{

background-color:blue;

width: 300px;

height: 300px;

position:absolute;

top:100px;

left:100px;

}

#status{

margin:10px;

}

</style>

<body>

<div id="container">

<h3 id="status"></h3>

<div id="BlueSquare">

</div>

</div>

<script>

'use strict';

var blueHeight = 300;

var blueWidth = 300;

var blueX = 100;

var blueY = 100;

var phase = 1;

var comment = 'Phase '+phase+' begins with: height:'+blueHeight+', width:'+blueWidth+' x:'+blueX+', y:'+blueY;

document.getElementById("status").innerHTML = comment;

setInterval(squareMatrix, 20);

function squareMatrix() {

var bs = document.getElementById("BlueSquare");

if (phase == 1){

if(blueWidth > 0) {

blueX += 1;

blueWidth -= 1;

bs.style.width = blueWidth + "px";

bs.style.left = blueX + "px";

}else{

phase = 2;

comment = 'Phase '+phase+' begins with: height:'+blueHeight+', width:'+blueWidth+' x:'+blueX+', y:'+blueY;

document.getElementById("status").innerHTML = comment;

}

}else if (phase == 2){

if (blueWidth < 300) {

blueWidth += 1;

bs.style.width = blueWidth + 'px';

}else{

phase = 3;

comment = 'Phase '+phase+' begins with: height:'+blueHeight+', width:'+blueWidth+' x:'+blueX+', y:'+blueY;

document.getElementById("status").innerHTML = comment;

}

}else if (phase == 3){

if (blueHeight > 0) {

blueY += 1;

blueHeight -= 1;

bs.style.height = blueHeight + "px";

bs.style.top = blueY + "px";

}else{

phase = 4;

comment = 'Phase '+phase+' begins with: height:'+blueHeight+', width:'+blueWidth+' x:'+blueX+', y:'+blueY;

document.getElementById("status").innerHTML = comment;

}

}else if (phase == 4){

if (blueHeight < 300) {

blueHeight += 1;

bs.style.height = blueHeight + "px";

}else{

phase = 5;

comment = 'Phase '+phase+' begins with: height:'+blueHeight+', width:'+blueWidth+' x:'+blueX+', y:'+blueY;

document.getElementById("status").innerHTML = comment;

}

}else if (phase == 5){

if (blueWidth > 0) {

blueWidth -= 1;

bs.style.width = blueWidth + "px";

}else{

phase = 6;

comment = 'Phase '+phase+' begins with: height:'+blueHeight+', width:'+blueWidth+' x:'+blueX+', y:'+blueY;

document.getElementById("status").innerHTML = comment;

}

}else if (phase == 6){

if (blueWidth < 300) {

blueWidth += 1;

blueX -= 1;

bs.style.width = blueWidth + "px";

bs.style.left = blueX + "px";

}else{

phase = 7;

comment = 'Phase '+phase+' begins with: height:'+blueHeight+', width:'+blueWidth+' x:'+blueX+', y:'+blueY;

document.getElementById("status").innerHTML = comment;

}

}else if (phase == 7){

if (blueHeight > 0) {

blueHeight -= 1;

bs.style.height = blueHeight + "px";

}else{

phase = 8;

comment = 'Phase '+phase+' begins with: height:'+blueHeight+', width:'+blueWidth+' x:'+blueX+', y:'+blueY;

document.getElementById("status").innerHTML = comment;

}

}else if (phase == 8){

if (blueHeight < 300) {

blueHeight += 1;

blueY -= 1;

bs.style.height = blueHeight + "px";

bs.style.top = blueY + "px";

}else{

phase = 1;

comment = 'Phase '+phase+' begins with: height:'+blueHeight+', width:'+blueWidth+' x:'+blueX+', y:'+blueY;

document.getElementById("status").innerHTML = comment;

}

}

}// end of func

</script>

</body>

</html>

##### Share on other sites

Thanks for helping do something pointless

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.