Finalizing Mode Aspects

Casual Mode.html

@@ -51,11 +51,6 @@ <h1 id="errorMessage">This Game Is Not Supported In Portrait Screen</h1>
         <p id="scoreAllTime">Best Score : </p>
     </div>
 
-    <!--    NOT USED HERE   -->
-    <div class="messageBoard">
-        <p id="messageDistance"></p>
-    </div>
-
     <div class="alertBox" id="alertBox">
         <h1 id="result"></h1>
         <h3 id="praise"></h3>

HOW TO PLAY.md

@@ -0,0 +1,80 @@
+This Is Racing Car game by author INJ KRISH. 
+
+This Game was made in six month for education and learning purpose. 
+
+This Game is also user friendly and liked by users. 
+
+Anyone Can Access This Game and also can share, modify, clone etc... 
+
+
+---------------------
+About Mode : 
+---------------------
+
+Casual Mode    : It Is Practice Mode For Practicing Game 
+                 For Training Of This Game
+
+Racing Mode    : It Gives Feeling Of Playing in F1 Racing Car Match
+                 Can Expireince F1 Racing Car in virtual Space
+
+Duration Mode  : Here We have to collect Increaser Blocks That Increase Our Duration and 
+                 Try To Achieve Best Score 
+
+Infinite Drive : For Relaxing and Playing Game at a time and 
+                 Also Playing As Long Drive ( It Does not Have End ) 
+
+--------------
+HOW TO PLAY :
+---------------
+
+'N' Key For Nitro : For Speed Boost
+
+' ' Key For Redoing Previous Move One More Time
+
+
+At Top Left Side there are three buttons that are 
+
+
+First  : Back           : For Be Redirected to Selecting Car Models(Skin) and Modes
+
+Second : Play / Pause   : For Pause or Play Game as per Last Move
+
+Third  : Music On / Off : For Handling Music Of Game
+
+
+At Bottom Left Side there are two buttons that are 
+
+First  : Accecelerator : For Increasing Speed Of Car
+
+Second : Brake         : For Avoiding Car Blast For 1 second
+
+
+At Top Right Side there are three score that are 
+
+First  : Score                 : It shows Current Score Of The Game 
+
+Second : Sessions' Best Score  : It Shows Best Score Of This Session
+
+Third  : All Time Best Score   : It Shows Best Score Of All Time 
+
+
+********** For Duration Mode Only ********** 
+
+
+Fourth : Time Stamp and Time Message Is there 
+
+=> At Middle Right Side there is Message That Is Blinking and giving Message About your Gameplay
+
+At Right Bottom Side four Buttons are there that are 
+
+
+First   : Left  : For Changing Lane To Left Side  
+
+Second  : Right : For Changing Lane To Right Side
+
+Third   : Up    : For Going Up On Track and little Speed Boost
+
+Fourth  : Down  : For Going Down On Track and little Speed Decreases
+
+
+Thanks For Accessing It

README.md

@@ -1,80 +1,5 @@
-This Is Racing Car game by author INJ KRISH. 
-
-This Game was made in six month for education and learning purpose. 
-
-This Game is also user friendly and liked by users. 
-
-Anyone Can Access This Game and also can share, modify, clone etc... 
-
-
----------------------
-About Mode : 
----------------------
-
-Casual Mode    : It Is Practice Mode For Practicing Game 
-                 For Training Of This Game
-
-Racing Mode    : It Gives Feeling Of Playing in F1 Racing Car Match
-                 Can Expireince F1 Racing Car in virtual Space
-
-Duration Mode  : Here We have to collect Increaser Blocks That Increase Our Duration and 
-                 Try To Achieve Best Score 
-
-Infinite Drive : For Relaxing and Playing Game at a time and 
-                 Also Playing As Long Drive ( It Does not Have End ) 
-
---------------
-HOW TO PLAY :
----------------
-
-'N' Key For Nitro : For Speed Boost
-
-' ' Key For Redoing Previous Move One More Time
-
-
-At Top Left Side there are three buttons that are 
-
-
-First  : Back           : For Be Redirected to Selecting Car Models(Skin) and Modes
-
-Second : Play / Pause   : For Pause or Play Game as per Last Move
-
-Third  : Music On / Off : For Handling Music Of Game
-
-
-At Bottom Left Side there are two buttons that are 
-
-First  : Accecelerator : For Increasing Speed Of Car
-
-Second : Brake         : For Avoiding Car Blast For 1 second
-
-
-At Top Right Side there are three score that are 
-
-First  : Score                 : It shows Current Score Of The Game 
-
-Second : Sessions' Best Score  : It Shows Best Score Of This Session
-
-Third  : All Time Best Score   : It Shows Best Score Of All Time 
-
-
-********** For Duration Mode Only ********** 
-
-
-Fourth : Time Stamp and Time Message Is there 
-
-=> At Middle Right Side there is Message That Is Blinking and giving Message About your Gameplay
-
-At Right Bottom Side four Buttons are there that are 
-
-
-First   : Left  : For Changing Lane To Left Side  
-
-Second  : Right : For Changing Lane To Right Side
-
-Third   : Up    : For Going Up On Track and little Speed Boost
-
-Fourth  : Down  : For Going Down On Track and little Speed Decreases
-
-
-Thanks For Accessing It
+<html>
+  <body>
+    <img src="Mode Images/Car Racing.png">
+  </body>
+</html>

