html也能打飞机

@import "http://nojsgame.majorov.su/bg.css";

* {
margin: 0;
padding: 0;
}

.board {
width: 400px;
height: 600px;
margin: 0 auto;
background: #69c url(http://nojsgame.majorov.su/bg.jpg);
cursor: url('http://nojsgame.majorov.su/r2.png') 35 0,pointer;
text-align: center;
position: relative;
}

#scorebar {
float: left;
color: #fff;
}

.board #status {
color: #fff;
position: absolute;
bottom: 15px;
left: 5px;
font-size: 14px;
}

.board #status span.active {
display: none;
}

.board #status span.inactive {
display: inline;
}

.board:hover #status span.active {
display: inline;
}

.board:hover #status span.inactive {
display: none;
}

.enemy {
height: 64px;
width: 64px;
margin-right: 5px;
margin-top: 15px;
position: absolute;
top: -50%;
left: 0;
background: url(http://nojsgame.majorov.su/e6.png);
}

.enemy_t1 {
height: 48px;
width: 48px;
background: url(http://nojsgame.majorov.su/e4.png);
}

.enemy_t2 {
height: 64px;
width: 64px;
background: url(http://nojsgame.majorov.su/e2.png);
}

.enemy_t3 {
height: 128px;
width: 128px;
background: url(http://nojsgame.majorov.su/e3.png);
}

.bonus {
height: 24px;
width: 24px;
position: absolute;
top: -10%;
left: 0;
background-image: url(http://nojsgame.majorov.su/b1.png);
-moz-appearance: button;
-webkit-appearance: button;
appearance: button;
}

.bonus:checked {
background-image: url('http://nojsgame.majorov.su/b2.png') !important;
width: 24px;
height: 24px;
position: static;
-webkit-animation-name: none;
animation-name: none;
float: left;
}

.board .enemy:hover {
border-radius: 0;
margin: 0;
height: 600px;
width: 400px;
position: absolute;
top: 0;
left: 0;
z-index: 999;
background: #f00;
overflow: visible;
cursor: not-allowed;
-webkit-animation: animation1 0s 0s linear !important;
animation: animation1 0s 0s linear !important;
-webkit-animation: animation2 0s 0s linear !important;
animation: animation2 0s 0s linear !important;
-webkit-animation: animation3 0s 0s linear !important;
animation: animation3 0s 0s linear !important;
-webkit-animation: animation4 0s 0s linear !important;
animation: animation4 0s 0s linear !important;
-webkit-animation: animation5 0s 0s linear !important;
animation: animation5 0s 0s linear !important;
-webkit-animation: animation6 0s 0s linear !important;
animation: animation6 0s 0s linear !important;
-webkit-animation: animation7 0s 0s linear !important;
animation: animation7 0s 0s linear !important;
-webkit-animation: animation8 0s 0s linear !important;
animation: animation8 0s 0s linear !important;
-webkit-animation: animation9 0s 0s linear !important;
animation: animation9 0s 0s linear !important;
-webkit-animation: animation10 0s 0s linear !important;
animation: animation10 0s 0s linear !important;
}

.board .enemy:hover:before {
background: #f00;
content: "GAME OVER!";
top: 100px;
left: 0;
width: 400px;
color: #fff;
text-shadow: 1px 1px 1px #aaa;
box-shadow: none;
}

.board .enemy:hover:after {
display: none;
}

.board .bonus:hover {
cursor: crosshair;
zoom: 2;
}

.board:hover #bonus_01 {
-webkit-animation: animation3 8s 2s linear;
animation: animation3 8s 2s linear;
}

.board:hover #bonus_02 {
-webkit-animation: animation4 12s 4s linear;
animation: animation4 12s 4s linear;
}

.board:hover #bonus_03 {
-webkit-animation: animation8 16s 6s linear;
animation: animation8 16s 6s linear;
}

.board:hover #bonus_04 {
-webkit-animation: animation2 16s 10s linear;
animation: animation2 16s 10s linear;
}

.board:hover #bonus_05 {
-webkit-animation: animation9 14s 15s linear;
animation: animation9 14s 15s linear;
}

.board:hover #bonus_06 {
-webkit-animation: animation7 12s 20s linear;
animation: animation7 12s 20s linear;
}

.board:hover #bonus_07 {
-webkit-animation: animation1 8s 26s linear;
animation: animation1 8s 26s linear;
}

.board:hover #bonus_08 {
-webkit-animation: animation3 10s 30s linear;
animation: animation3 10s 30s linear;
}

.board:hover #bonus_09 {
-webkit-animation: animation7 16s 40s linear;
animation: animation7 16s 40s linear;
}

.board:hover #bonus_10 {
-webkit-animation: animation4 16s 45s linear;
animation: animation4 16s 45s linear;
}

.board:hover #enemy_01 {
-webkit-animation: animation1 6s 0s linear;
animation: animation1 6s 0s linear;
}

