Jump to content
The Mighty Goat

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

Share this post


Link to post
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 this post


Link to post
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>

 

Share this post


Link to post
Share on other sites

Join the conversation

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

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

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

Loading...

×
×
  • Create New...