html也能打飞机

(1)编辑一个html

<form>
    <div class="board">
        <div id="scorebar">Your scores:&nbsp;&nbsp;&nbsp;</div>
        <input id="bonus_01" name="radio1" class="bonus" type="radio">
        <input id="bonus_02" name="radio2" class="bonus" type="radio">
        <input id="bonus_03" name="radio3" class="bonus" type="radio">
        <input id="bonus_04" name="radio4" class="bonus" type="radio">
        <input id="bonus_05" name="radio5" class="bonus" type="radio">
        <input id="bonus_06" name="radio6" class="bonus" type="radio">
        <input id="bonus_07" name="radio7" class="bonus" type="radio">
        <input id="bonus_08" name="radio8" class="bonus" type="radio">
        <input id="bonus_09" name="radio9" class="bonus" type="radio">
        <input id="bonus_10" name="radio10" class="bonus" type="radio">
        <p class="enemy" id="enemy_01"></p>
        <p class="enemy" id="enemy_02"></p>
        <p class="enemy" id="enemy_03"></p>
        <p class="enemy enemy_t1" id="enemy_04"></p>
        <p class="enemy" id="enemy_05"></p>
        <p class="enemy" id="enemy_06"></p>
        <p class="enemy enemy_t3" id="enemy_07"></p>
        <p class="enemy" id="enemy_08"></p>
        <p class="enemy" id="enemy_09"></p>
        <p class="enemy" id="enemy_10"></p>
        <p class="enemy enemy_t1" id="enemy_11"></p>
        <p class="enemy" id="enemy_12"></p>
        <p class="enemy" id="enemy_13"></p>
        <p class="enemy enemy_t2" id="enemy_14"></p>
        <p class="enemy" id="enemy_15"></p>
        <p class="enemy" id="enemy_16"></p>
        <p class="enemy enemy_t3" id="enemy_17"></p>
        <p class="enemy" id="enemy_18"></p>
        <p class="enemy" id="enemy_19"></p>
        <p class="enemy enemy_t3" id="enemy_20"></p>
        <p class="enemy" id="enemy_21"></p>
        <p class="enemy" id="enemy_22"></p>
        <p class="enemy enemy_t1" id="enemy_23"></p>
        <p class="enemy" id="enemy_24"></p>
        <p class="enemy enemy_t2" id="enemy_25"></p>
        <p class="enemy" id="enemy_26"></p>
        <p class="enemy" id="enemy_27"></p>
        <p class="enemy enemy_t3" id="enemy_28"></p>
        <p class="enemy" id="enemy_29"></p>
        <p class="enemy" id="enemy_30"></p>
        <p class="enemy" id="enemy_31"></p>
        <p class="enemy" id="enemy_32"></p>
        <p class="enemy" id="enemy_33"></p>
        <p class="enemy" id="enemy_34"></p>
        <p class="enemy" id="enemy_35"></p>
        <p class="enemy" id="enemy_36"></p>
        <p class="enemy" id="enemy_37"></p>
        <p class="enemy" id="enemy_38"></p>
        <p class="enemy enemy_t3" id="enemy_39"></p>
        <p class="enemy" id="enemy_40"></p>
        <p class="enemy" id="enemy_41"></p>
        <p class="enemy" id="enemy_42"></p>
        <p class="enemy" id="enemy_43"></p>
        <p class="enemy enemy_t2" id="enemy_44"></p>
        <p class="enemy" id="enemy_45"></p>
        <p class="enemy" id="enemy_46"></p>
        <p class="enemy enemy_t1" id="enemy_47"></p>
        <p class="enemy" id="enemy_48"></p>
        <p class="enemy" id="enemy_49"></p>
        <p class="enemy" id="enemy_50"></p>
        <p id="finish">Congratulations! You just played a game that is written in JS and contains a total of 0 lines of code.</p>
        <p id="status"><strong>Help:</strong> <span class="inactive">move cursor to the field.</span><span class="active">Ships fly around the halls, click on bonuses!</span></p>
    </div>
</form>

(2)编辑一个css

@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;
}