added info in ship example

anuraghazra · May 11, 2019 · 93ee858 · 93ee858
1 parent e62deb9
commit 93ee858
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 11 deletions.
diff --git a/examples/ship/index.html b/examples/ship/index.html
@@ -11,7 +11,7 @@
   <style>
     * {
       box-sizing: border-box;
-      color: #ce072e;
+      color: #ff6e8b;
     }
 
     html,
@@ -24,13 +24,58 @@
       margin: auto;
       outline: 1px solid black;
     }
+
+    .info {
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      font-size: 12px;
+    }
+    a {
+      text-decoration: none;
+    }
+    a:hover {
+      color: #ce072e;
+    }
+    span {
+      font-size: 12px;
+    }
+
+    hr {
+      border: 0.5px solid #ffb9c7;
+    }
   </style>
+
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-119972196-1"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'UA-119972196-1');
+  </script>
 </head>
 
 <body>
 
   <canvas id="c"></canvas>
 
+  <div class="info">
+    <a href="https://github.com/anuraghazra/Verly.js/tree/master/examples/ship" target="__blank">source-code</a>
+    <br>
+    <a href="https://github.com/anuraghazra/Verly.js" target="__blank">give the project a star</a>
+    <br>
+    <a href="https://anuraghazra.github.io" target="__blank">@anuraghazra</a>
+    <br>
+    <hr type="">
+    <span>use W,A,D to control the ship</span>
+    <br>
+    <span>hit SPACE to connect</span>
+    <br>
+    <span>hit Q to connect</span>
+  </div>
+
   <script src="../../src/Utils.js"></script>
   <script src="../../src/Point.js"></script>
   <script src="../../src/Stick.js"></script>

diff --git a/examples/ship/index.js b/examples/ship/index.js
@@ -11,27 +11,27 @@ let RIGHT_ARROW = false;
 let LEFT_ARROW = false;
 let UP_ARROW = false;
 window.addEventListener('keydown', function (e) {
-  switch (e.key) {
-    case 'd':
+  switch (e.keyCode) {
+    case 68:
       RIGHT_ARROW = true;
       break;
-    case 'a':
+    case 65:
       LEFT_ARROW = true;
       break;
-    case 'w':
+    case 87:
       UP_ARROW = true;
       break;
   }
 })
 window.addEventListener('keyup', function (e) {
-  switch (e.key) {
-    case 'd':
+  switch (e.keyCode) {
+    case 68:
       RIGHT_ARROW = false;
       break;
-    case 'a':
+    case 65:
       LEFT_ARROW = false;
       break;
-    case 'w':
+    case 87:
       UP_ARROW = false;
       break;
   }
@@ -50,7 +50,7 @@ window.onload = function () {
   let BOX_POINTS = boxtmp.points.length;
 
   window.addEventListener('keydown', function (e) {
-    if (e.key == ' ') {
+    if (e.keyCode == 32) {
       for (let i = 0; i < word.entity.points.length; i++) {
         let d = word.entity.points[i].pos.dist(ship.pos);
         if (d > 0 && d < 50) {
@@ -60,7 +60,7 @@ window.onload = function () {
         }
       }
     }
-    if (e.key == 'q' && boxtmp.points.length < BOX_POINTS) {
+    if (e.keyCode == 81 && boxtmp.points.length < BOX_POINTS) {
       BOX_POINTS--;
       boxtmp.sticks.pop();
     }