Works in Chrome, Safari, and Firefox. Web worker portion works in Opera.
-
Use arrow keys to change the direction of the animated square. The square is animated with requestAnimationFrame.
-
Click the button below to start or stop the worker.
-
-
Messages from Worker:
-
-
-
-
-
+Web Worker
+
+
+
This demo shows how main window animation isn't interrupted by Web Workers. Note that the animation does not work in Opera (due to lack of requestAnimationFrame support).
+
Use arrow keys to change the direction of the animated square. The square is animated with requestAnimationFrame.
+
+
+
+
Click the button below to start or stop the worker.
+
+
Messages from Worker:
+
+
+
\ No newline at end of file
diff --git a/js/worker-main.js b/js/worker-main.js
index 5077b18..e77cb04 100644
--- a/js/worker-main.js
+++ b/js/worker-main.js
@@ -4,7 +4,7 @@
(function () {
"use strict";
- var SQUARE_SIZE = 75;
+ var SQUARE_SIZE = 50;
var MOVEMENT_STEP = 3;
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
@@ -52,26 +52,26 @@
var top = parseInt(square.style.top, 10);
var right = left + SQUARE_SIZE;
var bottom = top + SQUARE_SIZE;
-
+
switch (direction) {
case 37: // left
if (left > 0) {
- square.style.left = left - MOVEMENT_STEP;
+ square.style.left = left - MOVEMENT_STEP + 'px';
}
break;
case 38: // up
if (top > 0) {
- square.style.top = top - MOVEMENT_STEP;
+ square.style.top = top - MOVEMENT_STEP + 'px';
}
break;
case 39: //right
if (right < document.documentElement.clientWidth) {
- square.style.left = left + MOVEMENT_STEP;
+ square.style.left = left + MOVEMENT_STEP + 'px';
}
break;
case 40: // down
if (bottom < document.documentElement.clientHeight) {
- square.style.top = top + MOVEMENT_STEP;
+ square.style.top = top + MOVEMENT_STEP + 'px';
}
break;
default: