From 243617527e89502bf5330eaa21d2f1608e1fd985 Mon Sep 17 00:00:00 2001 From: OindrilaDas27 Date: Fri, 21 Oct 2022 00:25:15 +0530 Subject: [PATCH] create menu page --- Assets/wasd.svg | 10 ++++++ index.html | 16 ++++++++++ script.js | 13 ++++++++ style.css | 82 ++++++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 120 insertions(+), 1 deletion(-) create mode 100644 Assets/wasd.svg diff --git a/Assets/wasd.svg b/Assets/wasd.svg new file mode 100644 index 0000000..e43248f --- /dev/null +++ b/Assets/wasd.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/index.html b/index.html index 937ada7..887807c 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,22 @@ +
+ +

Doggo-Run

+
+ +

+ Use S W A D keys to move the main character. +

+
+ Start Game + +
diff --git a/script.js b/script.js index 90036db..d2d08b9 100644 --- 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"; +} \ No newline at end of file diff --git a/style.css b/style.css index 74d8ca8..a704fb8 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,9 @@ +@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; @@ -9,5 +11,83 @@ body{ 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; + } +} \ No newline at end of file