update

bestculling · Mar 18, 2019 · fe9d6ae · fe9d6ae
1 parent cb29aea
commit fe9d6ae
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 18 deletions.
diff --git a/dino.css b/dino.css
@@ -3,37 +3,57 @@ cursor: url(image/cursor.cur), auto;
 }
 body{
     font-family: 'Press Start 2P', cursive;
-     background-image: url('image/bg2.png');
-    background-size:100%;
-    background-repeat: repeat-y;
-    background-attachment: fixed;
+    background: #495c6b;
     width:100%;
     margin: 0;
     margin: 0;
 }   
 canvas{
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    border-radius: 5px;
+    position: relative;
+    left: 50%;
+	transform: translateX(-50%);
 	background: url(image/mapground.png);
-	animation: animatedBackground 5.3s linear infinite;
-	z-index: -1;
+	animation: animatedBackground 6.5s linear infinite;
+	margin: 0 auto;
 }
 h1,h2,h3{
     text-align:center;
     text-transform:uppercase;
 }
 #top{
     margin: 0;
-    padding: 10px;
+    padding: 8px;
     color: #EC7063;
 	background: #495c6b;
 }
+#game {
+	position: relative;
+    padding: 1em;
+	background-image: url('image/bg2.png');
+    background-size:100%;
+    background-repeat: repeat-y;
+    background-attachment: fixed;
+}
+#bottom{
+    margin: 0;
+    padding: 8px;
+    color: #EC7063;
+	background: #495c6b;
+	text-align: center;
+}
+#bottom h3 {
+	display: inline-block;
+    padding: 0 1em;
+}
+#gameTitle {
+  animation: jump .5s ease-out alternate infinite;
+}
 @keyframes animatedBackground {
     0% { background-position: 0 0; }
     100% { background-position: -1200px 0; }
-}
+}
+@keyframes jump {
+  0%   {transform: translateY(20%)}
+  100% {transform: translateY(-20%)}
+}
+
diff --git a/dino.html b/dino.html
@@ -11,10 +11,13 @@
 <body>
     <section id="top">
         <h1 id="gameTitle" >Dinosaur Jump!</h1>
-        <h3 id="myScore">SCORE: 0000</h3>
-        <h3 id="step">STEP: 0</h3>
     </section>
-    <canvas width="1200px" height="700px"></canvas> 
+	<section id="game">
+        <canvas width="1200px" height="700px"></canvas> 
+    </section>
+	 <section id="bottom">
+        <h3 id="myScore">SCORE: 0000</h3> <h3 id="step">STEP: 0</h3>
+    </section>
     <!--เสียงเกมส์-->
     <audio autoplay id="bgm" preload="auto" loop>
         <source src="./sound/bgm.mp3" type="audio/ogg">