2d Map Run

In the works

by spedwards

HTML

<div id="map"></div>
<div id="shop">
    <div id="points"><p><span>0</span> points available</p></div>
    
    <div id="purchase">
        <p id="buyShot"><a>Buy Shot</a><span><span class="price">10</span> points</span></p>
        <p id="buyShots"><a>Buy 10 Shots</a><span><span class="price">50</span> points</span></p>
    </div>
</div>

<div id="shotsLeft">You Have <span></span> Shots Left</div>
<div id="aiShotsLeft">AI Has <span></span> Shots Left</div>

<pre></pre>

CSS

#map {
    float: left;
    width: 50%;
    display: inline;
}

#shop {
    float: left;
    font-weight: normal;
}

#purchase p {
    display: none;
}

#purchase a {
    margin-right: 1em;
    display: inline-block;
    width: 100px;
    height: 22px;
    line-height: 22px;
    background-color: #ededed;
    border: 3px solid #dcdcdc;
    color: #777;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
}

#purchase a:hover {
    background-color: #dfdfdf;
}


div:not(#map):not(#shop):not(#shop div) {
    font-weight: bold;
}

#shotsLeft {
    margin-top: 1em;
    clear: both;
}

div span {
    font-weight: normal;
}

pre {
    margin-top: 2em;
    height: 166px;
    width: 533px;
    overflow: hidden;
    background-color: grey;
    border-radius: 15px;
    border: 3px solid #000;
}

pre span {
    display: block;
    padding-left: .5em;
}

pre span:first-of-type {
    padding-top: .5em;
}

pre #aiShoot {
    color: orange;
}

pre #shoot {
    color: blue;
}

pre #aiMove {
    color: yellow;
}

pre #move {
    color: lime;
}

pre #win {
    color: cyan;
    font-weight: bold;
}

pre #lose {
    color: white;
    font-weight: bold;
}

pre #info {
    color: white;
}

JavaScript

var docCookies = {
  getItem: function (sKey) {
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
  },
  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
    var sExpires = "";
    if (vEnd) {
      switch (vEnd.constructor) {
        case Number:
          sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
          break;
        case String:
          sExpires = "; expires=" + vEnd;
          break;
        case Date:
          sExpires = "; expires=" + vEnd.toUTCString();
          break;
      }
    }
    document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
    return true;
  },
  removeItem: function (sKey, sPath, sDomain) {
    if (!sKey || !this.hasItem(sKey)) { return false; }
    document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + ( sDomain ? "; domain=" + sDomain : "") + ( sPath ? "; path=" + sPath : "");
    return true;
  },
  hasItem: function (sKey) {
    return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
  },
  keys: /* optional method: you can safely remove it! */ function () {
    var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
    for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
    return aKeys;
  }
};

var map = [], size = 20,
    height = size, width = height*2,
    keys = {up:38, left:37, down:40, right:39, exit:16, s:83},
    pos = [0,0], // [x,y]
    aiPos =...