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

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)

Show:

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)