.board:hover #enemy_02 {
-webkit-animation: animation2 5s 2s linear;
animation: animation2 5s 2s linear;
}

.board:hover #enemy_03 {
-webkit-animation: animation3 3s 3s linear;
animation: animation3 3s 3s linear;
}

.board:hover #enemy_04 {
-webkit-animation: animation4 6s 4s linear;
animation: animation4 6s 4s linear;
}

.board:hover #enemy_05 {
-webkit-animation: animation5 4s 5s linear;
animation: animation5 4s 5s linear;
}

.board:hover #enemy_06 {
-webkit-animation: animation2 3s 6s linear;
animation: animation2 3s 6s linear;
}

.board:hover #enemy_07 {
-webkit-animation: animation7 2s 8s linear;
animation: animation7 2s 8s linear;
}

.board:hover #enemy_08 {
-webkit-animation: animation4 5s 8s linear;
animation: animation4 5s 8s linear;
}

.board:hover #enemy_09 {
-webkit-animation: animation8 3s 9s linear;
animation: animation8 3s 9s linear;
}

.board:hover #enemy_10 {
-webkit-animation: animation6 4s 10s linear;
animation: animation6 4s 10s linear;
}

.board:hover #enemy_11 {
-webkit-animation: animation1 6s 10s linear;
animation: animation1 6s 10s linear;
}

.board:hover #enemy_12 {
-webkit-animation: animation6 4s 11s linear;
animation: animation6 4s 11s linear;
}

.board:hover #enemy_13 {
-webkit-animation: animation2 8s 12s linear;
animation: animation2 8s 12s linear;
}

.board:hover #enemy_14 {
-webkit-animation: animation9 4s 13s linear;
animation: animation9 4s 13s linear;
}

.board:hover #enemy_15 {
-webkit-animation: animation3 5s 13s linear;
animation: animation3 5s 13s linear;
}

.board:hover #enemy_16 {
-webkit-animation: animation10 7s 14s linear;
animation: animation10 7s 14s linear;
}

.board:hover #enemy_17 {
-webkit-animation: animation7 3s 15s linear;
animation: animation7 3s 15s linear;
}

.board:hover #enemy_18 {
-webkit-animation: animation3 5s 16s linear;
animation: animation3 5s 16s linear;
}

.board:hover #enemy_19 {
-webkit-animation: animation6 4s 16s linear;
animation: animation6 4s 16s linear;
}

.board:hover #enemy_20 {
-webkit-animation: animation1 3s 17s linear;
animation: animation1 3s 17s linear;
}

.board:hover #enemy_21 {
-webkit-animation: animation2 4s 17s linear;
animation: animation2 4s 17s linear;
}

.board:hover #enemy_22 {
-webkit-animation: animation1 5s 18s linear;
animation: animation1 5s 18s linear;
}

.board:hover #enemy_23 {
-webkit-animation: animation4 9s 19s linear;
animation: animation4 9s 19s linear;
}

.board:hover #enemy_24 {
-webkit-animation: animation9 2s 20s linear;
animation: animation9 2s 20s linear;
}

.board:hover #enemy_25 {
-webkit-animation: animation7 3s 20s linear;
animation: animation7 3s 20s linear;
}

.board:hover #enemy_26 {
-webkit-animation: animation1 5s 20s linear;
animation: animation1 5s 20s linear;
}

.board:hover #enemy_27 {
-webkit-animation: animation9 6s 21s linear;
animation: animation9 6s 21s linear;
}

.board:hover #enemy_28 {
-webkit-animation: animation3 3s 22s linear;
animation: animation3 3s 22s linear;
}

.board:hover #enemy_29 {
-webkit-animation: animation6 4s 23s linear;
animation: animation6 4s 23s linear;
}

.board:hover #enemy_30 {
-webkit-animation: animation4 5s 24s linear;
animation: animation4 5s 24s linear;
}

.board:hover #enemy_31 {
-webkit-animation: animation9 4s 24s linear;
animation: animation9 4s 24s linear;
}

.board:hover #enemy_32 {
-webkit-animation: animation6 2s 25s linear;
animation: animation6 2s 25s linear;
}

.board:hover #enemy_33 {
-webkit-animation: animation3 3s 26s linear;
animation: animation3 3s 26s linear;
}

.board:hover #enemy_34 {
-webkit-animation: animation4 5s 26s linear;
animation: animation4 5s 26s linear;
}

.board:hover #enemy_35 {
-webkit-animation: animation10 8s 27s linear;
animation: animation10 8s 27s linear;
}

.board:hover #enemy_36 {
-webkit-animation: animation2 3s 27s linear;
animation: animation2 3s 27s linear;
}

.board:hover #enemy_37 {
-webkit-animation: animation7 2s 28s linear;
animation: animation7 2s 28s linear;
}

.board:hover #enemy_38 {
-webkit-animation: animation4 5s 28s linear;
animation: animation4 5s 28s linear;
}

.board:hover #enemy_39 {
-webkit-animation: animation1 3s 29s linear;
animation: animation1 3s 29s linear;
}

