[Cicada Hall Study notes]_ Pure JS production "aircraft War" game _ 1th (realization of ideas and the implementation of the game interface)

Source: Internet
Author: User

Overall effect Show:

First, the realization of ideas

, this is a logical diagram of my completion of the project, and also a sequence diagram of the completion of a functional module.

    1. The completion of the game interface
    2. Hero Aircraft Object Realization, in the implementation of the firing bullet method, the bullet object and realized. At this point, the hero plane can carry out the basic operation.
    3. The realization of the enemy aircraft object, and the initial completion of the boos appear (30s automatically appears). And then the processing of many methods, such as hero bullets hit enemy aircraft and boos, heroes collided with enemy aircraft and so on. and solve them all.
    4. Then set up some game parameters, such as blood volume, level number, level, points, must kill, props objects and so on.
    5. Finally completed a number of auxiliary functions, pause the game, continue to play, quit the game and so on.

Of course, what I do is not a full version, there are many areas that need improvement. I just initially realized the first level game experience of aircraft war game, and also need to learn to improve.

Second, the completion of the game interface (main interface)


To implement this interface, the main use of CSS in the animation (animation) properties to set. I'll post the code I wrote below.

HTML code:

        <!--main interface (game interface) -        <Divclass= "Main"ID= "Main">            <!--Background picture Box -            <Divclass= "BG"class= "BG">                <!--Background Image -                <imgsrc= "Img/bg1.jpg"ID= "Back1"/>                <imgsrc= "Img/bg1.jpg"ID= "Back2"/>            </Div>            <!--Game Parameters Box -            <Divclass= "Info">                <span>Kills:</span><spanID= "Killnum">0</span><BR/>                <span>Score:</span><spanID= "Score">0</span><BR/>                <span>Blood Volume:</span><spanID= "Blood">0</span><BR/>                <span>Grade:</span><spanID= "Level">0</span><BR/>                <span>Bomb:</span><spanID= "Boom">0</span><BR/>                <imgsrc= "Img/end1.jpg"width= "80px"Height= "80px"/>            </Div>            <!--pause button -            <Divclass= "Btn_pause"onclick= "Stopgame ()">                <!--pause button -                <imgsrc= "Img/pause1.png" />            </Div>        </Div>

CSS style:

/** Main interface style **/. Main{position:Absolute;width:441px;Height:632px; Left:35%;/*Move Right*/Overflow:Hidden;/*overflow partially hidden invisible*/Z-index:-3;/*stacking order of elements*/}/** * Background box*/. BG{position:Absolute;width:441px;Height:632px;Z-index:-3;/**-webkit-Google browser prefix is compatibility processing, as well as Firefox-moz-,ie-ms-* parameter description: Animation name (like function name, call function) time (how long), Number of plays (infinite), speed (constant play)*/-webkit-animation:BG 10s Infinite linear;}/** Background image * Cancel the fault between two pictures*/. BG img{float: Left;}@-webkit-keyframes BG{From{margin-top:-932px} to{Margin-top:-150px}}

First post, not familiar with the routine, please forgive us!

Above for today's first talk, if you need to know more in-depth knowledge, please enter the Cicada Hall community: http://www.zhiliaotang.com/portal.php;

[Cicada Hall Learning note]_ Pure JS production "aircraft War" game _ 1th (realization of ideas and the implementation of the game interface)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.