Smite Stealing game

by Kolume

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>
 
<div id="dialog" title="Instructions">
   <p> Choose a <i>Champion Level</i> and an <br><i>In-game Minute</i> to get started.<br>Make sure you selected your difficulty and pressed the "<i>Start game"</i> button.
    </p>
       <b>Good luck!</b>
</div>
<ul id="menu">
    <li><a href="#" onclick="Msg('0');return false">In-game Minute</a>
  <ul>
      <li><a href="#" onclick="Msg('1');return false"><i>Minute 15</i></a></li>
      <li><a href="#" onclick="Msg('2');return false"><i>Minute 25</i></a></li>
      <li><a href="#" onclick="Msg('3');return false"><i>Minute 35</i></a></li>
      <li><a href="#" onclick="Msg('4');return false"><i>Minute 45</i></a></li>
  </ul>
 </li>
    <li><a href="3" onclick="Msg('5');return false">Champion Level</a>
  <ul>
      <li><a href="#" onclick="Msg('6');return false"><i>Level 14 ( 880 Damage )</i></a></li>
       <li><a href="#" onclick="Msg('7');return false"><i>Level 15 ( 910 Damage )</i></a></li>
       <li><a href="#" onclick="Msg('8');return false"><i>Level 16 ( 940 Damage )</i></a></li>
       <li><a href="#" onclick="Msg('9');return false"><i>Level 17 ( 970 Damage )</i></a></li>
       <li><a href="#" onclick="Msg('10');return false"><i>Level 18 ( 1000 Damage )</i></a></li>
  </ul>
 </li>
</ul>
<div id="ActionBlock"></div>
<script type="text/javascript">
var Messages = [
 'In-Game Minute',
   'minute 15',  'minute 25',  'minute 35',  'minute 45',
 'Champion Level',
   'level 14',  'level 15',  'level 16',  'level 17',  'level 18'
];

function Msg(N) {
  alert("You have selected "+Messages[N]+".");  
   ...

CSS

ul {
  font-family: Arial, Verdana;
  font-size: 16px;
  margin: 1;
  padding: 1;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: right;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  padding: 5px 15px 5px 15px;
  background: #222222;
  margin-left: 1px;
  white-space: nowrap;
}
ul li a:hover { background: #222222; }
li:hover ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #284266; }
li:hover li a:hover { background: #111111; }
body {
    margin: 0;
    padding: 0;
    background: #222222;
    color: #EEEEEE;
    font-size: 12px;
    font-family: Verdana;
}
img {
    border: none;
}
label {
    cursor: pointer;
    margin-bottom: 5px;
    background: #222;
    padding: 5px;
    display: block;
    font-size: 90%;
}
label:hover {
    background: #333;
}
button {
    width: 100%;
    display: block;
    background: #284266;
    color: #EEE;
    padding: 6px 10px;
    border: #DDD;
    margin-top: 10px;
    cursor: pointer;
}
button:hover {
    background: #355E95;
}
input {
    vertical-align: -2px;
}
a {
    color: #BBB;
}
#author {
    padding: 10px;
    text-align: center;
}
#countdown {
    position: absolute;
    display: none;
    z-index: 3;
    width: 100%;
    top: 265px;
    color: #FFFFF;
    text-align: center;
    font-size: 90px;
    text-shadow: 7px 4px 5px #000;
}
#game {
    width: 100%;
}
#smiteDmg {
    padding: 0 0 10px;
    text-align: center;
}
#config {
    position: absolute;
    z-index: 9002;
    top: 100px;
    left: 0;
    background: #111;
    border: 2px #85654E solid;
    border-radius: 5px;
    border-left: none;
    padding: 17px;
}
#baron {
    border: none;
    width: 100%;
}
#target {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 180px;
    height: 30px;
    background: #111;
    padding: 10px;
    border: 3px #85654E solid;
    border-top:...

JavaScript

var rnd = function(from, to) {
    return Math.floor(Math.random()*(to-from+1)+from);
}
var Game =  function() {
    var self = this;
    this.config = {
        hp: rnd(10000, 13000),
        crits: true,
        smite: false,
        smiteDmg: 1000,
        count: 3,
        secret: 0
    };
    
    this.ui = {
        countdown: $('#countdown'),
        config: $('#config'),
        crits: $('#crits'),
        smite: $('#smite'),
        baron: $('#baron'),
        hp: $('#hp'),
        bar: $('#bar'),
        secret: $('#secret')
    };

    this.init = function() {
        // Bind events
        this.ui.config.on('click', 'button', function() {
            self.start();
        });
        $(window).on('keypress', function(e) {
    if (e.which == 68 || e.which == 70 || e.which == 100 || e.which == 102) { // D, F, d, f
        self.smite();
    }
});
        this.ui.baron.on('click', function() {
            self.smite();
        });
        return this;
    }

    this.start = function() {
        // Create a new session
        this.data = $.extend({}, this.config);
        this.data.maxHP = this.data.hp;
        this.data.secret = rnd(1500, 2000);
        this.data.crits = (this.ui.crits.prop('checked'));
        this.data.smite = (this.ui.smite.prop('checked')) ? rnd(700, this.data.smiteDmg) : 0;
        // Reset hp
        this.updateHP();
        this.ui.secret.css({'top': '200px', 'left': '-200px'});
        
        // Enable "smite" (cursor)
        this.ui.baron.css('cursor', 'pointer');
        
        // Hide the configuration panel
        this.ui.config.fadeOut();
        
        this.running = true;
        
        // Count down !
        this.countdown();
        return this;
    }
    
    this.countdown = function() {
        if (!this.running) return false;
        this.ui.countdown.show();
        this.ui.countdown.text(this.data.count);
        if (this.data.count < 1) {
            this.ui.countdown.hide();
            this.run();
  ...