diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/.DS_Store differ
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/fpsmeter.min.js b/fpsmeter.min.js
old mode 100755
new mode 100644
index 481da37..a6a1227
--- a/fpsmeter.min.js
+++ b/fpsmeter.min.js
@@ -1,15 +1,445 @@
 /*! FPSMeter 0.3.1 - 9th May 2013 | https://github.com/Darsain/fpsmeter */
-(function(m,j){function s(a,e){for(var g in e)try{a.style[g]=e[g]}catch(j){}return a}function H(a){return null==a?String(a):"object"===typeof a||"function"===typeof a?Object.prototype.toString.call(a).match(/\s([a-z]+)/i)[1].toLowerCase()||"object":typeof a}function R(a,e){if("array"!==H(e))return-1;if(e.indexOf)return e.indexOf(a);for(var g=0,j=e.length;g<j;g++)if(e[g]===a)return g;return-1}function I(){var a=arguments,e;for(e in a[1])if(a[1].hasOwnProperty(e))switch(H(a[1][e])){case "object":a[0][e]=
-I({},a[0][e],a[1][e]);break;case "array":a[0][e]=a[1][e].slice(0);break;default:a[0][e]=a[1][e]}return 2<a.length?I.apply(null,[a[0]].concat(Array.prototype.slice.call(a,2))):a[0]}function N(a){a=Math.round(255*a).toString(16);return 1===a.length?"0"+a:a}function S(a,e,g,j){if(a.addEventListener)a[j?"removeEventListener":"addEventListener"](e,g,!1);else if(a.attachEvent)a[j?"detachEvent":"attachEvent"]("on"+e,g)}function D(a,e){function g(a,b,d,c){return y[0|a][Math.round(Math.min((b-d)/(c-d)*J,J))]}
-function r(){f.legend.fps!==q&&(f.legend.fps=q,f.legend[T]=q?"FPS":"ms");K=q?b.fps:b.duration;f.count[T]=999<K?"999+":K.toFixed(99<K?0:d.decimals)}function m(){z=A();L<z-d.threshold&&(b.fps-=b.fps/Math.max(1,60*d.smoothing/d.interval),b.duration=1E3/b.fps);for(c=d.history;c--;)E[c]=0===c?b.fps:E[c-1],F[c]=0===c?b.duration:F[c-1];r();if(d.heat){if(w.length)for(c=w.length;c--;)w[c].el.style[h[w[c].name].heatOn]=q?g(h[w[c].name].heatmap,b.fps,0,d.maxFps):g(h[w[c].name].heatmap,b.duration,d.threshold,
-0);if(f.graph&&h.column.heatOn)for(c=u.length;c--;)u[c].style[h.column.heatOn]=q?g(h.column.heatmap,E[c],0,d.maxFps):g(h.column.heatmap,F[c],d.threshold,0)}if(f.graph)for(p=0;p<d.history;p++)u[p].style.height=(q?E[p]?Math.round(O/d.maxFps*Math.min(E[p],d.maxFps)):0:F[p]?Math.round(O/d.threshold*Math.min(F[p],d.threshold)):0)+"px"}function k(){20>d.interval?(x=M(k),m()):(x=setTimeout(k,d.interval),P=M(m))}function G(a){a=a||window.event;a.preventDefault?(a.preventDefault(),a.stopPropagation()):(a.returnValue=
-!1,a.cancelBubble=!0);b.toggle()}function U(){d.toggleOn&&S(f.container,d.toggleOn,G,1);a.removeChild(f.container)}function V(){f.container&&U();h=D.theme[d.theme];y=h.compiledHeatmaps||[];if(!y.length&&h.heatmaps.length){for(p=0;p<h.heatmaps.length;p++){y[p]=[];for(c=0;c<=J;c++){var b=y[p],e=c,g;g=0.33/J*c;var j=h.heatmaps[p].saturation,m=h.heatmaps[p].lightness,n=void 0,k=void 0,l=void 0,t=l=void 0,v=n=k=void 0,v=void 0,l=0.5>=m?m*(1+j):m+j-m*j;0===l?g="#000":(t=2*m-l,k=(l-t)/l,g*=6,n=Math.floor(g),
-v=g-n,v*=l*k,0===n||6===n?(n=l,k=t+v,l=t):1===n?(n=l-v,k=l,l=t):2===n?(n=t,k=l,l=t+v):3===n?(n=t,k=l-v):4===n?(n=t+v,k=t):(n=l,k=t,l-=v),g="#"+N(n)+N(k)+N(l));b[e]=g}}h.compiledHeatmaps=y}f.container=s(document.createElement("div"),h.container);f.count=f.container.appendChild(s(document.createElement("div"),h.count));f.legend=f.container.appendChild(s(document.createElement("div"),h.legend));f.graph=d.graph?f.container.appendChild(s(document.createElement("div"),h.graph)):0;w.length=0;for(var q in f)f[q]&&
-h[q].heatOn&&w.push({name:q,el:f[q]});u.length=0;if(f.graph){f.graph.style.width=d.history*h.column.width+(d.history-1)*h.column.spacing+"px";for(c=0;c<d.history;c++)u[c]=f.graph.appendChild(s(document.createElement("div"),h.column)),u[c].style.position="absolute",u[c].style.bottom=0,u[c].style.right=c*h.column.width+c*h.column.spacing+"px",u[c].style.width=h.column.width+"px",u[c].style.height="0px"}s(f.container,d);r();a.appendChild(f.container);f.graph&&(O=f.graph.clientHeight);d.toggleOn&&("click"===
-d.toggleOn&&(f.container.style.cursor="pointer"),S(f.container,d.toggleOn,G))}"object"===H(a)&&a.nodeType===j&&(e=a,a=document.body);a||(a=document.body);var b=this,d=I({},D.defaults,e||{}),f={},u=[],h,y,J=100,w=[],W=0,B=d.threshold,Q=0,L=A()-B,z,E=[],F=[],x,P,q="fps"===d.show,O,K,c,p;b.options=d;b.fps=0;b.duration=0;b.isPaused=0;b.tickStart=function(){Q=A()};b.tick=function(){z=A();W=z-L;B+=(W-B)/d.smoothing;b.fps=1E3/B;b.duration=Q<L?B:z-Q;L=z};b.pause=function(){x&&(b.isPaused=1,clearTimeout(x),
-C(x),C(P),x=P=0);return b};b.resume=function(){x||(b.isPaused=0,k());return b};b.set=function(a,c){d[a]=c;q="fps"===d.show;-1!==R(a,X)&&V();-1!==R(a,Y)&&s(f.container,d);return b};b.showDuration=function(){b.set("show","ms");return b};b.showFps=function(){b.set("show","fps");return b};b.toggle=function(){b.set("show",q?"ms":"fps");return b};b.hide=function(){b.pause();f.container.style.display="none";return b};b.show=function(){b.resume();f.container.style.display="block";return b};b.destroy=function(){b.pause();
-U();b.tick=b.tickStart=function(){}};V();k()}var A,r=m.performance;A=r&&(r.now||r.webkitNow)?r[r.now?"now":"webkitNow"].bind(r):function(){return+new Date};for(var C=m.cancelAnimationFrame||m.cancelRequestAnimationFrame,M=m.requestAnimationFrame,r=["moz","webkit","o"],G=0,k=0,Z=r.length;k<Z&&!C;++k)M=(C=m[r[k]+"CancelAnimationFrame"]||m[r[k]+"CancelRequestAnimationFrame"])&&m[r[k]+"RequestAnimationFrame"];C||(M=function(a){var e=A(),g=Math.max(0,16-(e-G));G=e+g;return m.setTimeout(function(){a(e+
-g)},g)},C=function(a){clearTimeout(a)});var T="string"===H(document.createElement("div").textContent)?"textContent":"innerText";D.extend=I;window.FPSMeter=D;D.defaults={interval:100,smoothing:10,show:"fps",toggleOn:"click",decimals:1,maxFps:60,threshold:100,position:"absolute",zIndex:10,left:"5px",top:"5px",right:"auto",bottom:"auto",margin:"0 0 0 0",theme:"dark",heat:0,graph:0,history:20};var X=["toggleOn","theme","heat","graph","history"],Y="position zIndex left top right bottom margin".split(" ")})(window);(function(m,j){j.theme={};var s=j.theme.base={heatmaps:[],container:{heatOn:null,heatmap:null,padding:"5px",minWidth:"95px",height:"30px",lineHeight:"30px",textAlign:"right",textShadow:"none"},count:{heatOn:null,heatmap:null,position:"absolute",top:0,right:0,padding:"5px 10px",height:"30px",fontSize:"24px",fontFamily:"Consolas, Andale Mono, monospace",zIndex:2},legend:{heatOn:null,heatmap:null,position:"absolute",top:0,left:0,padding:"5px 10px",height:"30px",fontSize:"12px",lineHeight:"32px",fontFamily:"sans-serif",
-textAlign:"left",zIndex:2},graph:{heatOn:null,heatmap:null,position:"relative",boxSizing:"padding-box",MozBoxSizing:"padding-box",height:"100%",zIndex:1},column:{width:4,spacing:1,heatOn:null,heatmap:null}};j.theme.dark=j.extend({},s,{heatmaps:[{saturation:0.8,lightness:0.8}],container:{background:"#222",color:"#fff",border:"1px solid #1a1a1a",textShadow:"1px 1px 0 #222"},count:{heatOn:"color"},column:{background:"#3f3f3f"}});j.theme.light=j.extend({},s,{heatmaps:[{saturation:0.5,lightness:0.5}],
-container:{color:"#666",background:"#fff",textShadow:"1px 1px 0 rgba(255,255,255,.5), -1px -1px 0 rgba(255,255,255,.5)",boxShadow:"0 0 0 1px rgba(0,0,0,.1)"},count:{heatOn:"color"},column:{background:"#eaeaea"}});j.theme.colorful=j.extend({},s,{heatmaps:[{saturation:0.5,lightness:0.6}],container:{heatOn:"backgroundColor",background:"#888",color:"#fff",textShadow:"1px 1px 0 rgba(0,0,0,.2)",boxShadow:"0 0 0 1px rgba(0,0,0,.1)"},column:{background:"#777",backgroundColor:"rgba(0,0,0,.2)"}});j.theme.transparent=
-j.extend({},s,{heatmaps:[{saturation:0.8,lightness:0.5}],container:{padding:0,color:"#fff",textShadow:"1px 1px 0 rgba(0,0,0,.5)"},count:{padding:"0 5px",height:"40px",lineHeight:"40px"},legend:{padding:"0 5px",height:"40px",lineHeight:"42px"},graph:{height:"40px"},column:{width:5,background:"#999",heatOn:"backgroundColor",opacity:0.5}})})(window,FPSMeter);
+(function (m, j) {
+  function s(a, e) {
+    for (var g in e)
+      try {
+        a.style[g] = e[g];
+      } catch (j) {}
+    return a;
+  }
+  function H(a) {
+    return null == a
+      ? String(a)
+      : "object" === typeof a || "function" === typeof a
+      ? Object.prototype.toString
+          .call(a)
+          .match(/\s([a-z]+)/i)[1]
+          .toLowerCase() || "object"
+      : typeof a;
+  }
+  function R(a, e) {
+    if ("array" !== H(e)) return -1;
+    if (e.indexOf) return e.indexOf(a);
+    for (var g = 0, j = e.length; g < j; g++) if (e[g] === a) return g;
+    return -1;
+  }
+  function I() {
+    var a = arguments,
+      e;
+    for (e in a[1])
+      if (a[1].hasOwnProperty(e))
+        switch (H(a[1][e])) {
+          case "object":
+            a[0][e] = I({}, a[0][e], a[1][e]);
+            break;
+          case "array":
+            a[0][e] = a[1][e].slice(0);
+            break;
+          default:
+            a[0][e] = a[1][e];
+        }
+    return 2 < a.length
+      ? I.apply(null, [a[0]].concat(Array.prototype.slice.call(a, 2)))
+      : a[0];
+  }
+  function N(a) {
+    a = Math.round(255 * a).toString(16);
+    return 1 === a.length ? "0" + a : a;
+  }
+  function S(a, e, g, j) {
+    if (a.addEventListener)
+      a[j ? "removeEventListener" : "addEventListener"](e, g, !1);
+    else if (a.attachEvent) a[j ? "detachEvent" : "attachEvent"]("on" + e, g);
+  }
+  function D(a, e) {
+    function g(a, b, d, c) {
+      return y[0 | a][Math.round(Math.min(((b - d) / (c - d)) * J, J))];
+    }
+    function r() {
+      f.legend.fps !== q &&
+        ((f.legend.fps = q), (f.legend[T] = q ? "FPS" : "ms"));
+      K = q ? b.fps : b.duration;
+      f.count[T] = 999 < K ? "999+" : K.toFixed(99 < K ? 0 : d.decimals);
+    }
+    function m() {
+      z = A();
+      L < z - d.threshold &&
+        ((b.fps -= b.fps / Math.max(1, (60 * d.smoothing) / d.interval)),
+        (b.duration = 1e3 / b.fps));
+      for (c = d.history; c--; )
+        (E[c] = 0 === c ? b.fps : E[c - 1]),
+          (F[c] = 0 === c ? b.duration : F[c - 1]);
+      r();
+      if (d.heat) {
+        if (w.length)
+          for (c = w.length; c--; )
+            w[c].el.style[h[w[c].name].heatOn] = q
+              ? g(h[w[c].name].heatmap, b.fps, 0, d.maxFps)
+              : g(h[w[c].name].heatmap, b.duration, d.threshold, 0);
+        if (f.graph && h.column.heatOn)
+          for (c = u.length; c--; )
+            u[c].style[h.column.heatOn] = q
+              ? g(h.column.heatmap, E[c], 0, d.maxFps)
+              : g(h.column.heatmap, F[c], d.threshold, 0);
+      }
+      if (f.graph)
+        for (p = 0; p < d.history; p++)
+          u[p].style.height =
+            (q
+              ? E[p]
+                ? Math.round((O / d.maxFps) * Math.min(E[p], d.maxFps))
+                : 0
+              : F[p]
+              ? Math.round((O / d.threshold) * Math.min(F[p], d.threshold))
+              : 0) + "px";
+    }
+    function k() {
+      20 > d.interval
+        ? ((x = M(k)), m())
+        : ((x = setTimeout(k, d.interval)), (P = M(m)));
+    }
+    function G(a) {
+      a = a || window.event;
+      a.preventDefault
+        ? (a.preventDefault(), a.stopPropagation())
+        : ((a.returnValue = !1), (a.cancelBubble = !0));
+      b.toggle();
+    }
+    function U() {
+      d.toggleOn && S(f.container, d.toggleOn, G, 1);
+      a.removeChild(f.container);
+    }
+    function V() {
+      f.container && U();
+      h = D.theme[d.theme];
+      y = h.compiledHeatmaps || [];
+      if (!y.length && h.heatmaps.length) {
+        for (p = 0; p < h.heatmaps.length; p++) {
+          y[p] = [];
+          for (c = 0; c <= J; c++) {
+            var b = y[p],
+              e = c,
+              g;
+            g = (0.33 / J) * c;
+            var j = h.heatmaps[p].saturation,
+              m = h.heatmaps[p].lightness,
+              n = void 0,
+              k = void 0,
+              l = void 0,
+              t = (l = void 0),
+              v = (n = k = void 0),
+              v = void 0,
+              l = 0.5 >= m ? m * (1 + j) : m + j - m * j;
+            0 === l
+              ? (g = "#000")
+              : ((t = 2 * m - l),
+                (k = (l - t) / l),
+                (g *= 6),
+                (n = Math.floor(g)),
+                (v = g - n),
+                (v *= l * k),
+                0 === n || 6 === n
+                  ? ((n = l), (k = t + v), (l = t))
+                  : 1 === n
+                  ? ((n = l - v), (k = l), (l = t))
+                  : 2 === n
+                  ? ((n = t), (k = l), (l = t + v))
+                  : 3 === n
+                  ? ((n = t), (k = l - v))
+                  : 4 === n
+                  ? ((n = t + v), (k = t))
+                  : ((n = l), (k = t), (l -= v)),
+                (g = "#" + N(n) + N(k) + N(l)));
+            b[e] = g;
+          }
+        }
+        h.compiledHeatmaps = y;
+      }
+      f.container = s(document.createElement("div"), h.container);
+      f.count = f.container.appendChild(
+        s(document.createElement("div"), h.count)
+      );
+      f.legend = f.container.appendChild(
+        s(document.createElement("div"), h.legend)
+      );
+      f.graph = d.graph
+        ? f.container.appendChild(s(document.createElement("div"), h.graph))
+        : 0;
+      w.length = 0;
+      for (var q in f) f[q] && h[q].heatOn && w.push({ name: q, el: f[q] });
+      u.length = 0;
+      if (f.graph) {
+        f.graph.style.width =
+          d.history * h.column.width +
+          (d.history - 1) * h.column.spacing +
+          "px";
+        for (c = 0; c < d.history; c++)
+          (u[c] = f.graph.appendChild(
+            s(document.createElement("div"), h.column)
+          )),
+            (u[c].style.position = "absolute"),
+            (u[c].style.bottom = 0),
+            (u[c].style.right =
+              c * h.column.width + c * h.column.spacing + "px"),
+            (u[c].style.width = h.column.width + "px"),
+            (u[c].style.height = "0px");
+      }
+      s(f.container, d);
+      r();
+      a.appendChild(f.container);
+      f.graph && (O = f.graph.clientHeight);
+      d.toggleOn &&
+        ("click" === d.toggleOn && (f.container.style.cursor = "pointer"),
+        S(f.container, d.toggleOn, G));
+    }
+    "object" === H(a) && a.nodeType === j && ((e = a), (a = document.body));
+    a || (a = document.body);
+    var b = this,
+      d = I({}, D.defaults, e || {}),
+      f = {},
+      u = [],
+      h,
+      y,
+      J = 100,
+      w = [],
+      W = 0,
+      B = d.threshold,
+      Q = 0,
+      L = A() - B,
+      z,
+      E = [],
+      F = [],
+      x,
+      P,
+      q = "fps" === d.show,
+      O,
+      K,
+      c,
+      p;
+    b.options = d;
+    b.fps = 0;
+    b.duration = 0;
+    b.isPaused = 0;
+    b.tickStart = function () {
+      Q = A();
+    };
+    b.tick = function () {
+      z = A();
+      W = z - L;
+      B += (W - B) / d.smoothing;
+      b.fps = 1e3 / B;
+      b.duration = Q < L ? B : z - Q;
+      L = z;
+    };
+    b.pause = function () {
+      x && ((b.isPaused = 1), clearTimeout(x), C(x), C(P), (x = P = 0));
+      return b;
+    };
+    b.resume = function () {
+      x || ((b.isPaused = 0), k());
+      return b;
+    };
+    b.set = function (a, c) {
+      d[a] = c;
+      q = "fps" === d.show;
+      -1 !== R(a, X) && V();
+      -1 !== R(a, Y) && s(f.container, d);
+      return b;
+    };
+    b.showDuration = function () {
+      b.set("show", "ms");
+      return b;
+    };
+    b.showFps = function () {
+      b.set("show", "fps");
+      return b;
+    };
+    b.toggle = function () {
+      b.set("show", q ? "ms" : "fps");
+      return b;
+    };
+    b.hide = function () {
+      b.pause();
+      f.container.style.display = "none";
+      return b;
+    };
+    b.show = function () {
+      b.resume();
+      f.container.style.display = "block";
+      return b;
+    };
+    b.destroy = function () {
+      b.pause();
+      U();
+      b.tick = b.tickStart = function () {};
+    };
+    V();
+    k();
+  }
+  var A,
+    r = m.performance;
+  A =
+    r && (r.now || r.webkitNow)
+      ? r[r.now ? "now" : "webkitNow"].bind(r)
+      : function () {
+          return +new Date();
+        };
+  for (
+    var C = m.cancelAnimationFrame || m.cancelRequestAnimationFrame,
+      M = m.requestAnimationFrame,
+      r = ["moz", "webkit", "o"],
+      G = 0,
+      k = 0,
+      Z = r.length;
+    k < Z && !C;
+    ++k
+  )
+    M =
+      (C =
+        m[r[k] + "CancelAnimationFrame"] ||
+        m[r[k] + "CancelRequestAnimationFrame"]) &&
+      m[r[k] + "RequestAnimationFrame"];
+  C ||
+    ((M = function (a) {
+      var e = A(),
+        g = Math.max(0, 16 - (e - G));
+      G = e + g;
+      return m.setTimeout(function () {
+        a(e + g);
+      }, g);
+    }),
+    (C = function (a) {
+      clearTimeout(a);
+    }));
+  var T =
+    "string" === H(document.createElement("div").textContent)
+      ? "textContent"
+      : "innerText";
+  D.extend = I;
+  window.FPSMeter = D;
+  D.defaults = {
+    interval: 100,
+    smoothing: 10,
+    show: "fps",
+    toggleOn: "click",
+    decimals: 1,
+    maxFps: 60,
+    threshold: 100,
+    position: "absolute",
+    zIndex: 10,
+    left: "5px",
+    top: "5px",
+    right: "auto",
+    bottom: "auto",
+    margin: "0 0 0 0",
+    theme: "dark",
+    heat: 0,
+    graph: 0,
+    history: 20,
+  };
+  var X = ["toggleOn", "theme", "heat", "graph", "history"],
+    Y = "position zIndex left top right bottom margin".split(" ");
+})(window);
+(function (m, j) {
+  j.theme = {};
+  var s = (j.theme.base = {
+    heatmaps: [],
+    container: {
+      heatOn: null,
+      heatmap: null,
+      padding: "5px",
+      minWidth: "95px",
+      height: "30px",
+      lineHeight: "30px",
+      textAlign: "right",
+      textShadow: "none",
+    },
+    count: {
+      heatOn: null,
+      heatmap: null,
+      position: "absolute",
+      top: 0,
+      right: 0,
+      padding: "5px 10px",
+      height: "30px",
+      fontSize: "24px",
+      fontFamily: "Consolas, Andale Mono, monospace",
+      zIndex: 2,
+    },
+    legend: {
+      heatOn: null,
+      heatmap: null,
+      position: "absolute",
+      top: 0,
+      left: 0,
+      padding: "5px 10px",
+      height: "30px",
+      fontSize: "12px",
+      lineHeight: "32px",
+      fontFamily: "sans-serif",
+      textAlign: "left",
+      zIndex: 2,
+    },
+    graph: {
+      heatOn: null,
+      heatmap: null,
+      position: "relative",
+      boxSizing: "padding-box",
+      MozBoxSizing: "padding-box",
+      height: "100%",
+      zIndex: 1,
+    },
+    column: { width: 4, spacing: 1, heatOn: null, heatmap: null },
+  });
+  j.theme.dark = j.extend({}, s, {
+    heatmaps: [{ saturation: 0.8, lightness: 0.8 }],
+    container: {
+      background: "#222",
+      color: "#fff",
+      border: "1px solid #1a1a1a",
+      textShadow: "1px 1px 0 #222",
+    },
+    count: { heatOn: "color" },
+    column: { background: "#3f3f3f" },
+  });
+  j.theme.light = j.extend({}, s, {
+    heatmaps: [{ saturation: 0.5, lightness: 0.5 }],
+    container: {
+      color: "#666",
+      background: "#fff",
+      textShadow:
+        "1px 1px 0 rgba(255,255,255,.5), -1px -1px 0 rgba(255,255,255,.5)",
+      boxShadow: "0 0 0 1px rgba(0,0,0,.1)",
+    },
+    count: { heatOn: "color" },
+    column: { background: "#eaeaea" },
+  });
+  j.theme.colorful = j.extend({}, s, {
+    heatmaps: [{ saturation: 0.5, lightness: 0.6 }],
+    container: {
+      heatOn: "backgroundColor",
+      background: "#888",
+      color: "#fff",
+      textShadow: "1px 1px 0 rgba(0,0,0,.2)",
+      boxShadow: "0 0 0 1px rgba(0,0,0,.1)",
+    },
+    column: { background: "#777", backgroundColor: "rgba(0,0,0,.2)" },
+  });
+  j.theme.transparent = j.extend({}, s, {
+    heatmaps: [{ saturation: 0.8, lightness: 0.5 }],
+    container: {
+      padding: 0,
+      color: "#fff",
+      textShadow: "1px 1px 0 rgba(0,0,0,.5)",
+    },
+    count: { padding: "0 5px", height: "40px", lineHeight: "40px" },
+    legend: { padding: "0 5px", height: "40px", lineHeight: "42px" },
+    graph: { height: "40px" },
+    column: {
+      width: 5,
+      background: "#999",
+      heatOn: "backgroundColor",
+      opacity: 0.5,
+    },
+  });
+})(window, FPSMeter);
diff --git a/index.html b/index.html
index f5f770f..fd92a15 100644
--- a/index.html
+++ b/index.html
@@ -1,43 +1,165 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
-  <title>Javascript Platformer</title>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <title>Javascript Platformer</title>
 
