* Some improvements in CSS

demo/pacman/pacman.css

@@ -1,189 +1,226 @@
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    font-family: 'Roboto', serif;
-}
-
-.progress {
-    border: 2px solid #B0B0B0;
-    border-radius: 5px;
-}
-
-.progress-inner {
-  height: 20px;
-  margin: 2px;
-}
-
-#pacman {
-    display: flex;
-    width: 560px;
-    margin: 3em auto;
-}
-
-#my-canvas {
-    width: 482px;
-    height: 528px;
-}
-
-#info {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 470px;
-    width: 240px;
-}
-
-#info > #logo {
-    flex-basis: auto;
-    margin-top: 7px;
-    padding: 5px 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #b8caf4;
-}
-
-#info > #score-envelope {
-    flex-basis: 8%;
-    border: 2px solid #B0B0B0;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-}
-
-#info > #highscore-envelope {
-    flex-basis: 8%;
-    border: 2px solid #B0B0B0;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-}
-
-#info > #ghosts-envelope {
-    flex-basis: 8%;
-    border: 2px solid #B0B0B0;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-}
-
-
-#info > #bonus-envelope {
-    flex-basis: 8%;
-    border: 2px solid #B0B0B0;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-}
-
-#info > #lives-envelope {
-    flex-basis: 8%;
-    border: 2px solid #B0B0B0;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-}
-
-#info > #status-envelope {
-    flex-basis: 8%;
-    border: 2px solid #B0B0B0;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-}
-
-#info > #controls-envelope {
-    flex-basis: auto;
-    border: 2px solid #B0B0B0;
-    border-radius: 5px;
-    padding: 0.5em 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-#info > #btn-reset {
-    flex-basis: auto;
-}
-
-.button {
-    margin: 0.4em;
-    padding: 1em;
-    text-align: center;
-    cursor: pointer;
-    outline: none;
-    color: #fff;
-    min-width: 100px;
-    font-weight: bold;
-    background-color: #537fe4;
-    border: none;
-    border-radius: 15px;
-    box-shadow: 1px 2px #aaa;
-  }
-
-.button:hover {
-    background-color: #2B60DE;
-}
-
-.button:active {
-    background-color: #2B60DE;
-    box-shadow: 0 3px #888;
-    transform: translateY(2px);
-}
-
-#controls > .one-btn {
-    display: flex;
-    justify-content: center;
-}
-
-#controls > .two-btn {
-    display: flex;
-    justify-content: space-between;
-}
-
-.label {
-    text-transform: uppercase;
-    font-weight: bold;
-    margin-right: 0.5em;
-    padding-left: 0.5em;
-}
-
-.source {
-    display: flex;
-    width: 540px;
-    margin: -40px auto;
-    font-size: 12px;
-}
-
-#btn-reset{
-    background: #2B60DE;
-    color: #fff;
-    font-weight: bold;
-    border: 0;
-    padding: 12px 0;
-    width: 100%;
-    border-radius: 5px;
-    text-transform: uppercase;
-    font-size: 14px;
-    cursor: pointer;
-    outline: none;
-}
-
-#btn-reset:hover {
-    background-color: #1e4fc2;
-}
-
-#btn-reset:active {
-    background-color: #1e4fc2;
-    transform: translateY(2px);
-}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Roboto', serif;
+}
+
+#pacman {
+  display: flex;
+  width: 730px;
+  margin: 3em auto;
+}
+
+#my-canvas {
+  width: 482px;
+  height: 528px;
+}
+
+#info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 528px;
+  width: 250px;
+}
+
+#info > #logo {
+  border: 1px solid #B0B0B0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#info > #scare-envelope {
+  border: 1px solid #B0B0B0;
+  border-radius: 2px;
+}
+
+#info > #bonus-envelope {
+  border: 1px solid #B0B0B0;
+  border-radius: 2px;
+}
+
+#info > #highscore-envelope {
+  border: 1px solid #B0B0B0;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+}
+
+#info > #score-envelope {
+  border: 1px solid #B0B0B0;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+}
+
+#info > #lives-envelope {
+  border: 1px solid #B0B0B0;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+}
+
+#info > #status-envelope {
+  border: 1px solid #B0B0B0;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+}
+
+#info > #ghosts-envelope {
+  border: 1px solid #B0B0B0;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+}
+
+#info > #bonus-envelope {
+  border: 1px solid #B0B0B0;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+}
+
+#info > #controls-envelope {
+  border: 1px solid #B0B0B0;
+  border-radius: 2px;
+  padding: 0.5em 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-weight: bold;
+}
+
+#info > #sound-envelope {
+  display: flex;
+  align-items: center;
+  border: 1px solid #B0B0B0;
+  border-radius: 2px;
+  font-weight: bold
+}
+
+.progress-inner {
+  height: 15px;
+  margin: 2px;
+}
+
+.button {
+  margin: 0.4em;
+  padding: 0.7em;
+  text-align: center;
+  cursor: pointer;
+  outline: none;
+  color: #fff;
+  min-width: 100px;
+  font-weight: bold;
+  border: none;
+  border-radius: 15px;
+  box-shadow: 1px 2px #aaa;
+}
+
+#control-rotate {
+  background-color: #537fe4;
+}
+#control-rotate:hover {
+  background-color: #275edd;
+}
+
+#control-left {
+  background-color: #0EA7E1;
+}
+#control-left:hover {
+  background-color: #0b85b1;
+}
+
+#control-right {
+  background-color: rgb(206, 123, 155);
+}
+#control-right:hover {
+  background-color: #c15780;
+}
+
+#control-down {
+  background-color: #d2c537;
+}
+#control-down:hover {
+  background-color: #afa328;
+}
+
+#control-pause {
+  background-color: rgb(215, 77, 77);
+}
+#control-pause:hover {
+  background-color: #c32c2c;
+}
+
+.button:active {
+  box-shadow: 0 3px #888;
+  transform: translateY(2px);
+}
+
+#controls > .one-btn {
+  display: flex;
+  justify-content: center;
+}
+
+#controls > .two-btn {
+  display: flex;
+  justify-content: space-between;
+}
+
+.label {
+  text-transform: uppercase;
+  margin-right: 0.5em;
+  padding-left: 0.5em;
+}
+
+.img {
+  margin-bottom: -5px;
+}
+
+.source {
+  width: 730px;
+  margin: -45px auto;
+  font-size: 0.9em;
+}
+
+.source-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 482px;
+}
+
+#btn-reset{
+  background: #275edd;
+  color: #fff;
+  font-weight: bold;
+  border: 0;
+  padding: 10px 0;
+  width: 130px;
+  border-radius: 5px;
+  text-transform: uppercase;
+  font-size: 14px;
+  cursor: pointer;
+  outline: none;
+}
+
+#btn-reset:hover {
+  background-color: #1e4fc2;
+}
+
+#btn-reset:active {
+  background-color: #1e4fc2;
+  transform: translateY(2px);
+}

