Simple HTML Game: Avoid Obstacles and Reach the Goal

<html>
  <head>
    <style>
      #game-container {
        width: 500px;
        height: 500px;
        background-color: #000;
        position: relative;
      }
<pre><code>  #player {
    width: 25px;
    height: 25px;
    background-color: #0f0;
    position: absolute;
    left: 250px;
    top: 250px;
  }

  #obstacle1 {
    width: 25px;
    height: 25px;
    background-color: #f00;
    position: absolute;
    left: 50px;
    top: 50px;
  }

  #obstacle2 {
    width: 25px;
    height: 25px;
    background-color: #f00;
    position: absolute;
    left: 450px;
    top: 450px;
  }

  #goal {
    width: 25px;
    height: 25px;
    background-color: #00f;
    position: absolute;
    left: 250px;
    top: 450px;
  }
&lt;/style&gt;
&lt;script&gt;
  function movePlayer(e){
    var player = document.getElementById('player');
    switch(e.keyCode){
      case 37:
        if(player.offsetLeft &gt; 0){
          player.style.left = (player.offsetLeft - 10) + 'px';
        }
        break;
      case 38:
        if(player.offsetTop &gt; 0){
          player.style.top = (player.offsetTop - 10) + 'px';
        }
        break;
      case 39:
        if(player.offsetLeft &lt; 475){
          player.style.left = (player.offsetLeft + 10) + 'px';
        }
        break;
      case 40:
        if(player.offsetTop &lt; 475){
          player.style.top = (player.offsetTop + 10) + 'px';
        }
        break;
    }
    checkCollisions();
  }

  function checkCollisions(){
    var player = document.getElementById('player');
    var obstacle1 = document.getElementById('obstacle1');
    var obstacle2 = document.getElementById('obstacle2');
    var goal = document.getElementById('goal');

    if(player.offsetLeft &lt; obstacle1.offsetLeft + obstacle1.offsetWidth &amp;&amp;
      player.offsetLeft + player.offsetWidth &gt; obstacle1.offsetLeft &amp;&amp;
      player.offsetTop &lt; obstacle1.offsetTop + obstacle1.offsetHeight &amp;&amp;
      player.offsetHeight + player.offsetTop &gt; obstacle1.offsetTop){
        alert('You lose!');
    }

    if(player.offsetLeft &lt; obstacle2.offsetLeft + obstacle2.offsetWidth &amp;&amp;
      player.offsetLeft + player.offsetWidth &gt; obstacle2.offsetLeft &amp;&amp;
      player.offsetTop &lt; obstacle2.offsetTop + obstacle2.offsetHeight &amp;&amp;
      player.offsetHeight + player.offsetTop &gt; obstacle2.offsetTop){
        alert('You lose!');
    }

    if(player.offsetLeft &lt; goal.offsetLeft + goal.offsetWidth &amp;&amp;
      player.offsetLeft + player.offsetWidth &gt; goal.offsetLeft &amp;&amp;
      player.offsetTop &lt; goal.offsetTop + goal.offsetHeight &amp;&amp;
      player.offsetHeight + player.offsetTop &gt; goal.offsetTop){
        alert('You win!');
    }
  }
&lt;/script&gt;
</code></pre>
  </head>
  <body>
    <div id='game-container'>
      <div id='player'></div>
      <div id='obstacle1'></div>
      <div id='obstacle2'></div>
      <div id='goal'></div>
    </div>
    <script>
      document.onkeydown = movePlayer;
    </script>
  </body>
</html>