diff --git a/docs/demo/fort/fort.js b/docs/demo/fort/fort.js
index 4c4e00a..cd7d844 100644
--- a/docs/demo/fort/fort.js
+++ b/docs/demo/fort/fort.js
@@ -3,6 +3,12 @@ let loose = false;
 let greenSpots = [];
 let redSpots = [];
 
+const defaultDecayInterval = 60;
+let decayInterval = defaultDecayInterval;
+
+const defaultPlaceInterval = 60;
+let placeInterval = defaultDecayInterval;
+
 function placeGreen() {
   if (greenSpots.length > score) {
     return;
@@ -23,7 +29,7 @@ function placeGreen() {
         continue placeGreenLoop;
       }
     }
-    const randomHealth = randomRange(15, 50);
+    const randomHealth = randomRange(1, 15);
     greencoordinates = { column: random.column, row: random.row, health: randomHealth };
   }
   greenSpots.push(greencoordinates);
@@ -49,7 +55,7 @@ function placeRed() {
         continue placeRedLoop;
       }
     }
-    const randomHealth = randomRange(25, 50);
+    const randomHealth = randomRange(2, 20);
     redcoordinates = { column: random.column, row: random.row, health: randomHealth };
   }
   redSpots.push(redcoordinates);
@@ -90,7 +96,7 @@ function init() {
   placeRed();
 }
 
