examples/game-1.html

<!DOCTYPE html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>No JS Game Demo</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
  /* CSS styles */
  /* Example by Alexander Majorov at https://codepen.io/i0z/pen/mFLCw */

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

  </style>

</head>
<body>
  <!--[if lt IE 8]>
  <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <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>
  </div>
  <audio src="http://nojsgame.majorov.su/assets/music/bg.mp3" loop autoplay></audio>
</form>

</body>
</html>