create menu page

GDSC-IIIT-Kalyani · Oct 20, 2022 · 2436175 · 2436175
1 parent 0afba12
commit 2436175
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 1 deletion.
diff --git a/Assets/wasd.svg b/Assets/wasd.svg
diff --git a/index.html b/index.html
@@ -10,6 +10,22 @@
 
 <body>
     <canvas id = "canvasbg"></canvas>
+    <div id="start">
+        <idv class="container">
+            <h1>Doggo-Run</h1>
+            <div class="intruction" style="display: flex; 
+                                            flex-direction: row; flex-wrap: wrap;
+                                            justify-content: center;
+                                            align-items: center;
+                                            margin: 2em 0;">
+                <img src="./Assets/wasd.svg">
+                <p>
+                    Use S W A D keys to move the main character.
+                </p>
+            </div>
+            <a href="#" onclick="startGame()" class="button">Start Game</a>
+        </idv>
+    </div>
     <script src = "script.js"></script>
 </body>
 

diff --git a/script.js b/script.js
@@ -11,6 +11,7 @@ let  enemies = []
 //cage
 const cageImage = new Image();
 cageImage.src = './Assets/cage.png'
+
 //player 
 
 class Player{
@@ -49,6 +50,7 @@ class Player{
         this.n = 6;
 
     }
+
     drawPlayer (){
         ctx.fillStyle = 'black'
         ctx.drawImage(this.image,
@@ -61,6 +63,7 @@ class Player{
             this.width, 
             this.height)
     }
+
     updatePlayer(){
         this.position.y += this.velocity.y
         if (this.gameframe%this.staggeredframe ==0){
@@ -97,6 +100,7 @@ class Player{
     }
 
 }
+
 const player =  new Player()
 
 //enemydw
@@ -267,3 +271,12 @@ window.addEventListener('keydown', ({keyCode}) =>{
         case 32: //space      
     }
 })
+
+//start game
+function startGame() {
+    let startDiv = document.getElementById("start");
+    let gameCanvas = document.getElementById("canvasbg");
+
+    startDiv.style.display = "none";
+    gameCanvas.style.display = "block";
+}
diff --git a/style.css b/style.css
@@ -1,13 +1,93 @@
+@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Alfa+Slab+One&family=Fredericka+the+Great&family=JetBrains+Mono:wght@500&family=Nabla&family=Poiret+One&display=swap');
+
 body{
     background-color: black;
 }
-#canvasbg{
+#canvasbg {
     position: absolute;
     height : 700px;
     width: 1200px;
     border: 3px solid white;
     top:50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    z-index: -1;
+}
+
+#start {
+    height: 60vh;
+    width: 50%;    
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center; 
+    margin: 9% 0 10% 24.5%;
+    background: rgb(51 64 86 / 80%);
+    border: 0.15em solid #fff; 
+}
+
+#start .container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-content: center;
+    align-items: center;
+}
+
+#start .container h1 {
+    color: #fff;
+    font-family: 'Fredericka the Great', cursive;
+    font-size: 4em;
+    margin: 0 0 0.8em 0;
+}
 
+#start .container .instruction {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    margin: 2em 0;
 }
+
+#start .container img {
+    height: 20%;
+    width: 20%;
+}
+
+#start .container p {
+    color: #fff;
+    font-family: 'Roboto',sans-serif;
+    font-size: 1em;
+    font-weight: 100;
+    margin-right: -2em;
+    margin-left: 5%;
+}
+
+#start .container a.button {
+    display:inline-block;
+    padding:0.4em 1.5em;
+    border:0.1em solid #FFFFFF;
+    margin:1.5em 0.3em 0.3em 0;
+    border-radius:0.12em;
+    box-sizing: border-box;
+    text-decoration:none;
+    font-family:'Roboto',sans-serif;
+    font-size: 1.5em;
+    font-weight:500;
+    color:#FFFFFF;
+    text-align:center;
+    transition: all 0.2s;
+    }
+
+#start .container a.button:hover{
+    color:#000000 !important;
+    background-color:#FFFFFF;
+    }
+
+@media all and (max-width:30em){
+    a.button{
+    display:block;
+    margin:0.4em auto;
+    }
+}