Storage

<!DOCTYPE html>
<html>

 <head>
 </head>

 <body onLoad="randomize();document.getElementById('level').innerHTML='Level: '+document.cookie" style="overflow:hidden" background="http://bgfons.com/upload/grass_texture241.jpg">
  <style>

  #enemy_container
  {
   width:400px;
   height:300px;
   position:absolute;
   top:0;bottom:0;left:0;right:0;
   margin:auto;
   border-radius:20px;
   background:url("http://w8themes.com/wp-content/uploads/2013/11/Blue-Wallpaper-HD.jpg");
   transition:opacity 0.4s;
  }

  #photo
  {
   width:150px;
   height:250px;
   position:absolute;
   left:50%;
   border-style:inset;
  }

  #name_bar
  {
   width:150px;
   height:20px;
   position:absolute;
   top:90%;left:50%;
   text-align:center;
   font-family:"Trebuchet MS", Helvetica, sans-serif;
   transition:background 0.4s;
  }

  #name_bar:hover
  {
   background:#F0F0F0;
  }

  #desc
  {
   width:150px;
   height:150px;
   position:absolute;
   left:10%;
   top:40%;
   font-family:"Trebuchet MS", Helvetica, sans-serif;
  }

  #attack
  {
   width:100px;
   height:20px;
   position:absolute;
   left:10%;
   top:90%;
   font-family:"Trebuchet MS", Helvetica, sans-serif;
  }

  #health_bar
  {
   width:150px;
   height:10px;
   position:absolute;
   top:5%;
   left:5%;
   border-radius:20px;
   background:red;
   transition:width 0.4s;
  }

  #difficulty
  {
   width:50px;
   height:50px;
   position:absolute;
   top:15%;
   left:17%;
   font-size:300%;
   text-align:center;
  }

  #player_container
  {
   width:300px;
   height:80px;
   position:absolute;
   top:2%;
   left:2%;
   margin:auto;
   border-radius:20px;
   background:url("http://www.psdgraphics.com/file/light-wooden-background.jpg");
   transition:opacity 0.4s;
  }

  #health
  {
   width:250px;
   height:10px;
   position:absolute;
   left:10%;
   top:10%;
   border-radius:20px;
   background:red;
   transition:width 0.4s;
  }

  #level
  {
   width:150px;
   height:40px;
   position:absolute;
   top:45%;
   font-family:"Trebuchet MS", Helvetica, sans-serif;
   font-size:200%;
  }

  #spell_one
  {
   width:40px;
   height:40px;
   position:absolute;
   top:40%;
   left:50%;
   opacity:0.5;
   transition:opacity 0.4s;
  }

  #spell_one:hover
  {
   opacity:1;
  }

  #spell_two
  {
   width:40px;
   height:40px;
   position:absolute;
   top:40%;
   left:75%;
   opacity:0.5;
   transition:opacity 0.4s;
  }

  #spell_two:hover
  {
   opacity:1;
  }

  </style>

  <script>

   var enemy;
   var level=0;

   if(parseInt(document.cookie)!=0&&!parseInt(document.cookie)>=1)
   document.cookie=0;

   function randomize()
   {
    enemy=Math.floor(Math.random()*2)+1;

     if(enemy==1)
     {
      document.getElementById("photo").style.background="url('http://www.comingsoon.net/nextraimages/assassinscreedarticle.jpg')";
      document.getElementById("name_bar").innerHTML="Assassin";
      document.getElementById("desc").innerHTML="Smart enemy.Uses his hidden blades to attack you.Spells: cut, ambush.Average health.High damage.";
      document.getElementById("difficulty").innerHTML="2";
     }

     if(enemy==2)
     {
      document.getElementById("photo").style.background="url('http://puu.sh/6Iti1.png?dateline=1391433723')";
      document.getElementById("name_bar").innerHTML="Devourer";
      document.getElementById("desc").innerHTML="Exceptional enemy.Very strong damage.Has no spells, but has balanced offensive and defensive stats.";
      document.getElementById("difficulty").innerHTML="3";
     }
    }

    function damage()
    {
     if(enemy==1)
     {
      player_dmg=Math.floor((Math.random()*20)+30);
      enemy_hp=document.getElementById("health_bar").offsetWidth;
      document.getElementById("health_bar").style.width=enemy_hp-player_dmg+"px";
     }

     if(enemy==2)
     {
      player_dmg=Math.floor((Math.random()*20)+25);
      enemy_hp=document.getElementById("health_bar").offsetWidth;
      document.getElementById("health_bar").style.width=enemy_hp-player_dmg+"px";
     }

       if((enemy_hp-player_dmg)<=0)
      {
       document.getElementById("enemy_container").style.opacity=0;
       level=level+1;
       document.cookie=parseInt(document.cookie)+level;

        setTimeout(function end(){location.reload(true);},2000);
      }

     giveback();
    }

    function giveback()
    {
     if(enemy==1)
     {
      enemy_dmg=Math.floor((Math.random()*35)+45);
      player_hp=document.getElementById("health").offsetWidth;
      document.getElementById("health").style.width=player_hp-enemy_dmg+"px";
     }

     if(enemy==2)
     {
      enemy_dmg=Math.floor((Math.random()*40)+60);
      player_hp=document.getElementById("health").offsetWidth;
      document.getElementById("health").style.width=player_hp-enemy_dmg+"px";
     }

      if((player_hp-enemy_dmg)<=0)
      {
       document.getElementById("player_container").style.opacity=0;
       level=level-2;
       document.cookie=parseInt(document.cookie)+level;

        setTimeout(function end(){location.reload(true);},2000);
      }
    }

 </script>

    <div id="enemy_container">
     <div id="photo"></div>
     <div id="name_bar"></div>
     <div id="desc"></div>
     <div id="attack"></div>
     <div id="health_bar"></div>
     <div id="difficulty"></div>
     <input type="button" id="attack" value="Attack!" onClick="damage()">
    </div>

    <div id="player_container">
     <div id="health"></div>
     <div id="level"></div>
     <img src="http://hydra-media.cursecdn.com/cabal.gamepedia.com/5/55/Sword_Skill_Amp_icon.png" id="spell_one">
     <img src="http://hydra-media.cursecdn.com/vindictus.gamepedia.com/4/48/Aodhan%27s_Twin_Swords.png" id="spell_two">
    </div>

 </body>

</html>