The full version of the bullet tracking aircraft is provided here. The bullet will keep tracking until it hits the plane. After the call, a message is displayed, indicating a few seconds of persistence.
There is a small bug. After hitting it, It is prompted first and then red. You can change it to red first, and then prompt again.
In addition, it can be changed to a bullet that automatically disappears after 10 s of flight (re-start again)
You can also change the speed to + 1 per second;
<! DOCTYPE html>
<Html>
<Head>
<Title> full version of smart bullets </title>
<Script type = "text/javascript" src = "jquery-1.6.1.js"> </script>
<Script type = "text/javascript">
Var x = 225;
Var y = 450;
Var mousex, mousey;
Var canvas;
Var ctx;
Var c = 0;
Var zidan = new Object ();
$ (Document). ready (function (){
Canvas = $ (document). get (0). getElementById ("MyCanvas ");
If (canvas. getContext ){
Ctx = canvas. getContext ("2d ");
Zidan. x = 245;
Zidan. y = 10;
Zidan. jiaodu = Math. PI * 0.5;
Zidan. sudu = 10;
Zidan. dadao = 0; // 0 indicates that no call is made, and 1 indicates that no call is made.
Animate ();
}
});
Zidan. move = function (){
If (y-zidan. y> 0)
{
Zidan. y = zidan. y + Math. abs (zidan. sudu * Math. cos (zidan. jiaodu ));
}
Else
{
Zidan. y = zidan. y-Math. abs (zidan. sudu * Math. cos (zidan. jiaodu ));
}
If (x-zidan. x> 0)
{
Zidan. x = zidan. x + Math. abs (zidan. sudu * Math. sin (zidan. jiaodu ));
}
Else
{
Zidan. x = zidan. x-Math. abs (zidan. sudu * Math. sin (zidan. jiaodu ));
}
// Beyond the lower boundary www.2cto.com
If (zidan. y> 500)
Zidan. y = 10;
// Add a judgment that exceeds the upper left and right boundary
// If (zidan. y = 10)
Zidan. jiaodu = Math. atan (x-zidan. x)/(y-zidan. y ));
};
Function animate ()
{
Ctx. clearRect (0, 0,500,500 );
// The square controlled by the keyboard
If (zidan. dadao = 1)
Ctx. fillStyle = "red ";
Ctx. fillRect (x, y, 50, 50 );
Ctx. fillStyle = "black ";
Ctx. beginPath ();
Ctx. arc (zidan. x, zidan. y, 10, 0, Math. PI * 2, false );
Ctx. closePath ();
Ctx. fill ();
If (zidan. dadao = 0)
SetTimeout (animate, 100 );
// Animation logic. If the bullet is in a straight line and beyond the range, set it to 10 again.
Zidan. move ();
// Collision detection. If hit, the square turns red and the game stops.
If (zidan. y> y) & (zidan. y <y + 50) & (zidan. x> x) & (zidan. x <x + 50 ))
{
Zidan. dadao = 1;
Alert (c/10 );
}
C = c + 1;
};
</Script>
</Head>
<Body>
<Div>
<Canvas id = "MyCanvas" width = "500" height = "500"> </canvas>
</Div>
</Body>
<Script type = "text/javascript">
// Note that this is document, and canvas should be able to capture the keydown event. Try again later.
$ (Document). keydown (function (e ){
Var k = e. keyCode;
// If you do not know the key code, use alert to output it.
// Alert (k );
If (k = 37)
X = x-10;
If (k = 39)
X = x + 10;
If (k = 38)
Y = y-10;
If (k = 40)
Y = y + 10;
});
</Script>
</Html>
From txdb Column
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
