 # The Mighty Goat

Members

23

0 Neutral

• Rank
Newbie

## Profile Information

• Location
Mars
• Interests
Goats, JavaScript, HTML, videogames, I'm not a nerd.
1. Thanks for helping do something pointless
2. ## How do you make images move towards the left?

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>
3. I was just asking if that was how you activate a function in an if statement. I found out now though.
4. It says for websites so I thought it only meant actual websites. I didn't see anyone there have game posts though when I quickly checked.
5. I was thinking it would be nice for people to be easily be able to play other people's games they made (using languages such as JavaScript) without telling them to copy-paste your code. I'd like to play what other people made. As long as its it not a virus code. The only problem is, how would you do it? I have no idea.
6. Ok. Finally all that is over.
7. Every day, I eat 3.14159265 pies. I cut each slice very precisely.

8. I just did the biggest face-palm ever. I did what you said and wondered why it wasn't working, so I put each part in at a time so see which was broken, and then when I added the targetArea variable, I didn't work. I looked at it and within 2 seconds, I realized it didn't have the equal sign. lol Anyway, ITS WORKING!!! Thanks so much. :) One more question: to activate a function in an if statement, would you do this? if (variable = 1) { myFunction() }
9. Thanks, I'll try that
10. ---> I found out you can only use external files if you have a website or something. I'm just writing scripts and opening them in the internet to play them. What can I do to make the JavaScript load a bit later? ---> I moved the if statement into the loop, but I still cant move the image anymore. <html> <head> <script type='text/javascript'> var image = document.getElementsByTagName("img"); var targetArea = { x: 350, y: 450, width: 300, height: 300 }; // movement vars var xpos = 50; var ypos = 50; var xspeed = 1; var yspeed = 0; var maxSpeed = 5; // boundary var minx = 0; var miny = 0; var maxx = 700; var maxy = 800; // controller vars var upPressed = 0; var downPressed = 0; var leftPressed = 0; var rightPressed = 0; function slowDownX() { if (xspeed > 0) xspeed = xspeed - 1; if (xspeed < 0) xspeed = xspeed + 1; } function slowDownY() { if (yspeed > 0) yspeed = yspeed - 1; if (yspeed < 0) yspeed = yspeed + 1; } function gameLoop() { var imageArea { x: image.offsetLeft, y: image.offsetTop, width: image.offsetWidth, height: image.offsetHeight }; if (imageArea.x < targetArea.x + targetArea.width && imageArea.x + imageArea.width > targetArea.x && imageArea.y < targetArea.y + targetArea.height && imageArea.height + imageArea.y > targetArea.y) { alert("Collision"); } // change position based on speed xpos = Math.min(Math.max(xpos + xspeed,minx),maxx); ypos = Math.min(Math.max(ypos + yspeed,miny),maxy); // or, without boundaries: // xpos = xpos + xspeed; // ypos = ypos + yspeed; // change actual position document.getElementById('character').style.left = xpos; document.getElementById('character').style.top = ypos; // change speed based on keyboard events if (upPressed == 1) yspeed = Math.max(yspeed - 1,-1*maxSpeed); if (downPressed == 1) yspeed = Math.min(yspeed + 1,1*maxSpeed) if (rightPressed == 1) xspeed = Math.min(xspeed + 1,1*maxSpeed); if (leftPressed == 1) xspeed = Math.max(xspeed - 1,-1*maxSpeed); // deceleration if (upPressed == 0 && downPressed == 0) slowDownY(); if (leftPressed == 0 && rightPressed == 0) slowDownX(); // loop setTimeout("gameLoop()",20); } function keyDown(e) { var code = e.keyCode ? e.keyCode : e.which; // 38,40,37,39 if (code == 87) upPressed = 1; if (code == 83) downPressed = 1; if (code == 65) leftPressed = 1; if (code == 68) rightPressed = 1; } function keyUp(e) { var code = e.keyCode ? e.keyCode : e.which; if (code == 87) upPressed = 0; if (code == 83) downPressed = 0; if (code == 65) leftPressed = 0; if (code == 68) rightPressed = 0; } </script> </head> <body onload="gameLoop()" onkeydown="keyDown(event)" onkeyup="keyUp(event)" bgcolor='gray'> <!-- The Level --> <div style='width:900;height:900;position:absolute;left:0;top:0;background:white;'> </div> <!-- The Blue Area --> <div style='width:300;height:300;position:absolute;left:350;top:450;background:blue;'> </div> <!-- The Character --> <img id='character' src='http://images.dpchallenge.com/images_challenge/1000-1999/1238/1200/Copyrighted_Image_Reuse_Prohibited_897297.jpg' style='position:absolute;left:50;top:50;height:100;width:200;'/> </body> </html>
11. K. I've gone through the whole JavaScript part of the javascript tutorial kind-of recently so I guess I'll read the HTML DOM now.
12. I copied the movable image code a little while ago because I didn't know how to make movable images. I mostly understand it now. I know what to change to make it how a want. The string in the loop and the 10 millisecond repeat time was part of it. I'll try what you said. Thanks I don't know how to make a file access the JavaScript in an external file but I guess I can go research that. Lastly, I still don't know what to put in the apostrophes in this part: document.getElementsByTagName("?");
13. This post was an accident I don't know how to delete posts, so ignore this.
14. I'm using the normal Internet Explorer because chrome crashes my computer a couple times every day when I have it open. Copy paste works with everything else when I use this browser. Strange. I'll use chrome. When you remove the four groups of code you said add, the image is movable. Try it without those bits. Also, I don't know what to put in the apostrophes in this part: document.getElementsByTagName("?"); <head> <script type='text/javascript'> var image = document.getElementsByTagName("img"); var imageArea { x: image.offsetLeft, y: image.offsetTop, width: image.offsetWidth, height: image.offsetHeight }; var targetArea = { x: 100, y: 100, width: 100, height: 200 }; // if statement for collision is below // movement vars var xpos = 100; var ypos = 100; var xspeed = 1; var yspeed = 0; var maxSpeed = 5; // boundary var minx = 0; var miny = 0; var maxx = 700; var maxy = 800; // controller vars var upPressed = 0; var downPressed = 0; var leftPressed = 0; var rightPressed = 0; function slowDownX() { if (xspeed > 0) xspeed = xspeed - 1; if (xspeed < 0) xspeed = xspeed + 1; } function slowDownY() { if (yspeed > 0) yspeed = yspeed - 1; if (yspeed < 0) yspeed = yspeed + 1; } function gameLoop() { if (imageArea.x < targetArea.x + targetArea.width && imageArea.x + imageArea.width > targetArea.x && imageArea.y < targetArea.y + targetArea.height && imageArea.height + imageArea.y > targetArea.y) { alert("Collision detected"); } // change position based on speed xpos = Math.min(Math.max(xpos + xspeed,minx),maxx); ypos = Math.min(Math.max(ypos + yspeed,miny),maxy); // or, without boundaries: // xpos = xpos + xspeed; // ypos = ypos + yspeed; // change actual position document.getElementById('character').style.left = xpos; document.getElementById('character').style.top = ypos; // change speed based on keyboard events if (upPressed == 1) yspeed = Math.max(yspeed - 1,-1*maxSpeed); if (downPressed == 1) yspeed = Math.min(yspeed + 1,1*maxSpeed); if (rightPressed == 1) xspeed = Math.min(xspeed + 1,1*maxSpeed); if (leftPressed == 1) xspeed = Math.max(xspeed - 1,-1*maxSpeed); // deceleration if (upPressed === 0 && downPressed === 0) slowDownY(); if (leftPressed === 0 && rightPressed === 0) slowDownX(); // loop setTimeout("gameLoop()",10); } function keyDown(e) { var code = e.keyCode ? e.keyCode : e.which; if (code == 38) upPressed = 1; if (code == 40) downPressed = 1; if (code == 37) leftPressed = 1; if (code == 39) rightPressed = 1; } function keyUp(e) { var code = e.keyCode ? e.keyCode : e.which; if (code == 38) upPressed = 0; if (code == 40) downPressed = 0; if (code == 37) leftPressed = 0; if (code == 39) rightPressed = 0; } </script> </head> <body onload="gameLoop()" onkeydown="keyDown(event)" onkeyup="keyUp(event)" bgcolor='gray'> <!-- The Level --> <div style='width:900;height:900;position:absolute;left:0;top:0;background:white;'> </div> <!-- Blue Rectangle --> <div style='width:300;height:200;position:absolute;left:450;top:550;background:blue;'> </div> <!-- Moveable Red Rectangle --> <img id='character' src='http://images.dpchallenge.com/images_challenge/1000-1999/1238/1200/Copyrighted_Image_Reuse_Prohibited_897297.jpg' style='position:absolute;left:100;top:100;height:100;width:200;'/> </body>
×