.board:hover #enemy_40 {
-webkit-animation: animation6 4s 30s linear;
animation: animation6 4s 30s linear;
}

.board:hover #enemy_41 {
-webkit-animation: animation9 4s 24s linear;
animation: animation9 4s 24s linear;
}

.board:hover #enemy_42 {
-webkit-animation: animation6 2s 25s linear;
animation: animation6 2s 25s linear;
}

.board:hover #enemy_43 {
-webkit-animation: animation3 3s 26s linear;
animation: animation3 3s 26s linear;
}

.board:hover #enemy_44 {
-webkit-animation: animation4 5s 26s linear;
animation: animation4 5s 26s linear;
}

.board:hover #enemy_45 {
-webkit-animation: animation10 8s 27s linear;
animation: animation10 8s 27s linear;
}

.board:hover #enemy_46 {
-webkit-animation: animation2 3s 27s linear;
animation: animation2 3s 27s linear;
}

.board:hover #enemy_47 {
-webkit-animation: animation7 2s 28s linear;
animation: animation7 2s 28s linear;
}

.board:hover #enemy_48 {
-webkit-animation: animation4 5s 28s linear;
animation: animation4 5s 28s linear;
}

.board:hover #enemy_49 {
-webkit-animation: animation1 3s 29s linear;
animation: animation1 3s 29s linear;
}

.board:hover #enemy_50 {
-webkit-animation: animation6 4s 30s linear;
animation: animation6 4s 30s linear;
}

@-webkit-keyframes animation1 {
0% {
left: 260px;
top: -10%;
}

100% {
left: 260px;
top: 100%;
}
}

@-webkit-keyframes animation2 {
0% {
left: 50px;
top: -10%;
}

100% {
left: 50px;
top: 100%;
}
}

@-webkit-keyframes animation3 {
0% {
left: 150px;
top: -10%;
}

100% {
left: 200px;
top: 100%;
}
}

@-webkit-keyframes animation4 {
0% {
left: 300px;
top: -10%;
}

100% {
left: 200px;
top: 100%;
}
}

@-webkit-keyframes animation5 {
0% {
left: 150px;
top: -10%;
}

100% {
left: 150px;
top: 100%;
}
}

@-webkit-keyframes animation6 {
0% {
left: 50px;
top: -10%;
}

100% {
left: 250px;
top: 100%;
}
}

@-webkit-keyframes animation7 {
0% {
left: 300px;
top: -10%;
}

100% {
left: 0;
top: 100%;
}
}

@-webkit-keyframes animation8 {
0% {
left: 0;
top: -10%;
}

100% {
left: 300px;
top: 100%;
}
}

@-webkit-keyframes animation9 {
0% {
left: 200px;
top: -10%;
}

100% {
left: 150px;
top: 100%;
}
}

@-webkit-keyframes animation10 {
0% {
left: 250px;
top: -10%;
}

100% {
left: 100px;
top: 100%;
}
}

@-webkit-keyframes animation99 {
0% {
left: 50px;
top: -40%;
}

100% {
left: 50px;
top: 30%;
}
}

@keyframes animation1 {
0% {
left: 260px;
top: -10%;
}

100% {
left: 260px;
top: 100%;
}
}

@keyframes animation2 {
0% {
left: 50px;
top: -10%;
}

100% {
left: 50px;
top: 100%;
}
}

@keyframes animation3 {
0% {
left: 150px;
top: -10%;
}

100% {
left: 200px;
top: 100%;
}
}

@keyframes animation4 {
0% {
left: 300px;
top: -10%;
}

100% {
left: 200px;
top: 100%;
}
}

@keyframes animation5 {
0% {
left: 150px;
top: -10%;
}

100% {
left: 150px;
top: 100%;
}
}

@keyframes animation6 {
0% {
left: 50px;
top: -10%;
}

100% {
left: 250px;
top: 100%;
}
}

@keyframes animation7 {
0% {
left: 300px;
top: -10%;
}

100% {
left: 0;
top: 100%;
}
}

@keyframes animation8 {
0% {
left: 0;
top: -10%;
}

100% {
left: 300px;
top: 100%;
}
}

@keyframes animation9 {
0% {
left: 200px;
top: -10%;
}

100% {
left: 150px;
top: 100%;
}
}

@keyframes animation10 {
0% {
left: 250px;
top: -10%;
}

100% {
left: 100px;
top: 100%;
}
}

@keyframes animation99 {
0% {
left: 50px;
top: -40%;
}

100% {
left: 50px;
top: 30%;
}
}

.board #finish {
position: absolute;
top: -40%;
left: 50px;
text-align: center;
display: none;
width: 200px;
padding: 20px 50px;
background: #fff;
box-shadow: 4px 4px 4px #ccc;
border-radius: 10px;
}

.board:hover #finish {
-webkit-animation: animation99 5s 30s linear;
animation: animation99 5s 30s linear;
animation-fill-mode: forwards;
display: block;
}