-  <style>
-    body            { background: #111; }
-    #platformer     { margin: 1em auto; position: relative; width: 512px; height: 384px; }
-    #canvas         { display: inline-block; width: 100%; height: 100%; }
-    #instructions   { font-style: italic; color: #999; font-size: 9pt; margin-left: 1em; margin-top: 0.5em; }
-    #instructions b { color: #DDD; }
-    @media screen and (min-width:     0px) and (min-height:    0px) { #platformer { width:  512px; height: 384px; font-size:  7pt; } } /* block = 16 */
-    @media screen and (min-width:   840px) and (min-height:  530px) { #platformer { width:  640px; height: 480px; font-size:  9pt; } } /* block = 20 */
-    @media screen and (min-width:   968px) and (min-height:  626px) { #platformer { width:  768px; height: 576px; font-size: 11pt; } } /* block = 24 */
-    @media screen and (min-width:  1096px) and (min-height:  722px) { #platformer { width:  896px; height: 672px; font-size: 13pt; } } /* block = 28 */
-    @media screen and (min-width:  1224px) and (min-height:  818px) { #platformer { width: 1024px; height: 768px; font-size: 15pt; } } /* block = 32 */
-  </style>
+    <style>
+      body {
+        background: #111;
+      }
+      h1 {
+        color: white;
+        text-align: center;
+      }
+      #menu{
+        margin: 1em auto;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: aliceblue;
+      }
+      #platformer {
+        margin: 1em auto;
+        position: relative;
+        width: 512px;
+        height: 384px;
+      }
+      #screen{
+        width: 512px;
+        height: 384px;
+      }
+      #canvas {
+        display: none;
+        width: 100%;
+        height: 100%;
+      }
+      #display {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        background-color: aquamarine;
+        background-image: url("title_img.png");
+        background-size: cover;
+      }
+      #start{
+        width: 20%;
+        height: 10%;
+        background-color: aliceblue;
+        border-radius: 50px;
+      }
+      #instructions {
+        font-style: italic;
+        color: #999;
+        font-size: 9pt;
+        margin-left: 1em;
+        margin-top: 0.5em;
+      }
+      #instructions b {
+        color: #ddd;
+      }
+      @media screen and (min-width: 0px) and (min-height: 0px) {
+        #platformer , #screen{
+          width: 512px;
+          height: 384px;
+          font-size: 7pt;
+        }
+        #menu{
+          width: 512px;
+        }
+        #start{
+          font-size: 7pt;
+        }
+      } /* block = 16 */
+      @media screen and (min-width: 840px) and (min-height: 530px) {
+        #platformer , #screen{
+          width: 640px;
+          height: 480px;
+          font-size: 9pt;
+        }
+        #menu{
+          width: 640px;
+        }
+        #start{
+          font-size: 9pt;
+        }
+      } /* block = 20 */
+      @media screen and (min-width: 968px) and (min-height: 626px) {
+        #platformer , #screen{
+          width: 768px;
+          height: 576px;
+          font-size: 11pt;
+        }
+        #menu{
+          width: 768px;
+        }
+        #start{
+          font-size: 11pt;
+        }
+      } /* block = 24 */
+      @media screen and (min-width: 1096px) and (min-height: 722px) {
+        #platformer , #screen{
+          width: 896px;
+          height: 672px;
+          font-size: 13pt;
+        }
+        #menu{
+          width: 896px;
+        }
+        #start{
+          font-size: 13pt;
+        }
+      } /* block = 28 */
+      @media screen and (min-width: 1224px) and (min-height: 818px) {
+        #platformer , #screen{
+          width: 1024px;
+          height: 768px;
+          font-size: 15pt;
+        }
+        #menu{
+          width: 1024px;
+        }
+        #start{
+          font-size: 15pt;
+        }
+        
+      } /* block = 32 */
+    </style>
+  </head>
 
