This is zero lines JS game. Only CSS and HTML, without JS =)
A Pen by Anonasaurus Rex on CodePen.
This is zero lines JS game. Only CSS and HTML, without JS =)
A Pen by Anonasaurus Rex on CodePen.
<form> | |
<div class="board"> | |
<div id="scorebar">Your scores: </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> |
// 0 lines of JS code |
@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; | |
} |