<html>

<head>
<script type="text/javascript">

  player_pos = 0;
  pewpew = 0;

  document.onkeydown = onKeyDown;

  function onKeyDown(e) {
    e = e || window.event;

    var player = document.getElementById("player");

    if (e.keyCode == '37') { // left
      player_pos -= 10;
      player.style.left = player_pos;
    }
    if (e.keyCode == '39') { // right
      player_pos += 10;
      player.style.left = player_pos;
    }
    if (e.keyCode == '32') { // space = fire
      shoot(player_pos);
    }
  }

  shoots = [];
  function shoot(player_pos) {
    shoots[shoots.length] = [player_pos, 500];
    // pewpew = 5;
  }

function isCollided(a, b) {
  var a_left = parseInt(a.style.left);
  var a_right = a_left + a.offsetWidth;
  var a_top = parseInt(a.style.top);
  var a_bottom = a_top + a.offsetHeight;

  var b_left = parseInt(b.style.left);
  var b_right = b_left + b.offsetWidth;
  var b_top = parseInt(b.style.top);
  var b_bottom = b_top + b.offsetHeight;

  return !(
    (a_left > b_right) ||
    (a_right < b_left) ||
    (a_top > b_bottom) ||
    (a_bottom < b_top)
  );
}

function gameLoop() {
  // detect collision
  var enemydiv = document.getElementById("enemy");
  for(var i = 0; i < shoots.length; i++) {
    if (shoots[i]) {
      var shootdiv = document.getElementById('shoot' + i);
      if (shootdiv && isCollided(shootdiv, enemydiv)) {
        pewpew = 10;
      }
    }
  }

  // render shoots
  for(var i = 0; i < shoots.length; i++) {
    if (shoots[i]) {
      var shootdiv = document.getElementById('shoot' + i);

      if (!shootdiv) {
        shootdiv = document.createElement('div');
        shootdiv.setAttribute('id', 'shoot' + i);
        shootdiv.setAttribute('class', 'shoot');
        shootdiv.innerHTML = '|';

        var body = document.getElementsByTagName('body')[0];
        body.appendChild(shootdiv);
      }

      shootdiv.style.left = shoots[i][0];
      shootdiv.style.top  = shoots[i][1];
    } else {
      if (deldiv = document.getElementById('shoot' + i)) {
        var body = document.getElementsByTagName('body')[0];
        body.removeChild(deldiv);
      }
    }
  }

  // render pew pew
  var pewpewdiv = document.getElementById("pewpew");
  if (pewpew > 0) {
    pewpewdiv.innerHTML = "pew! pew!";
  } else {
    pewpewdiv.innerHTML = "";
  }

  // render enemy
  var enemydiv = document.getElementById("enemy");
  enemydiv.style.left = 300;
  enemydiv.style.top = 10;

  // animate shoots
  for(var i = 0; i < shoots.length; i++) {
    if (shoots[i]) {
      shoots[i][1] -= 10;
      if (shoots[i][1] < 0) {
        delete(shoots[i]);
      }
    }
  }

  // animate pew pew
  if (pewpew > 0) {
    pewpew -= 1;
  }

  setTimeout("gameLoop()", 100);
}

</script>

<style type="text/css">
  * {
    font-size: 2em; 
    color: #ff00ff; 
    font-family: helvetica, arial;
  }
  #player {
    position: absolute;
    bottom: 10%;
    /* -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg); */
  }
  #enemy {
    position: absolute;
    top: 10%;
    /* -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg); */
    border-style: solid; border-width: 1px;
  }
  #pewpew {
    position:absolute;
    top: 10%;
    right: 10%;
  }
  div.shoot {
    position:absolute;
    border-style: solid; border-width: 1px;
  }
</style>
</head>

<body onload="gameLoop();">
  <div id="enemy">3</div>
  <div id="player">&lt;</div>
  <div id="pewpew"></div>
</body>

</html>