|
JavaScript - How Do I Simulate Gravity On A Bouncing Red Dot?
Here's some code I wrote. It's just a red ball traveling around the screen. The point is to simulate some rudimentary physics. This means I have to make the ball bounce around the screen, but also get pulled down by gravity a bit. I did the bouncing part. However, I'm not sure how to simulate gravity.
Any tips? Basically I just have to reduce the vertical velocity of the ball by a certain amount at every interval, but I'm not sure how to do that. I've tried different for loops in which vy will decrease by one, but to no avail! Code: <html>
<head>
<style>
table {border-collapse:collapse}
</style>
<script>
nx=128;
ny=32;
wx=600;
wy=400;
dx=Math.floor(wx/nx);
ny=Math.round(nx*600/1000);
x1=1;y1=1;
vx=1;vy=1;
function dart()
{id1=x1+","+y1;
b1=document.getElementById(id1);
b1.style.backgroundColor="yellow";
if(x1==0 || x1==nx-1)vx= -vx;
if(y1==0 || y1==ny-1)vy= -vy;
x1 = x1+vx; y1 = y1+vy;
id1=x1+","+y1;
b1=document.getElementById(id1);
b1.style.backgroundColor="red"
}
</script>
</head>
<body>
<table>
<script>
dy=dx;
for(i=0;i<ny;i++)
{document.write("<tr>");
for(j=0;j<nx;j++)
{color="yellow";
id1=j+","+i;
document.write(
"<td id="+id1+" style='background-color:"+color+
";width:"+dx+";height:"+dy+"'></td>");
}
document.write("</tr>");
}
</script>
</table>
<form>
Number of milliseconds
<input type ="text" value="10" id="ms"/input>
<br>
<input type="button" value="dart"
onclick="setInterval('dart()',document.getElementById('ms').value)"/input>
</form>
</body>
</html>
CLIFFS: - code shows red dot bouncing around - how do i decrease vertical velocity by N amount at every interval? Similar TutorialsI'm trying to create an extended version of the famous bouncing ball script in HTML5/JS. This is where balls are drawn using the canvas which then move around the canvas randomly. What I'm trying to achieve is to replace that drawn ball with an actual jpg/png image. Also to have each image to redirect you to different pages when clicked.
I found a menu I really like at the top of the page at www-dot-sachscreative-dot-com but can't figure out how it works from the source code. Can someone tell me how to make something like it which is browser independent and uses javascript and/or CSS? It's been years since I did javascript work and I've forgotten must of what I used to know. Thanks.
Spent past few days helping my son for his project of manipulating bouncing ball. Please help me this script work. Once user inputs the new ani value, the ball goes out. I want user to set any value ani, int and size of the ball to achieve desired animation. Seriously urgent... Thanks! <HTML> <HEAD> </HEAD> <BODY> <IMG ID="ball" STYLE="position: absolute; left: 325; top: 200; width: 30; height: 30;" SRC="images/ball1.gif"> <SCRIPT LANGUAGE="JavaScript"> function showAlert() { alert('ANI=' + ani + ', INT=' + int + ', SIZE=' + wxh + ''); } </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2"> <!-- var myBall = document.getElementById("ball"); var loc = 200; var ani = 10; var direction = 0; var int = 50; var wxh = 30; setInterval("myFunction()", int); function myFunction(){ if(0 == direction) { /* move down */ loc += ani; if(loc >= 500) { /* reached lower limit, change direction */ direction = 1; } } else { /* move up */ loc -= ani; if(loc < 10) { /* reached upper limit, change direction */ direction = 0; } } myBall.style.top = loc; } // --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2"> function readText (form) { if(form.f_ani.value != ""){ ani = form.f_ani.value ; myBall = document.getElementById("ball"); loc = 200; direction = 0; int = 50; setInterval("myFunction()", int); myFunction(); } showAlert(); } </SCRIPT> <FORM action="" method="Get"> Ball Movement (10 pixels):<input type='text' NAME="f_ani" value="10" size="20"><br> Interval (200 milliseconds):<INPUT type="text" id="f_int" value="200" size="20" name="1"><br> Ball Size (10 pixels W&H):<INPUT type="text" id="f_size" value="30" size="20" name="2"><br> <input type='button' value='Send' onclick="readText(this.form)"> <INPUT type="reset"> </FORM> </BODY> </HTML> Hi to everyone! I need javascript to trigger automatically on load "w" keyboard stroke but to react on browser not on any input or other elements! Hi, Hi, I want to simulate user KEY PRESS (not mouse clicking) automatically on a screen every time that a pop up window (script error message) is opened on the screen OR detecting when an an iframe gets focus. My goal: Automatically closes the pop up window. If anybody know the exact code please post it. FG Hi. 1) I would like to click the Download button on this site, then wait lets say 60 sec & click free download button. http://uploading.com/files/S4WYPP73/...r_ENG.rar.html I remember that somehow it is possible to create the Request URL & then input it into IE & the server will think I hit the button. But how can I make the URL? And how is it called? posting URL request? I will be using firefox or I can make HTML file & execute it in IE for every file. PHP Code: <form action="http://uploading.com/files/get/S4WYPP73/" method="post" id="downloadform"> <input type="hidden" name="action" value="second_page" /> <input type="hidden" name="file_id" value="4663720" /> PHP Code: function do_step_1() { do_request('files', 'get', {file_id: 4663720, action: 'step_1'}, function(wait_time){ if(wait_time > 0) start_timer(wait_time); else if(wait_time <= 0) download(); }); } function do_step_2() { do_request('files', 'get', {file_id: 4663720, action: 'step_2'}); } PHP Code: function download() { $('#waitblock').html('Free Download'); $('#waitblock').click(function(){ do_step_2(); }); } Hi How I can simulate keypress in google chrome. I want to press a button to fire keypress event to print "X" in input box. Hi guys I'm trying to simulate links clicking on web pages, don't know how to deal with javascript links. The link I'm trying to click contains a tag like this: <a href="javascript:function(1243423)">text</a> Would somebody help me out please? Thanks a lot Hey guys! How can i simulate a click event? Like a real mouse click. and a keyboard click event? Hi, I want to recreate the effect of the drop-down bar that appears at the top of your browser when prompted to download an updated version of flash. Its for a proprietory plugin, but can't seem to get anywhere with it... Anyone have any ideas? |
|||||||