Home > Developer > JavaScript
Gravity Field: the space in which the Earth's gravity acts. In this space, each point corresponds to a unique Gravity Vector.
A variety of online games, whether 3D or the first perspective, or horizontal games (such as adventure Island), are required to simulate a gravity field.
Let's take a look at Google's birth in Newton. the logo is replaced by an apple that falls freely.
<Html>
<Script language = "javascript">
Var h = 0, v = 1;
Window. setTimeout (aa, 2000 );
Function aa (){
Var I = self. setInterval ("bb ()", 25 );
}
Function bb (){
Var f = document. getElementById ('fall ');
Var r = parseInt (f. style. right) + h;
Var B = parseInt (f. style. bottom)-v;
F. style. right = r + 'px ';
F. style. bottom = B + 'px ';
If (B>-210 ){
V + = 2;
} Else {
H = (v> 9 )? V * 0.1: 0;
V * = (v> 9 )? -0.3: 0;
}
}
</Script>
<Body>
<Div id = "fall" style = "position: relative; right:-300px; bottom:-46px">
Apple
</Div>
</Body>
</Html>
You can see setTimeout and setInterval! Without careful consideration of the logic, it is very confusing to understand the meaning of the Code.
Before speaking programming, I really want to write the code as follows:
<Html>
<Script language = "javascript">
Function drop (){
// Free fall
Code here
// After hitting the ground
Code here
// Apple crashes
Code here
}
</Script>
<Body>
<Div id = "fall" style = "position: relative; right:-300px; bottom:-46px">
Apple
</Div>
<Script language = "javascript">
Drop ();
</Script>
</Body>
</Html>
Only such code can call subsequent oral programming interfaces! So how can we write such beautiful code?
This time [jxcex] is coming soon!
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<Html>
<Head>
<Title> Jscex Animation </title>
<Script language = "javascript" type = "text/javascript" src = "lib/uglifyjs-parser.js"> </script>
<Script language = "javascript" type = "text/javascript" src = "src/jscex. js"> </script>
<Script language = "javascript" type = "text/javascript" src = "src/jscex. builderBase. js"> </script>
<Script language = "javascript" type = "text/javascript" src = "src/jscex. async. js"> </script>
<! -- [If IE]>
<Script language = "javascript" type = "text/javascript" src = "http://www.cnblogs.com/lib/json2.js"> </script>
<Script language = "javascript">
Jscex. config. codeGenerator = function (code) {return "false |" + code ;}
</Script>
<! [Endif] -->
<Script type = "text/javascript">
Var dropAsync = eval (Jscex. compile ("async", function (e, startPos, speedY, duration ){
$ Await (Jscex. Async. sleep (2000 ));
// E. style. left = startPos. x;
// Acceleration of gravity
Var g = 50;
Var time = 0;
Var tag = 0;
While (time <duration ){
$ Await (Jscex. Async. sleep (25 ));
If (time <800 ){
// Free fall
Time = time + 50;
SpeedY = speedY + g;
StartPos. y + = speedY * 0.05;
E. style. top = startPos. y;
}
Else {
// Hit the ground
If (speedY> 0 & tag = 0 ){
Tag = 1;
SpeedY =-speedY;
SpeedY = speedY/3;
}
Time = time + 50;
SpeedY = speedY + g;
StartPos. y + = speedY * 0.05;
E. style. top = startPos. y;
}
}
}));
Var changeImageAsync = eval (Jscex. compile ("async", function (){
Document. getElementById ("heart"). src = "grieve.gif ";
}));
Var executeAsync = eval (Jscex. compile ("async", function (){
// Freely falls into the body and hits the ground
$ Await (dropAsync (document. getElementById ("dropBox"), {x: 0, y: 20}, 0, 1350 ));
//❤Broken
$ Await (changeImageAsync ());
}));
</Script>
</Head>
<Body>
<Div id = "dropBox" style = "position: absolute; top: 20;">
</Div>
<Script type = "text/javascript">
ExecuteAsync (). start ();
</Script>
</Body>
</Html>
Jquery's animate can be used to make some animation effects, but it is limited to linear motion at a constant speed or gradient at a constant speed. Of course, you can use the following puzzling method to achieve variable speed, in addition, a large amount of computation is required to reduce the difference from real motion.
Var I = 0;
Var time = 0;
Var z= 100;
Function drop (){
If (time <7000 ){
I + = 5;
Z-= 1;
$ (". Block"). animate ({top: I}, z );
Time + = 50;
Drop ();
}
}
What if it is parabolic? This kind of variable speed Jquery animate is really powerless!
If you don't use [jxcex], you will be stuck in a lot of callback loops, so you don't have to worry! Of course, if you think it's so nice, you can understand it, and you don't want others to understand it, it's another thing.
However, the Code is written to others.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
