Permalink
Browse files

pretty labels on the touch control panels :D

  • Loading branch information...
brion committed Nov 20, 2011
1 parent 1e5170f commit 54cf18b4b9d242a8ea3494eeb872dada22989eee
Showing with 61 additions and 10 deletions.
  1. +6 −0 README
  2. +19 −3 index.html
  3. +22 −3 main.js
  4. +14 −4 style.css
View
6 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 ==
View
@@ -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>
View
25 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);
}
},
View
@@ -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;
}

0 comments on commit 54cf18b

Please sign in to comment.