-</head>
+  <body>
+    <h1>Tiny Platformer Game</h1>
 
-<body>
-
-  <div id="platformer">
-
-    <canvas id="canvas">
-      <div class="unsupported">
-        Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
+    <div id="menu">
+      <button id="restart">Replay</button>
+      <button id="menuBTN">Menu</button>
+    </div>
+    <div id="platformer">
+      <div id="screen">
+        <div id="display">
+          <h1>Tiny Platformer Game</h1>
+          <button id="start">Start</button>
+        </div>
+        <canvas id="canvas">
+          <div class="unsupported">
+            Sorry, this example cannot be run because your browser does not
+            support the &lt;canvas&gt; element
+          </div>
+        </canvas>
+      </div>
+      <div id="instructions">
+        <b>LEFT/RIGHT</b> to move, <b>SPACE</b> to jump, collect gold and jump
+        on monsters.
       </div>
-    </canvas>
-
-    <div id="instructions">
-      <b>LEFT/RIGHT</b> to move, <b>SPACE</b> to jump, collect gold and jump on monsters.
     </div>
 
-  </div>
-
-  <script src="fpsmeter.min.js"></script>
-  <script src="platformer.js"></script>
-
-</body>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="fpsmeter.min.js"></script>
+    <script src="platformer.js"></script>
+  </body>
 </html>
