Update everything, remove jquery, add mobile controls

gamalielhere · Jan 21, 2018 · 7db6997 · 7db6997
1 parent b956cc3
commit 7db6997
Show file tree

Hide file tree

Showing 3 changed files with 349 additions and 206 deletions.
diff --git a/css/style.css b/css/style.css
@@ -11,23 +11,22 @@ body > h1 {
 /*BOARD*/
 .game {
   background-color: #3b3b62;
-  margin: 0 auto;
   display: inline-block;
-  height: 602px;
-  width: 602px;
+  height: 650px;
+  margin: 0 auto;
+  width: 650px;
 }
 
 #canvas {
-  visibility: 0;
-  border: 2px solid gray;
+  visibility: hidden;
 }
 
 .notification {
   display: none;
   background-color: black;
   color: red;
-  height: 600px;
-  width: 600px;
+  height: 650px;
+  width: 650px;
 }
 
 /*BUTTONS*/
@@ -38,9 +37,8 @@ button {
   width: 300px;
 }
 
-.buttons {
-  float: left;
-  width: 450px;
+.content {
+  margin-top: 64px;
 }
 
 .resume {
@@ -66,3 +64,25 @@ button {
 .pause {
   display: none;
 }
+
+.mobileButton {
+  display: none;
+}
+
+.mobileButtonCenter {
+  text-align: center;
+}
+
+.mobileButtonCenter button {
+  width: 70px;
+}
+
+.left--right button  {
+  margin: 0 35px;
+}
+
+@media screen and (max-width: 960px) {
+  .mobileButton {
+    display: block;
+  }
+}
diff --git a/index.html b/index.html
@@ -6,29 +6,42 @@
       <link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
       <link rel="stylesheet" href="css/style.css">
       <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css"/>
-      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
       <script src="https://cdn.firebase.com/js/client/2.4.0/firebase.js"></script>
     </head>
     <body>
-      <div class="buttons">
-        <button class="playAgain"> PLAY AGAIN!</button>
-        <button class="home">HOME</button>
-        <button class="reset">RESET</button>
-        <button class="start">START</button>
-        <button class="pause">PAUSE</button>
-        <button class="resume">RESUME</button>
-        <h1>HIGHEST SCORE: <span id="highScore"></span> </h1>
-      </div>
-      <h1>SNAKE</h1>
-      <div class="game">
-        <canvas id="canvas" width="600" height="600">
-          YOUR BROWSER DOESN'T SUPPORT CANVAS YET
-        </canvas>
-        <h1><span class="currentScore">Your score: 0</span></h1>
-      </div>
-      <div class="notification">
-        <h1>YOU DIED!</h1>
-        <h3 class="score">TOTAL SCORE: </h3>
+      <div class="content">
+        <h1>SNAKE</h1>
+        <div class="game">
+          <canvas id="canvas" width="650" height="650">
+            YOUR BROWSER DOESN'T SUPPORT CANVAS YET
+          </canvas>
+        </div>
+        <div class="notification">
+          <h1>YOU DIED!</h1>
+          <h3 class="score"></h3>
+        </div>
+        <div class="buttons">
+          <h1><span class="currentScore"></span></h1>
+          <button class="playAgain" onclick="playAgain();"> PLAY AGAIN!</button>
+          <button class="home" onclick="homeButton();">HOME</button>
+          <button class="reset" onclick="resetGame();">RESET</button>
+          <button class="start" onclick="startGame();">START</button>
+          <button class="pause" onclick="pauseGame();">PAUSE</button>
+          <button class="resume" onclick="resumeGame();">RESUME</button>
+          <div class="mobileButton">
+            <div class="mobileButtonCenter">
+              <button> UP </button>
+            </div>
+            <div class="mobileButtonCenter left--right">
+              <button> LEFT </button>
+              <button> RIGHT </button>
+            </div>
+            <div class="mobileButtonCenter">
+              <button> DOWN </button>
+            </div>
+          </div>
+          <h1>HIGHEST SCORE: <span id="highScore"></span> </h1>
+        </div>
       </div>
       <audio src="assets/run.mp3" id="run" loop></audio>
       <audio src="assets/dying.mp3" id="die"></audio>