This is the first game. A small red circle (bullet) appears from the top every 1 s and moves toward the current plane. If the screen is exceeded, click again.
There is only one bullet on the screen. You can change it to multiple bullets.
The game ends when the plane is hit
This example is not complete, but includes keyboard control, bullet animation implementation, and collision detection.
This section describes how to create javascript objects, as well as non-logic objects, and many applications of IF Statements.
In this example, the X axis is not added, and the bullet turns red when it reaches the bottom of the plane.
After blushing, the plane and bullets continued to change, rather than the game stopped.
Students can modify the function to avoid bullets and stop the game when it hits the game.
<! Doctype HTML>
<HTML>
<Head>
<Title> bullet evasion games </title>
<SCRIPT type = "text/JavaScript" src = "jquery-1.6.1.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
VaR x = 225;
VaR mousex, Mousey;
VaR canvas;
VaR CTX;
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 ();
}
});
Function animate ()
{
CTX. clearrect (0, 0,500,500 );
// The square controlled by the keyboard
If (Zidan. dadao = 1)
CTX. fillstyle = "red ";
CTX. fillrect (x, 450, 50, 50 );
CTX. beginpath ();
CTX. ARC (Zidan. X, Zidan. Y, 10, 0, math. Pi * 2, false );
CTX. closepath ();
CTX. Fill ();
// Animation logic. If the bullet is in a straight line and beyond the range, set it to 10 again.
Zidan. Y = Zidan. Y + Zidan. Sudu;
If (zidan. y> 500)
Zidan. Y = 10;
// Collision detection. If hit, the square turns red and the game stops.
If (Zidan. Y> 450) & (Zidan. Y <500 ))
{
Zidan. dadao = 1;
}
SetTimeout (animate, 100 );
};
</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-5;
If (k = 39)
X = x + 5;
});
</SCRIPT>
</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
