got the bottom logic as well

script.js

@@ -1,24 +1,77 @@
-let canvas = document.querySelector('canvas')
-canvas.style.backgroundColor = "#302c2c"
+let canvas = document.querySelector("canvas");
+canvas.style.backgroundColor = "#302c2c";
 
 // getting the paintbrush
-let ctx = canvas.getContext('2d')
+let ctx = canvas.getContext("2d");
 
 // The DOM of the start and the restart buttons
-let startBtn = document.querySelector('#start')
-let restartBtn = document.querySelector('#restart')
+let startBtn = document.querySelector("#start");
+let restartBtn = document.querySelector("#restart");
 
+let circleX = 150,
+  circleY = 100,
+  radius = 20;
+let intervalId = 0;
+let gameOver = false;
+let incrX = 2;
+let incrY = 2;
 
+function drawCircle() {
+  ctx.beginPath();
+  ctx.arc(circleX, circleY, 20, 0, 2 * Math.PI);
+  ctx.fillStyle = "#a6efff";
+  ctx.fill();
+  ctx.closePath();
+}
 
- //Everything begins here
-window.addEventListener('load', () => {
-
-
-    startBtn.addEventListener('click', () => {
-        // do something when the user clicks the start button
-    })
+// recursion
+function animation() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-    restartBtn.addEventListener('click', () => {
-        // do something when the user clicks the restart button
-    })
-})
+  drawCircle();
+  circleX = circleX + incrX;
+  circleY = circleY + incrY;
+
+  //collision
+  if (circleX + radius > canvas.width) {
+    incrX = -incrX;
+  }
+
+  if (circleY + radius > canvas.height) {
+    incrY = -incrY;
+  }
+
+  if (circleX + radius < radius) {
+    incrX++;
+  }
+
+  if (circleY + radius < radius) {
+    incrY++;
+  }
+
+  intervalId = requestAnimationFrame(animation);
+  if (gameOver) {
+    cancelAnimationFrame(intervalId);
+  }
+}
+
+function play() {
+  startBtn.style.display = "none";
+  canvas.style.display = "block";
+  animation();
+}
+
+//Everything begins here
+window.addEventListener("load", () => {
+  canvas.style.display = "none";
+  restartBtn.style.display = "none";
+  play();
+
+  startBtn.addEventListener("click", () => {
+    play();
+  });
+
+  restartBtn.addEventListener("click", () => {
+    // do something when the user clicks the restart button
+  });
+});