A Pen by Alexander Majorov.

index.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>

script.js

// 0 lines of JS code

style.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}

Zero-lines-JS-game.markdown

Zero lines JS game

This is zero lines JS game. Only CSS and HTML, without JS =)

A Pen by Alexander Majorov on CodePen.

License.