Added start window

nishaYO · Mar 4, 2023 · 4768e2f · 4768e2f
1 parent a35d397
commit 4768e2f
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 5 deletions.
diff --git a/escapeballsdemo.mp4 b/escapeballsdemo.mp4
diff --git a/game.html b/game.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Escape The Balls</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+
+  <body>
+    <h1>Reach the finish line</h1>
+    <canvas></canvas>
+    <p id="output" class="hidden"><button id="replay" class="hidden">REPLAY</button></p>
+    <script src="game.js"></script>
+  </body>
+</html>
diff --git a/main.js → game.js b/main.js → game.js
diff --git a/index.html b/index.html
@@ -4,13 +4,14 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <title>Escape The Balls</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="start.css">
   </head>
 
   <body>
-    <h1>Reach the finish line</h1>
-    <canvas></canvas>
-    <p id="output" class="hidden"><button id="replay" class="hidden">REPLAY</button></p>
-    <script src="main.js"></script>
+    <h1>ESCAPE THE BALLS</h1>
+    <h2>DEMO</h2>
+     <video src="escapeballsdemo.mp4" autoplay width="600px" loop controls muted></video><br>
+     <button>START</button>
+     <script src="index.js"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,4 @@
+const startbtn = document.querySelector('button');
+startbtn.addEventListener('click', ()=>{
+    location.href = "game.html";
+})
diff --git a/start.css b/start.css
@@ -0,0 +1,28 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: rgb(221, 216, 216);
+}
+
+h1,
+h2 {
+  margin: 40px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: rgb(85, 200, 85);
+  border-radius: 5px;
+  box-shadow: 2px 2px 4px rgb(147, 138, 138);
+  font-size: 25px;
+  margin: 20px;
+}