diff --git a/run-tanks b/run-tanks
index 062b38d..5ad2102 100755
--- a/run-tanks
+++ b/run-tanks
@@ -36,6 +36,9 @@ cat <<EOF >$fn
 <html>
   <head>
     <title>Tanks Round $next</title>
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/ui-lightness/jquery-ui.css" type="text/css">
+    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
     <script type="application/javascript" src="tanks.js"></script>
     <link rel="stylesheet" href="style.css" type="text/css">
     <script type="application/javascript">
diff --git a/tanks.js b/tanks.js
index e44d880..05b2b15 100644
--- a/tanks.js
+++ b/tanks.js
@@ -178,10 +178,22 @@ function Tank(ctx, width, height, color, sensors) {
     }
 }
 
+var loop_id;
+var updateFunc = null;
+function togglePlayback() {
+    console.log($("#playing").prop("checked"));
+    if ($("#playing").prop("checked")) {
+        loop_id = setInterval(updateFunc, 66);
+    } else {
+        clearInterval(loop_id);
+        loop_id = null;
+    }
+    $("#pauselabel").toggleClass("ui-icon-play ui-icon-pause");
+}
+
 function start(id, game) {
     var canvas = document.getElementById(id);
     var ctx = canvas.getContext('2d');
-    var loop_id;
 
     canvas.width = game[0][0];
     canvas.height = game[0][1];
@@ -238,10 +250,16 @@ function start(id, game) {
         }
     }
 
+    updateFunc = update;
     loop_id = setInterval(update, 66);
     //loop_id = setInterval(update, 400);
     if (fps) {
         setInterval(update_fps, 1000);
     }
+
+    if (id === "battlefield") {
+        $("#game_box").append('<p><input type="checkbox" checked id="playing" onclick="togglePlayback();"><label for="playing"><span class="ui-icon ui-icon-pause" id="pauselabel"></class></label></p>');
+        $('#playing').button();
+    }
 }
 
