Firefox/Projects/Multitouch Polish/DOM Events/Examples: Difference between revisions

Firefox/Projects/Multitouch Polish/DOM Events/Examples (view source)

1,053 bytes added , 19 August 2009

no edit summary

Confirmed users

371

edits

@@ Line 103: / Line 103: @@
    }
+}</pre>
+== Image crop ==
+The code for the image crop is just about resizing as well, except that we let a free aspect ratio resize of the div.
+<pre>function touchmove(e) {
+  var t = document.getElementById("cropbox");
+  if (fingerIds[0] == e.streamId) { // finger 1
+    t.style.left = e.clientX + "px";
+    t.style.top  = e.clientY + "px";
+    X = e.clientX;
+    Y = e.clientY;
+  } else if (fingerIds[1] == e.streamId) { // finger 2
+    t.style.width  = (e.clientX - X) + "px"
+    t.style.height = (e.clientY - Y) + "px"
+  }
+}
+</pre>
+== Pong ==
+Omitting the code for rendering the graphics and the game logic, the part that controls the game pads is really simple: the contact point that is moving on the left side of the game area sets the position for the first player, and the contact point on the right side is the second player
+<pre>function touchmove(e) {
+  if (e.clientX < screen.width / 2)
+    //we subtract padsize/2 to center the pad on the touch point
+    player1 = e.clientY - padsize/2;
+  else
+    player2 = e.clientY - padsize/2;
 }</pre>