Jump to content

The Mighty Goat

Members
 View Profile  See their activity

  • Posts

    23

  • Joined

  • Last visited

 Content Type 

Everything posted by The Mighty Goat

  1. The Mighty Goat
    Thanks for helping do something pointless
  2. The Mighty Goat
    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. The Mighty Goat
    I was just asking if that was how you activate a function in an if statement. I found out now though.
  4. The Mighty Goat
    Oh ok
  5. The Mighty Goat
    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.
  6. The Mighty Goat
    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.
  7. The Mighty Goat
    Ok. Finally all that is over.
  8. The Mighty Goat

    Every day, I eat 3.14159265 pies. I cut each slice very precisely.

  9. The Mighty Goat
    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() }
  10. The Mighty Goat
    Thanks, I'll try that
  11. The Mighty Goat
    ---> 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")[0]; 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>
  12. The Mighty Goat
    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.
  13. The Mighty Goat
    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("?")[0];
  14. The Mighty Goat
    This post was an accident I don't know how to delete posts, so ignore this.
  15. The Mighty Goat
    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("?")[0]; <head> <script type='text/javascript'> var image = document.getElementsByTagName("img")[0]; 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>
  16. The Mighty Goat
    Sorry for keep asking questions. If I never learn this, I'll never know it. I understand how it works, I'm just having problems putting it into my code. When I put it in and change it to how I think it will work for me, it makes it so I cant move the picture anymore. I also made it so it so its supposed to make an alert box appear when the collision happens, but it never appears when they collide. Even with it the if statement is in the looping function. I want to show you my code but I cant paste stuff in this...?
  17. The Mighty Goat
    I've looked over the code and checked out the link to the JSfiddle thing. I don't know what to change in the code to make it work for me. They didn't even show how you make the image make it coordinates a variable. I'm relatively new to JavaScript so I don't a lot yet.
  18. The Mighty Goat
    Yes, the arrow keys which I'll change to wasd because I prefer that
  19. The Mighty Goat
    I'll try it
  20. The Mighty Goat
    I was wondering if there is a way to detect when a certain image is in a certain area on a page. I'm making a little game where you move a character around (which is an image), and when any part of the character is over a certain 100x200px area, it activates a function. Is this possible with JavaScript? If not, can I do it with another language that works with JavaScript and html? I'd prefer JavaScript. Thanks!
  21. The Mighty Goat
    It worked how I wanted. Thanks for your help
  22. The Mighty Goat
    This is part of a Cookie Clicker knock-off if you get confused about what I named one stuff. I didn't put everything here because I'm only having a problem with the disappearing. The div and two of the upgrade buttons <!DOCTYPE html> <html> <head> <style> .div1 { float: left; margin: 10px; } </style> </head> <body> <center> <div class="div1"> <button type="button" id="FarmOneButton" onClick="upgradeFarmOne()" onMouseOver="mouseFarmOne()" onMouseOut="upgradeInfoBack()">Better Fertilizer</button> <p id="FarmOneCost">Cost: 10000</p> <p id="FarmOneInfo">Farm CPS x 2</p></div> <div class="div1"> <button type="button" id="DeliveryOneButton" onClick="upgradeDeliveryOne()" onMouseOver="mouseDeliveryOne()" onMouseOut="upgradeInfoBack()">Bigger Gas Tanks</button> <p id="DeliveryOneCost">Cost: 62500</p> <p id="DeliveryOneInfo">Delivery CPS x 2</p></div> <script type="text/javascript"> The functions that allow buying each upgrade and then take away the button and the "paragraphs" under it. function upgradeFarmOne() { if (totalCabbages > 9999) { totalCPS += farmCPS * cabbageFarms; farmCPS += farmCPS; totalCabbages -= 10000; document.getElementById("TotalCabbages").innerHTML = totalCabbages; document.getElementById("TotalCPS").innerHTML = totalCPS; document.getElementById("FarmCPS").innerHTML = farmCPS; document.getElementById("FarmOneButton").style.display = "none"; document.getElementById("FarmOneCost").style.display = "none"; document.getElementById("FarmOneInfo").style.display = "none"; } } function upgradeDeliveryOne() { if (totalCabbages > 62499) { totalCPS += deliveryCPS * cabDeliveries; deliveryCPS += deliveryCPS; totalCabbages -= 62500; document.getElementById("TotalCabbages").innerHTML = totalCabbages; document.getElementById("TotalCPS").innerHTML = totalCPS; document.getElementById("DeliveryCPS").innerHTML = deliveryCPS; document.getElementById("DeliveryOneButton").style.display = "none"; document.getElementById("DeliveryOneCost").style.display = "none"; document.getElementById("DeliveryOneInfo").style.display = "none"; } } </script> </center> </body> </html>
  23. The Mighty Goat
    They are necessary because I need the words under each button to centered with their button. I don't think adding the div to all buttons and paragraphs would keep all words centered under their button. Will your suggestion still work?
  24. The Mighty Goat
    I have a bunch of buttons with words under each all beside each other across the page because they each have a div tag making them float to the left. I added a margin attribute thing (I don't know what's it called) with the div so the button weren't touching. I made it so when you click a button, it made is so the button and the words under it disappeared (style.display = "none"). The problem is that when it disappears, it still shows the margin for it, so every time you click a button and the ones to the right move left after it disappears, the left side of the next button isn't where the left side of the one clicked was. I am wondering is there is a way I can hide or take away its margin when it disappears. After you click more, there a big space between the button and the side of the screen. I am explaining this as good as I can. I can't easily show you what I mean.
×
×
  • Create New...