css/Casual Mode.css

@@ -110,7 +110,7 @@
     }
 
     .Controller {
-        margin: -20% 0% 0% 83%;
+        margin: -250px 0 0 1100px;
         height: 200px;
         width: 200px;
         z-index: 1;
@@ -145,7 +145,7 @@
     }
 
     .toolBox {
-        margin: -13% 0% 0% 3.5%;
+        margin: -200px 0 0 75px;
     }
 
     .toolBox .pedals button {
@@ -165,7 +165,7 @@
     }
 
     .menuBar {
-        margin: -37% 0% 0% 0.75%;
+        margin: -600px 0 0 50px;
         padding: 5px;
         height: 180px;
         width: 180px;
@@ -191,7 +191,7 @@
     }
 
     .scoreBoard {
-        margin: -8% 0% 0% 80%;
+        margin: -150px 0 0 1100px;
         height: 300px;
         width: 300px;
         z-index: 1;
@@ -219,7 +219,7 @@
 
     .alertBox {
         display: none;
-        margin: -30% 0% 0% 47%;
+        margin: -300px 0 0 700px;
         width: 400px;
         height: 250px;
         background: #061442;
@@ -279,7 +279,6 @@
         position: absolute;
         top: -2px;
         left: -2px;
-        z-index: -1;
         background-size: 900%;
         z-index: -1;
         width: calc(100% + 4px);
@@ -342,40 +341,65 @@
 
 }
 
-@media screen and (min-width : 750px) and (max-width : 1000px) {
+
+@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) {
     .Controller {
-        margin: -20% 0% 0% 105%;
+        margin: -300px 0 0 1100px;
+    }
+
+    .menuBar {
+        margin: -550px 0 0 50px;
     }
 
     .toolBox {
-        margin: -23% 0% 0% 10%;
+        margin: -200px 0 0 100px;
     }
 
     .scoreBoard {
-        margin: -35% 0% 0% 100%;
+        margin: 0 0 0 1100px;
     }
 
-    .messageBoard {
-        margin: -55% 0% 0% 100%;
+    .alertBox {
+        margin: -450px 0 0 700px;
+    }
+
+}
+
+@media screen and (min-width : 1001px) and (max-width : 4320px) {
+    .Controller {
+        margin: -300px 0 0 1100px;
+    }
+
+    .menuBar {
+        margin: -550px 0 0 50px;
+    }
+
+    .toolBox {
+        margin: -200px 0 0 100px;
+    }
+
+    .scoreBoard {
+        margin: 0 0 0 1100px;
     }
 
     .alertBox {
-        margin: 0% 0% 0% 75%;
+        margin: -615px 0 0 700px;
     }
 
 }
 
-@media screen and (min-width : 550px) and (max-width : 750px) {
+
+/*@media screen and (min-width : 750px) and (max-width : 1000px) {
     .Controller {
-        margin: -40% 0% 0% 120%;
+        margin: -20% 0% 0% 105%;
     }
 
     .toolBox {
         margin: -23% 0% 0% 10%;
     }
 
     .scoreBoard {
-        margin: -50% 0% 0% 120%;
+        margin: -35% 0% 0% 100%;
     }
 
     .messageBoard {
@@ -388,25 +412,25 @@
 
 }
 
-@media screen and (min-width : 350px) and (max-width : 550px) and (min-height : 250px) {
+@media screen and (min-width : 550px) and (max-width : 750px) {
     .Controller {
-        margin: -25% 0% 0% 150%;
+        margin: -40% 0% 0% 120%;
     }
 
     .toolBox {
-        margin: -50% 0% 0% 25%;
+        margin: -23% 0% 0% 10%;
     }
 
     .scoreBoard {
-        margin: -60% 0% 0% 150%;
+        margin: -50% 0% 0% 120%;
     }
 
     .messageBoard {
-        margin: -60% 0% 0% 150%;
+        margin: -55% 0% 0% 100%;
     }
 
     .alertBox {
-        margin: -50% 0% 0% 115%;
+        margin: 0% 0% 0% 75%;
     }
 
-}
+}*/