demo/pacman/pacman.html

@@ -1,94 +1,109 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Pacman using pas2js</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <link rel="stylesheet" type="text/css" href="pacman.css">
-    <script src="pacman.js"></script>
-</head>
-<body>
-    <audio id="audio-start" src="audio/start.mp3" type="audio/mp3" preload="true" autobuffer="true"></audio>
-    <audio id="audio-die" src="audio/die.mp3" type="audio/mp3" preload="true" autobuffer="true"></audio>
-    <audio id="audio-eatghost" src="audio/eatghost.mp3" type="audio/mp3" preload="true" autobuffer="true"></audio>
-    <audio id="audio-eatpill" src="audio/eating.mp3" type="audio/mp3" preload="true" autobuffer="true"></audio>
-    <div id="pacman">
-        <div id="gameboard">
-          <canvas id="my-canvas"></canvas>
-        </div>
-        <div id="info">
-          <div id="logo">
-            <!-- <img id="logo-img" src="tetrislogo.png" height="54"/> -->
-          </div>
-          <div id="scare-envelope" class="envelope">
-            <div id="scare-outer" class="progress"><div id="scare-inner" class="progress-inner"></div></div>
-          </div>
-          <div id="bonus-envelope" class="envelope">
-            <div id="bonus-outer" class="progress"><div id="bonus-inner" class="progress-inner"></div></div>
-          </div>
-          <div id="highscore-envelope" class="envelope">
-            <div id="highscore-label" class="label">High Score:</div>
-            <div id="highscore">0</div>
-          </div>
-          <div id="score-envelope" class="envelope">
-            <div id="score-label" class="label">Score:</div>
-            <div id="score">0</div>
-          </div>
-          <div id="lives-envelope" class="envelope">
-            <div id="lives-label" class="label">Lives:</div>
-            <div id="lives">3</div>
-          </div>
-          <div id="status-envelope" class="envelope">
-            <div id="status-label" class="label">Game status:</div>
-            <div id="status">Playing</div>
-          </div>
-          <div id="ghosts-envelope" class="envelope">
-            <div id="ghosts-label" class="label"><img id="ghost-scared" src="ghost-scared.png"/></div>
-            <div id="ghosts">0</div>
-          </div>
-          <div id="bonus-envelope" class="envelope">
-            <div id="bonus-label" class="label"><img id="cherry" src="cherry.png"/></div>
-            <div id="bonus">0</div>
-          </div>
-          <div id="controls-envelope" class="envelope">
-            <div id="controls-label" class="label">Controls:</div>
-            <div id="controls">
-              <div class="one-btn">
-                <button class="button" id="control-up"><i class="fas fa-arrow-up"></i>&nbsp; &nbsp; Move up</button>
-              </div>
-              <div class="two-btn">
-                <button class="button" id="control-left"><i class="fas fa-arrow-left"></i>&nbsp;&nbsp;Move Left</button>
-                <button class="button" id="control-right">Move Right&nbsp; &nbsp;<i class="fas fa-arrow-right"></i></button>
-              </div>
-              <div class="one-btn">
-                <button class="button" id="control-down"><i class="fas fa-arrow-down"></i>&nbsp; &nbsp;Move Down</button>
-              </div>
-              <div class="one-btn">
-                <button class="button" id="control-pause"><i>P</i>&nbsp; &nbsp;Pause/Resume</button>
-              </div>
-            </div>
-          </div>
-          <button id="btn-reset">Restart</button>
-          <div id=sound-envelope" class="envelope">
-            <div id="sound-label" class="label">Sound:</div>
-            <div id="sound"><input id="cbx-sound" type=checkbox value="0" /></div>
-           </div>
-        </div>
-    </div>
-    <div class="source">
-        Created using &nbsp; <a target="_blank" href="https://wiki.freepascal.org/pas2js">pas2js.</a> &nbsp;&nbsp;Sources: &nbsp; <a target="new" href="pacman.lpr">Program</a> &nbsp; <a target="new" href="upacman.pp">unit</a>.
-    </div>
-    <div style="display: none;">
-      <img id="ghost1" src="ghost1.png"/>
-      <img id="ghost2" src="ghost2.png"/>
-      <img id="ghost3" src="ghost3.png"/>
-      <img id="ghost4" src="ghost4.png"/>
-    </div>
-    <script>
-      // window.addEventListener("load", rtl.run);
-      rtl.run()
-    </script>
-</body>
-</html>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Pacman using pas2js</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
+    <link rel="stylesheet" type="text/css" href="pacman.css">
+    <script src="pacman.js"></script>
+</head>
+<body>
+    <audio id="audio-start" src="audio/start.mp3" type="audio/mp3" preload="true" autobuffer="true"></audio>
+    <audio id="audio-die" src="audio/die.mp3" type="audio/mp3" preload="true" autobuffer="true"></audio>
+    <audio id="audio-eatghost" src="audio/eatghost.mp3" type="audio/mp3" preload="true" autobuffer="true"></audio>
+    <audio id="audio-eatpill" src="audio/eating.mp3" type="audio/mp3" preload="true" autobuffer="true"></audio>
+    <div id="pacman">
+      <div id="gameboard">
+        <canvas id="my-canvas"></canvas>
+      </div>
+      <div id="info">
+        <div id="logo">
+          <img id="logo-img" src="pacmanlogo.jpeg" width="80%"/>
+        </div>
+        <div id="scare-envelope">
+          <div id="scare-outer" class="progress">
+            <div id="scare-inner" class="progress-inner"></div>
+          </div>
+        </div>
+        <div id="bonus-envelope">
+          <div id="bonus-outer" class="progress">
+            <div id="bonus-inner" class="progress-inner"></div>
+          </div>
+        </div>
+        <div id="highscore-envelope">
+          <div id="highscore-label" class="label">High Score:</div>
+          <div id="highscore">0</div>
+        </div>
+        <div id="score-envelope">
+          <div id="score-label" class="label">Score:</div>
+          <div id="score">0</div>
+        </div>
+        <div id="lives-envelope">
+          <div id="lives-label" class="label">Lives:</div>
+          <div id="lives">3</div>
+        </div>
+        <div id="status-envelope">
+          <div id="status-label" class="label">Game status:</div>
+          <div id="status">Playing</div>
+        </div>
+        <div id="ghosts-envelope">
+          <div id="ghosts-label" class="label">
+            <img id="ghost-scared" src="ghost-scared.png" class="img"/>
+          </div>
+          <div id="ghosts">0</div>
+        </div>
+        <div id="bonus-envelope">
+          <div id="bonus-label" class="label">
+            <img id="cherry" src="cherry.png" class="img"/>
+          </div>
+          <div id="bonus">0</div>
+        </div>
+        <div id="controls-envelope">
+          <div id="controls-label" class="label">Controls:</div>
+          <div id="controls">
+            <div class="one-btn">
+              <button class="button" id="control-rotate"><i class="fas fa-arrow-up"></i>&nbsp; &nbsp; Move Up</button>
+            </div>
+            <div class="two-btn">
+              <button class="button" id="control-left"><i class="fas fa-arrow-left"></i>&nbsp;&nbsp;Move Left</button>
+              <button class="button" id="control-right">Move Right&nbsp; &nbsp;<i class="fas fa-arrow-right"></i></button>
+            </div>
+            <div class="one-btn">
+              <button class="button" id="control-down"><i class="fas fa-arrow-down"></i>&nbsp; &nbsp;Move Down</button>
+            </div>
+            <div class="one-btn">
+              <button class="button" id="control-pause"><i class="fas fa-pause"></i>&nbsp; &nbsp;Pause / Resume</button>
+            </div>
+          </div>
+        </div>
+        <div id=sound-envelope >
+          <label id="sound-label" class="label" for="cbx-sound">Sound:</label>
+          <div id="sound">
+            <input id="cbx-sound" type="checkbox" value="0" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="source">
+      <div class="source-inner">
+        <div>
+          Created using &nbsp; <a target="_blank" href="https://wiki.freepascal.org/pas2js">pas2js.</a> &nbsp;&nbsp;Sources: &nbsp; <a target="new" href="pacman.lpr">Program</a> &nbsp; <a target="new" href="upacman.pp">unit</a>.
+        </div>
+        <button id="btn-reset">Restart</button>
+      </div>
+    </div>
+    <div style="display: none;">
+      <img id="ghost1" src="ghost1.png"/>
+      <img id="ghost2" src="ghost2.png"/>
+      <img id="ghost3" src="ghost3.png"/>
+      <img id="ghost4" src="ghost4.png"/>
+    </div>
+    <script>
+      // window.addEventListener("load", rtl.run);
+      rtl.run()
+    </script>
+</body>
+</html>