diff --git a/level.tmx b/level.tmx
old mode 100755
new mode 100644
diff --git a/level.json b/level1.json
old mode 100755
new mode 100644
similarity index 100%
rename from level.json
rename to level1.json
diff --git a/level2.json b/level2.json
new file mode 100644
index 0000000..877c2cb
--- /dev/null
+++ b/level2.json
@@ -0,0 +1,462 @@
+{ "height":48,
+ "layers":[
+        {
+         "data":[
+         5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
+         5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
+         5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5,
+         5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5,
+         5, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 3, 3, 3, 3, 3, 3, 3,
+         3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 3,
+         3, 3, 3, 3, 3, 3, 3, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3,
+         3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5,
+         5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5,
+         5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5,
+         5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5,
+         2, 2, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5,
+         5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 2, 2, 5, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 5, 2, 2, 2, 2, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 4, 4, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 2,
+         2, 2, 2, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4,
+         4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 5,
+         5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 2, 2, 2, 2, 5, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 5, 2, 2, 2, 2, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4,
+         4, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 2,
+         2, 2, 2, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 5,
+         5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 2, 2, 2, 2, 5, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 5, 2, 2, 2, 2, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0,
+         0, 0, 0, 0, 0, 0, 0, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 5, 2,
+         2, 2, 2, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 5,
+         5, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 5, 2, 2, 2, 2, 5, 0, 0, 0, 0,
+         0, 0, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0,
+         5, 0, 0, 0, 0, 0, 5, 2, 2, 2, 2, 5, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 5, 2,
+         2, 2, 2, 5, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5,
+         5, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 5, 2, 2, 2, 2, 5, 0, 0, 0, 0,
+         0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 5, 5, 0, 0, 0, 0, 0,
+         5, 0, 0, 0, 0, 0, 5, 2, 2, 2, 2, 5, 5, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 5, 5, 2, 2, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 5, 2,
+         2, 2, 2, 2, 5, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5,
+         5, 0, 0, 5, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 5, 2, 2, 2, 2, 2, 5, 0, 0, 0,
+         0, 0, 5, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 5, 5,
+         5, 0, 0, 0, 0, 0, 5, 2, 2, 2, 2, 2, 5, 5, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0,
+         3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 2, 2, 5, 0, 0, 0, 0, 0, 5, 2,
+         2, 2, 2, 2, 5, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5,
+         5, 0, 0, 0, 0, 5, 0, 0, 5, 0, 0, 0, 0, 0, 5, 2, 2, 2, 2, 2, 5, 0, 0, 0,
+         0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0,
+         5, 0, 0, 0, 0, 0, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         4, 4, 4, 0, 0, 0, 0, 5, 5, 5, 5, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0,
+         0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 0, 0, 0, 0, 5,
+         5, 2, 2, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 5, 0, 0, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 5, 0, 0, 0, 0,
+         5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 5, 5,
+         5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4,
+         4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5,
+         5, 0, 0, 0, 0, 0, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0,
+         0, 0, 2, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 5, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 2, 2, 2, 2, 2, 2, 2, 5, 5, 5, 0,
+         0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0,
+         0, 0, 0, 0, 5, 2, 2, 2, 2, 2, 2, 2, 2, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5,
+         5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 2, 2, 2,
+         2, 2, 2, 2, 2, 2, 2, 2, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+         0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 0, 0, 0, 5, 5, 0, 0, 5, 5, 5, 5, 5,
+         0, 0, 5, 0, 0, 0, 0, 0, 5, 5, 5, 5, 5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
+         2, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3,
+         3, 3, 3, 3, 0, 0, 0, 5, 5, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
+         2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5, 5, 5, 5, 5, 5, 5,
+         5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
+         "height":48,
+         "name":"background",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":64,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "height":48,
+         "name":"Object Layer 1",
+         "objects":[
+                {
+                 "height":32,
+                 "name":"player",
+                 "properties":
+                    {
+
+                    },
+                 "type":"player",
+                 "visible":true,
+                 "width":32,
+                 "x":96,
+                 "y":480
+                }, 
+                {
+                  "height": 32,
+                  "name": "monster",
+                  "properties": {
+                    "maxdx": "10",
+                    "right": "true"
+                  },
+                  "rotation": 0,
+                  "type": "monster",
+                  "visible": true,
+                  "width": 32,
+                  "x": 896,
+                  "y": 832
+                },
+                {
+                  "height": 32,
+                  "name": "monster",
+                  "properties": {
+                    "left": "true",
+                    "maxdx": "4"
+                  },
+                  "rotation": 0,
+                  "type": "monster",
+                  "visible": true,
+                  "width": 32,
+                  "x": 576,
+                  "y": 1440
+                },
+                {
+                  "height": 32,
+                  "name": "monster",
+                  "properties": {
+                    "left": "true",
+                    "maxdx": "4"
+                  },
+                  "rotation": 0,
+                  "type": "monster",
+                  "visible": true,
+                  "width": 32,
+                  "x": 608,
+                  "y": 1280
+                },
+                {
+                  "height": 32,
+                  "name": "monster",
+                  "properties": {
+                    "maxdx": "4",
+                    "right": "true"
+                  },
+                  "rotation": 0,
+                  "type": "monster",
+                  "visible": true,
+                  "width": 32,
+                  "x": 1120,
+                  "y": 1024
+                },
+                {
+                  "height": 32,
+                  "name": "monster",
+                  "properties": {
+                    "maxdx": "10",
+                    "right": "true"
+                  },
+                  "rotation": 0,
+                  "type": "monster",
+                  "visible": true,
+                  "width": 32,
+                  "x": 896,
+                  "y": 192
+                },
+                {
+                  "height": 32,
+                  "name": "monster",
+                  "properties": {
+                    "maxdx": "10",
+                    "right": "true"
+                  },
+                  "rotation": 0,
+                  "type": "monster",
+                  "visible": true,
+                  "width": 32,
+                  "x": 672,
+                  "y": 192
+                },
+                {
+                  "height": 32,
+                  "name": "monster",
+                  "properties": {
+                    "left": "true",
+                    "maxdx": "10"
+                  },
+                  "rotation": 0,
+                  "type": "monster",
+                  "visible": true,
+                  "width": 32,
+                  "x": 384,
+                  "y": 160
+                },
+                {
+                  "height": 32,
+                  "name": "monster",
+                  "properties": {
+                    "maxdx": "7",
+                    "right": "true"
+                  },
+                  "rotation": 0,
+                  "type": "monster",
+                  "visible": true,
+                  "width": 32,
+                  "x": 160,
+                  "y": 160
+                },
+                {
+                  "height": 32,
+                  "name": "monster",
+                  "properties": {
+                    "maxdx": "5",
+                    "right": "true"
+                  },
+                  "rotation": 0,
+                  "type": "monster",
+                  "visible": true,
+                  "width": 32,
+                  "x": 256,
+                  "y": 160
+                },
+                {
+                  "height": 32,
+                  "name": "monster",
+                  "properties": {
+                    "left": "true",
+                    "maxdx": "5"
+                  },
+                  "rotation": 0,
+                  "type": "monster",
+                  "visible": true,
+                  "width": 32,
+                  "x": 1760,
+                  "y": 1408
+                },
+                {
+                  "height": 32,
+                  "name": "monster",
+                  "properties": {
+                    "maxdx": "7",
+                    "right": "true"
+                  },
+                  "rotation": 0,
+                  "type": "monster",
+                  "visible": true,
+                  "width": 32,
+                  "x": 1536,
+                  "y": 1344
+                },
+                {
+                 "height":32,
+                 "name":"treasure",
+                 "properties":
+                    {
+
+                    },
+                 "type":"treasure",
+                 "visible":true,
+                 "width":32,
+                 "x": 1920,
+                 "y": 176
+                }, 
+                {
+                 "height":32,
+                 "name":"treasure",
+                 "properties":
+                    {
+
+                    },
+                 "type":"treasure",
+                 "visible":true,
+                 "width":32,
+                 "x": 1664,
+                 "y": 496
+                }, 
+                {
+                 "height":32,
+                 "name":"treasure",
+                 "properties":
+                    {
+
+                    },
+                 "type":"treasure",
+                 "visible":true,
+                 "width":32,
+                 "x": 608,
+                 "y": 1456
+                }, 
+                {
+                 "height":32,
+                 "name":"treasure",
+                 "properties":
+                    {
+
+                    },
+                 "type":"treasure",
+                 "visible":true,
+                 "width":32,
+                 "x": 32,
+                 "y": 976
+                }, 
+                {
+                 "height":32,
+                 "name":"treasure",
+                 "properties":
+                    {
+
+                    },
+                 "type":"treasure",
+                 "visible":true,
+                 "width":32,
+                 "x": 480,
+                 "y": 208
+                }, 
+                {
+                 "height":32,
+                 "name":"treasure",
+                 "properties":
+                    {
+
+                    },
+                 "type":"treasure",
+                 "visible":true,
+                 "width":32,
+                 "x":96,
+                 "y":176
+                }, 
+                {
+                 "height":32,
+                 "name":"treasure",
+                 "properties":
+                    {
+
+                    },
+                 "type":"treasure",
+                 "visible":true,
+                 "width":32,
+                 "x": 1056,
+                 "y": 1200
+                }, 
+                {
+                 "height":32,
+                 "name":"treasure",
+                 "properties":
+                    {
+
+                    },
+                 "type":"treasure",
+                 "visible":true,
+                 "width":32,
+                 "x": 1824,
+                 "y": 1168
+                }, 
+                {
+                 "height":32,
+                 "name":"treasure",
+                 "properties":
+                    {
+
+                    },
+                 "type":"treasure",
+                 "visible":true,
+                 "width":32,
+                 "x": 1824,
+                 "y": 1424
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "width":64,
+         "x":0,
+         "y":0
+        }],
+ "orientation":"orthogonal",
+ "properties":
+    {
+
+    },
+ "tileheight":32,
+ "tilesets":[
+        {
+         "firstgid":1,
+         "image":"tiles.png",
+         "imageheight":32,
+         "imagewidth":160,
+         "margin":0,
+         "name":"tiles",
+         "properties":
+            {
+
+            },
+         "spacing":0,
+         "tileheight":32,
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "version":1,
+ "width":64
+}
\ No newline at end of file
diff --git a/platformer.js b/platformer.js
index 9ee01d4..16cdb5f 100644
--- a/platformer.js
+++ b/platformer.js
@@ -56,8 +56,8 @@
       ACCEL    = 1/2,     // default take 1/2 second to reach maxdx (horizontal acceleration)
       FRICTION = 1/6,     // default take 1/6 second to stop from maxdx (horizontal friction)
       IMPULSE  = 1500,    // default player jump impulse
-      COLOR    = { BLACK: '#000000', YELLOW: '#ECD078', BRICK: '#D95B43', PINK: '#C02942', PURPLE: '#542437', GREY: '#333', SLATE: '#53777A', GOLD: 'gold' },
-      COLORS   = [ COLOR.YELLOW, COLOR.BRICK, COLOR.PINK, COLOR.PURPLE, COLOR.GREY ],
+      COLOR    = { BLACK: '#000000', YELLOW: '#ECD078', BRICK: '#D95B43', PINK: '#C02942', PURPLE: '#542437', GREY: '#333', SLATE: '#53777A', GOLD: 'gold', RED: 'red' },
+      COLORS   = [ COLOR.YELLOW, COLOR.BRICK, COLOR.PINK, COLOR.PURPLE, COLOR.GREY, COLOR.RED ],
       KEY      = { SPACE: 32, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40 };
       
   var fps      = 60,
@@ -66,9 +66,15 @@
       ctx      = canvas.getContext('2d'),
       width    = canvas.width  = MAP.tw * TILE,
       height   = canvas.height = MAP.th * TILE,
+      play = false,
+      dead = false,
+      level = 1,
+      max_level = 2,
+      live = 3,
       player   = {},
       monsters = [],
       treasure = [],
+      lava     = [], //My Update
       cells    = [];
   
   var t2p      = function(t)     { return t*TILE;                  },
@@ -88,6 +94,13 @@
       case KEY.SPACE: player.jump  = down; ev.preventDefault(); return false;
     }
   }
+
+  function reset(){
+    player   = {},
+    monsters = [],
+    treasure = [],
+    cells    = [];
+  }
   
   function update(dt) {
     updatePlayer(dt);
@@ -99,6 +112,15 @@
     updateEntity(player, dt);
   }
 
+  function updateMap(){
+    //if (live != 0){ //My Update
+      get(`level${level}.json`, function(req) {
+        setup(JSON.parse(req.responseText));
+        frame();
+      });
+    //}
+  }
+
   function updateMonsters(dt) {
     var n, max;
     for(n = 0, max = monsters.length ; n < max ; n++)
@@ -135,11 +157,51 @@
     player.x = player.start.x;
     player.y = player.start.y;
     player.dx = player.dy = 0;
+    live--;
+    gameOver();
+  }
+
+  function levelClear(){
+    if (player.collected == treasure.length && level < max_level){
+      reset();
+      level++;
+      updateMap();
+    } else {
+      winner();
+    }
   }
 
   function collectTreasure(t) {
     player.collected++;
     t.collected = true;
+
+    levelClear();
+
+    //setTimeout(function(){
+    //  nextSequence()
+    //}, 1000);
+    
+  }
+
+  function gameOver(){
+    if (live <= 0){
+      dead = true
+      $("#display").css("display", "flex");
+      $("#canvas").css("display", "none"); 
+      $("#display h1").html("Game Over");
+      $("#start").html("Restart");
+    }
+  }
+
+  function winner(){
+    if (player.collected == treasure.length && level == max_level){
+      dead = true
+      player = {};
+      $("#display").css("display", "flex");
+      $("#canvas").css("display", "none"); 
+      $("#display h1").html("Winner");
+      $("#start").html("Restart");
+    }
   }
 
   function updateEntity(entity, dt) {
@@ -247,6 +309,7 @@
     renderTreasure(ctx, frame);
     renderPlayer(ctx, dt);
     renderMonsters(ctx, dt);
+    renderLava(ctx, frame)  //My Update
   }
 
   function renderMap(ctx) {
@@ -268,13 +331,17 @@
 
     var n, max;
 
+    ctx.fillStyle = COLOR.RED;
+    for(n = 0, max = live ; n < max ; n++)
+      ctx.fillRect(t2p(2 + n), t2p(2), TILE/2, TILE/2);
+
     ctx.fillStyle = COLOR.GOLD;
     for(n = 0, max = player.collected ; n < max ; n++)
-      ctx.fillRect(t2p(2 + n), t2p(2), TILE/2, TILE/2);
+      ctx.fillRect(t2p(2 + n), t2p(3), TILE/2, TILE/2);
 
     ctx.fillStyle = COLOR.SLATE;
     for(n = 0, max = player.killed ; n < max ; n++)
-      ctx.fillRect(t2p(2 + n), t2p(3), TILE/2, TILE/2);
+      ctx.fillRect(t2p(2 + n), t2p(4), TILE/2, TILE/2);
   }
 
   function renderMonsters(ctx, dt) {
@@ -287,6 +354,24 @@
     }
   }
 
+  //My Update
+  function renderLava(ctx, frame){
+    ctx.fillStyle   = COLOR.GOLD;
+    ctx.globalAlpha = 0.25 + tweenTreasure(frame, 60);
+    var n, max, l;
+    for(n = 0, max = lava.length ; n < max ; n++) {
+      l = lava[n];
+      if (overlap(player.x, player.y, TILE, TILE, monster.x, monster.y, TILE, TILE)) {
+        killPlayer(player);
+    }
+    }
+    ctx.globalAlpha = 1;
+
+    /*if (overlap(player.x, player.y, TILE, TILE, monster.x, monster.y, TILE, TILE)) {
+          killPlayer(player);
+      }*/
+  }
+
   function renderTreasure(ctx, frame) {
     ctx.fillStyle   = COLOR.GOLD;
     ctx.globalAlpha = 0.25 + tweenTreasure(frame, 60);
@@ -321,6 +406,7 @@
       case "player"   : player = entity; break;
       case "monster"  : monsters.push(entity); break;
       case "treasure" : treasure.push(entity); break;
+      case "lava"     : lava.push(entity); break;  //My Update
       }
     }
 
@@ -333,6 +419,8 @@
     entity.y        = obj.y;
     entity.dx       = 0;
     entity.dy       = 0;
+    entity.width    = obj.width;  //My Update
+    entity.height   = obj.height; //My Update
     entity.gravity  = METER * (obj.properties.gravity || GRAVITY);
     entity.maxdx    = METER * (obj.properties.maxdx   || MAXDX);
     entity.maxdy    = METER * (obj.properties.maxdy   || MAXDY);
@@ -342,6 +430,7 @@
     entity.monster  = obj.type == "monster";
     entity.player   = obj.type == "player";
     entity.treasure = obj.type == "treasure";
+    entity.lava     = obj.type == "lava"; //My Update
     entity.left     = obj.properties.left;
     entity.right    = obj.properties.right;
     entity.start    = { x: obj.x, y: obj.y }
@@ -358,27 +447,80 @@
       fpsmeter = new FPSMeter({ decimals: 0, graph: true, theme: 'dark', left: '5px' });
   
   function frame() {
-    fpsmeter.tickStart();
-    now = timestamp();
-    dt = dt + Math.min(1, (now - last) / 1000);
-    while(dt > step) {
-      dt = dt - step;
-      update(step);
-    }
-    render(ctx, counter, dt);
-    last = now;
-    counter++;
-    fpsmeter.tick();
-    requestAnimationFrame(frame, canvas);
+    //if (live != 0){
+      fpsmeter.tickStart();
+      now = timestamp();
+      dt = dt + Math.min(1, (now - last) / 1000);
+      while(dt > step) {
+        dt = dt - step;
+        update(step);
+      }
+      render(ctx, counter, dt);
+      last = now;
+      counter++;
+      fpsmeter.tick();
+      requestAnimationFrame(frame, canvas);
+    //}
+  }
+
+  function restart(){
+    live = 3;
+    level = 1;
+    player   = {};
+    monsters = [];
+    treasure = [];
+    lava     = []; //My Update
+    cells    = [];
+    get(`level${level}.json`, function(req) {
+      setup(JSON.parse(req.responseText));
+    });
   }
   
   document.addEventListener('keydown', function(ev) { return onkey(ev, ev.keyCode, true);  }, false);
   document.addEventListener('keyup',   function(ev) { return onkey(ev, ev.keyCode, false); }, false);
 
-  get("level.json", function(req) {
-    setup(JSON.parse(req.responseText));
-    frame();
-  });
+  //canvas.style.backgroundColor = "blue";
+
+  $("#start").on("click", function(){
+    level = 1;
+    $("#display").css("display", "none");
+    $("#canvas").css("display", "inline-block");
+    if (!play && !dead){
+      play = true
+      setTimeout(function(){
+        updateMap();
+      }, 100)
+    } else if (play && dead){
+      live = 3;
+      dead = false;
+      restart();
+    }
+  })
+
+  $("#menuBTN").on("click", function(){
+    if (play && !dead){
+      $("#display").css("display", "flex");
+      $("#canvas").css("display", "none"); 
+      $("#display h1").html("Tiny Platformer Game")
+      $("#start").html("Restart");
+    }
+
+  })
+
+  $("#restart").on("click", function(){
+
+    var game = $("#canvas").css("display"); 
+    if (game === "none" && play){
+      $("#display").css("display", "none");
+      $("#canvas").css("display", "inline-block");
+    }
+    if (play){
+      restart();
+    }
+  })
 
 })();
 
+
+
+
diff --git a/tiles.png b/tiles.png
old mode 100755
new mode 100644
diff --git a/title_img.png b/title_img.png
new file mode 100644
index 0000000..78c66f9
Binary files /dev/null and b/title_img.png differ