pretty labels on the touch control panels :D

bvibber · Nov 20, 2011 · 54cf18b · 54cf18b
1 parent 1e5170f
commit 54cf18b
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 10 deletions.
diff --git a/README b/README
@@ -10,6 +10,12 @@
 * touch events work one at a time
 * multitouch jump doesn't seem to work reliably
 
+== Firefox 10 / Kindle Fire / Android 2.3 ==
+
+* Verrrry sluggish; reports around 8-10fps.
+* touch events work one at a time
+* multitouch jump doesn't seem to work
+
 
 == IE 10 / Win 8 DP ==
 

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta type="http-equiv" content="Content-Type: text/html; charset=utf-8">
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <meta name="viewport" content="user-scalable=no, width=device-height">
         <title>FlatRoller</title>
         <link rel="stylesheet" type="text/css" href="style.css">
@@ -11,8 +11,24 @@
     <body>
         <canvas id="game" width="640" height="360"></canvas>
         <div id="all">
-            <div id="touch-left">&nbsp;</div>
-            <div id="touch-right">&nbsp;</div>
+            <div id="controls">
+                <div id="touch-left">
+                    <div class="help-move">
+                        ⇦&nbsp;Left
+                    </div>
+                    <div class="help-jump">
+                        ⇧&nbsp;Jump
+                    </div>
+                </div>
+            </div>
+            <div id="touch-right">
+                <div class="help-move">
+                    Right&nbsp;⇨
+                </div>
+                <div class="help-jump">
+                    Jump&nbsp;⇧
+                </div>
+            </div>
             <div id="ui">
                 <h1>FlatRoller canvas game demo</h1>
                 <p>

diff --git a/main.js b/main.js
@@ -351,7 +351,22 @@ function GameEngine(canvas) {
             if (true) {
                 var repeatDelay = 100;
                 var dirKeysDownCount = 0;
-                var touchableArea = function(target, callback) {
+                var toggleHelp = function(target, opposite) {
+                    if (dirKeysDownCount == 2) {
+                        $('.help-jump').show();
+                        $('.help-move').hide();
+                    } else if (dirKeysDownCount == 1) {
+                        $(opposite).find('.help-move').hide();
+                        $(target).find('.help-move').show();
+
+                        $(opposite).find('.help-jump').show();
+                        $(target).find('.help-jump').hide();
+                    } else {
+                        $('.help-move').show();
+                        $('.help-jump').hide();
+                    }
+                };
+                var touchableArea = function(target, opposite, callback) {
                     var interval,
                         msPointer = (typeof window.navigator.msPointerEnabled !== 'undefined') && window.navigator.msPointerEnabled,
                         downEvent = (msPointer ? 'MSPointerDown' : 'touchstart'),
@@ -368,6 +383,8 @@ function GameEngine(canvas) {
                             dirKeysDownCount++;
                             keyMap.right();
                             interval = window.setInterval(callback, repeatDelay);
+                            $(target).addClass('active');
+                            toggleHelp(target, opposite);
                         }
                         return false;
                     }).bind(upEvent, function(event) {
@@ -376,6 +393,8 @@ function GameEngine(canvas) {
                             dirKeysDownCount--;
                             window.clearInterval(interval);
                             interval = null;
+                            $(target).removeClass('active');
+                            toggleHelp(opposite, target);
                         }
                         return false;
                     }).bind(moveEvent, function(event) {
@@ -389,8 +408,8 @@ function GameEngine(canvas) {
                         event.preventDefault();
                     });
                 };
-                touchableArea('#touch-left', keyMap.left);
-                touchableArea('#touch-right', keyMap.right);
+                touchableArea('#touch-left', '#touch-right', keyMap.left);
+                touchableArea('#touch-right', '#touch-left', keyMap.right);
             }
         },
 

diff --git a/style.css b/style.css
@@ -4,6 +4,8 @@ body {
 
     overflow: hidden;
     -ms-content-zooming: none; /* disable touch pan/zoom in IE 10 */
+
+    font-family: 'Helvetica', 'Arial', sans-serif;
 }
 
 #all {
@@ -37,14 +39,22 @@ body {
     top: 40px;
     bottom: 40px;
     width: 192px;
+    background: rgba(0, 0, 0, 0.1);
+
+    text-align: center;
+    padding-top: 20%;
+    font-size: 32px;
+}
+#touch-left.active,
+#touch-right.active {
+    background: rgba(0, 0, 0, 0.2);
 }
 #touch-left {
     left: 0px;
-    background: rgb(24, 0, 0);
-    opacity: 0.1;
 }
 #touch-right {
     right: 0px;
-    background: rgb(24, 24, 0);
-    opacity: 0.1;
+}
+.help-jump {
+    display: none;
 }