How do you make images move towards the left?

The Mighty Goat · June 16, 2016

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>

Edited June 17, 2016 by The Mighty Goat

justsomeguy · June 17, 2016

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.

davej · June 17, 2016


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>moving block</title>

<script>

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

alert('Javascript Error: '+a+'\nPath: '+b+'\nLine: '+c);

return true;

}

</script>

<style>

*{

margin:0;

padding: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>

</head>
 

<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>

The Mighty Goat · June 20, 2016

Thanks for helping do something pointless

Sign In

How do you make images move towards the left?

Recommended Posts

The Mighty Goat

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

The Mighty Goat

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity