Home > Developer > Web Develop
Collision movement, red-black collision
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
<Style type = "text/css">
# Div1 {width: 100px; height: 100px; background: red; position: absolute ;}
</Style>
<Script type = "text/javascript">
Window. onload = function ()
{
Var oDiv = document. getElementById ("div1 ");
Var disX = 0;
Var disY = 0;
Var prevX = 0;
Var prevY = 0;
Var iSpeedX = 0; // The final X speed
Var iSpeedY = 0; // The final Y speed
ODiv. onmousedown = function ()
{
Var ev = ev | event;
DisX = ev. clientX-oDiv.offsetLeft;
DisY = ev. clientY-oDiv.offsetTop;
PrevX = ev. clientX;
PrevY = ev. clientY;
Document. onmousemove = function ()
{
Var ev = ev | event;
ODiv. style. left = ev. clientX-disX + "px ";
ODiv. style. top = ev. clientY-disY + "px ";
ISpeedX = ev. clientX-prevX; // get the last moving speed
ISpeedY = ev. clientY-prevY;
// Time difference of creation, re-obtain
PrevX = ev. clientX;
PrevY = ev. clientY;
StartMove (oDiv );
};
Document. onmouseup = function ()
{
Document. onmousemove = null;
Document. onmouseup = null;
};
Return false;
};
Function startMove (obj)
{
ClearInterval (obj. timer );
Obj. timer = setInterval (function ()
{
ISpeedY + = 3; // here is the gravity
Var L = obj. offsetLeft + iSpeedX;
Var T = obj. offsetTop + iSpeedY;
If (T> document.doc umentElement. clientHeight-obj.offsetHeight)
{
Tsf-document.doc umentElement. clientHeight-obj.offsetHeight;
ISpeedY * =-1;
ISpeedY * = 0.75; // Friction
ISpeedX * = 0.75; // Friction
}
Else if (T <0)
{
T = 0;
ISpeedY * =-1;
ISpeedY * = 0.75; // Friction
}
If (L> document.doc umentElement. clientWidth-obj.offsetWidth)
{
Lw.document.doc umentElement. clientWidth-obj.offsetWidth;
ISpeedX * =-1;
}
Else if (L <0)
{
L = 0;
ISpeedX * =-1;
}
Obj. style. left = L + "px ";
Obj. style. top = T + "px ";
}, 30)
}
}
</Script>
</Head>
<Body>
<Div id = "div1"> </div>
</Body>
</Html>
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
