Jump to content

How do you make images move towards the left?


The Mighty Goat

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>
 
<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 by The Mighty Goat
Link to comment
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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...