-function update() {
+function update(delta) {
   if (loose === true) {
     // Crashed!
     // Flush the screen.
@@ -103,6 +109,9 @@ function update() {
     greenSpots = [];
     redSpots = [];
 
+    decayInterval = defaultDecayInterval;
+    placeInterval = defaultPlaceInterval;
+
     placeGreen();
     placeRed();
 
@@ -111,18 +120,27 @@ function update() {
     return;
   }
 
-  // Randomly place a counter.
-  let actions = [
-    placeGreen,
-    placeRed,
-  ];
-  shuffle(actions);
-  actions[0]();
+  decayInterval -= (delta * 60);
 
-  decreaseHealth();
+  if (decayInterval <= 0) {
+    decreaseHealth();
+    decayInterval = Math.max(5, defaultDecayInterval - score);
+  }
+
+  placeInterval -= (1 + delta);
+  if (placeInterval <= 0) {
+    // Randomly place a counter.
+    let actions = [
+      placeGreen,
+      placeRed,
+    ];
+    shuffle(actions);
+    actions[0]();
+    placeInterval = Math.max(5, defaultPlaceInterval - score);
+  }
 }
 
-function draw() {
+function draw(delta) {
   cls();
   for (let i = 0; i < gridMaxX; i += 1) {
     for (let j = 0; j < gridMaxY; j += 1) {
diff --git a/docs/demo/forward/forward.js b/docs/demo/forward/forward.js
index 6c609ef..a431868 100644
--- a/docs/demo/forward/forward.js
+++ b/docs/demo/forward/forward.js
@@ -1,7 +1,8 @@
 // Set up variables for the forward game.
 let loose = false;
 let playercoordinates = {};
-let wallTimeout;
+const defaultMovementInterval = 60;
+let moveInterval = defaultMovementInterval;
 
 const shapes = [];
 shapes[0] = [
@@ -34,7 +35,6 @@ let wall = [];
 let wallCoordinates;
 
 function moveWall() {
-  wallTimeout = setTimeout(moveWall, Math.max(1000 - (score * 100), 250));
   if (wallIsActive) {
     if (wallCoordinates === -1) {
       wallIsActive = false;
@@ -52,9 +52,6 @@ function moveWall() {
 
 function placePlayer() {
   playercoordinates = { column: 0, row: 2 };
-  if (typeof wallTimeout !== 'number') {
-    wallTimeout = setTimeout(moveWall, 1000);
-  }
 }
 
 function userActionKeyPress(direction) {
@@ -69,6 +66,9 @@ function userActionKeyPress(direction) {
         playercoordinates.row += 1;
       }
       break;
+    default:
+      // Do nothing.
+      break;
   }
 }
 
@@ -76,7 +76,7 @@ function init() {
   placePlayer();
 }
 
-function update() {
+function update(delta) {
   if (loose === true) {
     // Crashed!
     // Flush the screen.
@@ -85,6 +85,12 @@ function update() {
     displayScore(score);
     // Reset some variables.
     score = 0;
+    moveInterval = defaultMovementInterval;
+
+    wallIsActive = false;
+    wall = [];
+    wallCoordinates = 0;
+
     // Set the game up again.
     placePlayer();
 
@@ -93,13 +99,21 @@ function update() {
     return;
   }
 
+  moveInterval -= (delta * 60);
+
+  if (moveInterval <= 0) {
+    moveWall();
+    moveInterval = Math.max(5, defaultMovementInterval - score);
+  }
+
+  // Check loose state.
   for (let i = 0; i < gridMaxX; i += 1) {
     for (let j = 0; j < gridMaxY; j += 1) {
       const element = grid[i][j];
       if (element.column === wallCoordinates) {
         for (let wallpart = 0; wallpart < wall.length; wallpart += 1) {
           if (wall[wallpart] === 1 && element.row === wallpart) {
-            if (element.column === playercoordinates.column 
+            if (element.column === playercoordinates.column
                 && element.row === playercoordinates.row) {
               loose = true;
               return;
@@ -111,7 +125,7 @@ function update() {
   }
 }
 
-function draw() {
+function draw(delta) {
   cls();
 
   for (let i = 0; i < gridMaxX; i += 1) {
diff --git a/docs/demo/forward/index.html b/docs/demo/forward/index.html
index f79af07..5edc38a 100644
--- a/docs/demo/forward/index.html
+++ b/docs/demo/forward/index.html
@@ -32,7 +32,7 @@ <h1>Four Demo: Forward</h1>
       </div>
 
     <script src="forward.js"></script>
-    <p>An implementation of flappy bird. Use the up and down arrows to move your box up and down and avoid the walls.</p>
+    <p>An implementation of flappy bird, without the gravity. Use the up and down arrows to move your box up and down and avoid the walls.</p>
     </main>
     <footer>
       <p>Four was created by <a href="https://www.hashbangcode.com">#! code</a> and is licensed under the MIT license.<br>
diff --git a/docs/demo/forx/forx.js b/docs/demo/forx/forx.js
index 56734d6..af664ef 100644
--- a/docs/demo/forx/forx.js
+++ b/docs/demo/forx/forx.js
@@ -1,9 +1,10 @@
 // Set up variables for the fox game.
 let loose = false;
-let foxtimeout;
 let playercoordinates = {};
 let foodcoordinates = {};
 let foxcoordinates = {};
+const foxMovementInterval = 90;
+let moveInterval = foxMovementInterval;
 
 function placeFood() {
   foodcoordinates = {};
@@ -54,7 +55,6 @@ function placePlayer() {
 }
 
 function moveFox() {
-  foxtimeout = setTimeout(moveFox, Math.max(2000 - (score * 100), 250));
   let movement = [
     function down(fox, player) {
       if (fox.row < player.row) {
@@ -124,9 +124,6 @@ function userActionKeyPress(direction) {
       // Do nothing.
       break;
   }
-  if (typeof foxtimeout !== 'number') {
-    foxtimeout = setTimeout(moveFox, 2000);
-  }
 }
 
 function init() {
@@ -138,9 +135,6 @@ function init() {
 function update() {
   if (loose === true) {
     // Crashed!
-    // Reset the fox timeout.
-    clearTimeout(foxtimeout);
-    foxtimeout = undefined;
 
     // Flush the screen.
     cls();
@@ -148,6 +142,7 @@ function update() {
     displayScore(score);
     // Reset some variables.
     score = 0;
+    moveInterval = foxMovementInterval;
 
     placePlayer();
     placeFood();
@@ -158,6 +153,13 @@ function update() {
     return;
   }
 
+  moveInterval -= (delta * 60);
+
+  if (moveInterval <= 0) {
+    moveFox();
+    moveInterval = Math.max(5, foxMovementInterval - (score * 2));
+  }
+
   if (foxcoordinates.column === playercoordinates.column
     && foxcoordinates.row === playercoordinates.row) {
     loose = true;
diff --git a/docs/demo/fourdelance/fourdelance.js b/docs/demo/fourdelance/fourdelance.js
index c7ea0cf..5e82554 100644
--- a/docs/demo/fourdelance/fourdelance.js
+++ b/docs/demo/fourdelance/fourdelance.js
@@ -2,9 +2,11 @@
 let loose = false;
 let snake = [];
 let foodcoordinates = {};
-let snakeMoveTimeout;
 let snakeDirection;
 
+const defaultMovementInterval = 60;
+let moveInterval = defaultMovementInterval;
+
 const SNAKE_UP = 'up';
 const SNAKE_DOWN = 'down';
 const SNAKE_LEFT = 'left';
@@ -30,16 +32,13 @@ function placeFood() {
 }
 
 function moveSnake() {
-  snakeMoveTimeout = setTimeout(moveSnake, Math.max(2000 - (score * 100), 250));
-
   const head = structuredClone(snake[0]);
 
   switch (snakeDirection) {
     case SNAKE_LEFT:
       if (snake[0].column >= 1) {
         head.column -= 1;
-      }
-      else {
+      } else {
         loose = true;
       }
       break;
@@ -96,9 +95,6 @@ function placeSnake() {
 
     snake.push({ column: random.column, row: random.row });
   }
-  if (typeof snakeMoveTimeout !== 'number') {
-    snakeMoveTimeout = setTimeout(moveSnake, 100);
-  }
 }
 
 function userActionKeyPress(direction) {
@@ -122,11 +118,11 @@ function userActionKeyPress(direction) {
 }
 
 function init() {
-    placeSnake();
-    placeFood();
+  placeSnake();
+  placeFood();
 }
 
-function update() {
+function update(delta) {
   if (loose === true) {
     // We have a winner!
     // flush the screen.
@@ -137,6 +133,7 @@ function update() {
     score = 0;
     snake = [];
     snakeDirection = undefined;
+    moveInterval = defaultMovementInterval;
 
     // Reset the game grid.
     placeSnake();
@@ -145,6 +142,13 @@ function update() {
     // Turn off the win state.
     loose = false;
   }
+
+  moveInterval -= (delta * 60);
+
+  if (moveInterval <= 0) {
+    moveSnake();
+    moveInterval = Math.max(5, defaultMovementInterval - score);
+  }
 }
 
 function draw() {
diff --git a/docs/demo/index.html b/docs/demo/index.html
index e28a928..22eb76d 100644
--- a/docs/demo/index.html
+++ b/docs/demo/index.html
@@ -53,7 +53,7 @@ <h3>Four De Lance</h3>
       <a class="button" href="/four/demo/fourdelance/">See demo</a>
 
       <h3>Forward</h3>
-      <p>An implementation of flappy bird. Use the up and down arrows to move your box up and down and avoid the walls.</p>
+      <p>An implementation of flappy bird, without the gravity. Use the up and down arrows to move your box up and down and avoid the walls.</p>
       <a class="button" href="/four/demo/forward/">See demo</a>
     </main>
 
diff --git a/docs/demo/test/test.js b/docs/demo/test/test.js
index 4df31ab..92ddc1f 100644
--- a/docs/demo/test/test.js
+++ b/docs/demo/test/test.js
@@ -2,12 +2,25 @@ function init() {
   console.log('init');
 }
 
-function update() {
-  console.log('update');
+function update(delta) {
+  console.log(`update ${delta}`);
+
+  if (score === 1) {
+    displayScore(1234567890);
+    score = 0;
+  } else {
+    score = 1;
+  }
+
+  wait(2000);
 }
 
-function draw() {
-  console.log('draw');
+function draw(delta) {
+  console.log(`draw ${delta}`);
+
+  if (score === 1) {
+    return;
+  }
 
   const colours = [
     'blue',
@@ -28,6 +41,8 @@ function draw() {
     'fuchsia',
   ];
 
+  shuffle(colours);
+
   let colourCount = 0;
   for (let i = 0; i < grid.length; i += 1) {
     for (let j = 0; j < grid[i].length; j += 1) {
@@ -35,12 +50,4 @@ function draw() {
       colourCount += 1;
     }
   }
-  wait(2000);
-
-  if (score === 1) {
-    displayScore(1234567890);
-    score = 0;
-  } else {
-    score = 1;
-  }
 }
diff --git a/docs/docs/index.html b/docs/docs/index.html
index 22fde3e..c9b2ec4 100644
--- a/docs/docs/index.html
+++ b/docs/docs/index.html
@@ -79,11 +79,23 @@ <h3>Core Functions</h3>
     <h4>init()</h4>
     <p>Run once when the game is setup. You can setup any varaibles that you need for the game to work here.</p>
 
-    <h4>update()</h4>
+    <h4>update(delta)</h4>
     <p>This is called at the start of the game loop. Add your game logic here and update the elements in your game.</p>
+    
+    <p>The <code>delta</code> parameter can be used to synchronise the update calls with the current frame. Although the function is
+      called every 60th of a second there will be a small discrepency between one call and the next, which can be
+      corrected by using the delta parameter. The delta shows the difference in time between one call and the next.</p>
+
+    <p>One way to calcualte the difference between two frames is to multiply the delta value by 60.</p>
+  
+    <pre><code>interval = (delta * 60);</code></pre>
+
+    <p>Since we are running at 60 frames a second, and the delta will be a float value, the caluclated value
+    1, plus the difference between one frame and the next.</p>
 
-    <h4>draw()</h4>
+    <h4>draw(delta)</h4>
     <p>Add your drawing functions here. This is where you go through your game logic and call <code>fillBox()</code> function to draw items in your game grid.</p>
+    <p>The delta parameter works in the same way as the parameter in the update function.</p>
 
     <p>Note that there is nothing <em>technically</em> stopping you from writing drawing functions in the <code>update()</code> function, but the idea is that you separate concerns.</p>
 
@@ -147,6 +159,14 @@ <h4>userActionKeyPress(direction)</h4>
 
   </main>
 
+  <h4>addClickListener()/removeClickListener()</h4>
+  <p>Add or remove the click listener event from the canvas. Using these methods
+    we can enable or disable the mouse interactivity.</p>
+
+  <h4>addKeyListener()/removeKeyListener()</h4>
+  <p>Add or remove the key listener event from the canvas. Using these methods
+    we can enable or disable the keyboard interactivity.</p>
+
   <footer>
     <p>Four was created by <a href="https://www.hashbangcode.com">#! code</a> and is licensed under the MIT
     license.<br>
diff --git a/four.js b/four.js
index 293ee8c..e80aa8c 100644
--- a/four.js
+++ b/four.js
@@ -23,6 +23,11 @@ let score = 0;
 // The canvas context object.
 let ctx;
 
+// Set up delta times.
+let lastUpdate = Date.now();
+const updateLoopsPerSecond = 1000 / 60;
+let delta = 0;
+
 // Constants for detecting directions.
 const KEYPRESS_UP = 'up';
 const KEYPRESS_DOWN = 'down';
@@ -153,10 +158,13 @@ function flashGrid(colour) {
   ctx.beginPath();
   ctx.fillStyle = colour;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
-  // After 50 milliseconds, clear the screen and re-draw the grid.
+  // After some milliseconds, clear the screen and re-draw the grid.
+  clearInterval(gameloopId);
   setTimeout(() => {
     cls();
-  }, 50);
+    lastUpdate = Date.now();
+    gameloopId = setInterval(gameLoop, updateLoopsPerSecond);
+  }, 250);
 }
 
 // Handle the canvas click event and pass onto a custom handle function
@@ -186,11 +194,16 @@ function canvasClick(event) {
   return false;
 }
 
-// Add event listener for `click` events.
+// Add event listener for mouse click events.
 function addClickListener() {
   canvas.addEventListener('click', canvasClick, false);
 }
 
+// Remove the event listener for mouse click events.
+function removeClickListener() {
+  canvas.removeEventListener('click', canvasClick, false);
+}
+
 // Convert the keypress into directions and pass them upstream.
 function keyPress(event) {
   if (typeof userActionKeyPress !== 'function') {
@@ -261,14 +274,16 @@ function randomElement() {
   return grid[randomX][randomY];
 }
 
-// Animate the score.
+// Internal function used to animate the score.
 function animateScore() {
   cls();
 
   if (frameCounter >= frames.length) {
+    // Finished animating.
     frames = [];
     flashGrid('black');
     addKeyListener();
+    addClickListener();
     return;
   }
 
@@ -289,6 +304,9 @@ function animateScore() {
 // Display the score in the game grid.
 function displayScore(passedScore) {
   removeKeyListener();
+  removeClickListener();
+
+  // Function to find the colomn from the grid.
   const arrayColumn = (arr, n) => arr.map((x) => x[n]);
 
   // Convert score into a string and add start and end buffers.
@@ -325,9 +343,14 @@ function displayScore(passedScore) {
 
 // The game loop, where we define our custom functions.
 function gameLoop() {
+  // Frames having length means that our animation is running.
   if (frames.length === 0) {
-    draw();
-    update();
+    let now = Date.now();
+    delta = (now - lastUpdate) / 1000;
+    lastUpdate = now;
+
+    draw(delta);
+    update(delta);
   }
 
   drawGrid();
@@ -336,7 +359,7 @@ function gameLoop() {
 // Initialise the canvas.
 function initCanvas(id) {
   canvas = document.getElementById(id);
-  
+
   canvas.style.cursor = 'crosshair';
   canvas.style.background = 'white';
   canvas.style.border = '2px solid black';
@@ -358,13 +381,17 @@ function initCanvas(id) {
     init();
   }
 
-  gameloopId = setInterval(gameLoop, 100);
+  gameloopId = setInterval(gameLoop, updateLoopsPerSecond);
 }
 
 // Pause the game loop for a number of seconds and restart it.
 function wait(seconds) {
   clearInterval(gameloopId);
-  gameloopId = setInterval(gameLoop, seconds);
+
+  setTimeout(() => {
+    lastUpdate = Date.now();
+    gameloopId = setInterval(gameLoop, updateLoopsPerSecond);
+  }, seconds);
 }
 
 // Get the canvas context object of the game grid. Used for testing.