Web HTML JS aircraft vs small game side rate

From: blog.csdn.net/weixin_4274…

Lateral rate:

page

• 1. Design the page
• 2. A main div uses overflow: hidden;

   .main {
        margin: 0 auto;
        width: 300px;
        height: 500px;
        background-color: rgb(228, 214, 170);
        position: relative;
        overflow: hidden;
    }
Copy the code

• 3. Add a div inside div

 .resource{
        width:100%;
        height:600px;    
        top:-100px;
        position: absolute;
    }
Copy the code

• 4. Add span to resource to set the width, height and image
• Enemy aircraft move downward to SPAN
• 6. Set our aircraft relative to the main DIV

mobile

• 7. The installation of our aircraft can be moved
• 8. More drag our mouse to move our aircraft
• 9. Classify enemy aircraft, some of which can fire bullets
• 10. The trajectory of bullets is 1.5 times faster than that of planes, etc
• 11. Aircraft speed also accumulates
• 12. Airplanes left different airplanes with random number
• 13. Our aircraft fired bullets
• 14. Bullet speed faster than enemy aircraft, and increase the frequency of aircraft bullets

To calculate

• 15. Calculate the position of aircraft and bullets and destroy enemy aircraft when encountered
• 16. Count enemy bullets and our aircraft, destroy our aircraft when encountered
• 17. More blood bars can be implemented to reduce the number of single orders and the number of single classes of our aircraft
• 18. Each destruction of enemy aircraft increases our score
• Calculation method can be more bullet position and aircraft square calculation of the top left, bottom and right to calculate whether contact enemy aircraft can be

ok

ok

Continuously updated