diff --git a/javascript/slide-a-round.html b/javascript/slide-a-round.html
new file mode 100644
index 0000000..c05ffe4
--- /dev/null
+++ b/javascript/slide-a-round.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <title>Slide-A-Round</title>
+  <script src="slide-a-round.js"></script>
+  <style>
+#canvas { border: 1px solid blue; }
+  </style>
+</head>
+<body>
+
+<h1>Silde-A-Round</h1>
+
+<canvas id="canvas" width="600" height="400" tabindex="0">
+Your browser doesn't support displaying an HTML5 canvas.
+</canvas>
+
+</body>
+<script type="text/javascript">
+  var canvas = document.getElementById('canvas');
+  canvas.focus();
+  (new SlideARound()).start(canvas);
+</script>
diff --git a/javascript/slide-a-round.js b/javascript/slide-a-round.js
new file mode 100644
index 0000000..218d4ce
--- /dev/null
+++ b/javascript/slide-a-round.js
@@ -0,0 +1,98 @@
+var w = 40;
+var h = 40;
+
+Actor = function() {
+    this.init = function(x, y, color) {
+        this.x = x;
+        this.y = y;
+        this.color = color;
+        this.destX = undefined;
+        this.destY = undefined;
+        this.progress = undefined;
+        this.state = 'rest';
+        return this;
+    };
+
+    this.draw = function(ctx) {
+        ctx.beginPath();
+        ctx.fillStyle = this.color;
+        var x = this.x * w + (w / 2);
+        var y = this.y * h + (h / 2);
+        if (this.progress !== undefined) {
+            x += (this.progress / 100) * ((this.destX - this.x) * w);
+            y += (this.progress / 100) * ((this.destY - this.y) * h);
+        }
+        ctx.arc(x, y, w/2, 0, 2 * Math.PI, false);
+        ctx.fill();
+    };
+
+    this.setStateMoving = function(dx, dy) {
+        if (this.state === 'rest') {
+            this.destX = this.x + dx;
+            this.destY = this.y + dy;
+            this.progress = 0;
+            this.state = 'moving';
+        }
+    };
+
+    this.move = function() {
+        if (this.state === 'moving') {
+            this.progress += 10;
+            if (this.progress >= 100) {
+                this.x = this.destX;
+                this.y = this.destY;
+                this.destX = this.destY = this.progress = undefined;
+                this.state = 'rest';
+            }
+        }
+    };
+};
+
+SlideARound = function() {
+    var actors;
+    var canvas;
+    var ctx;
+    var intervalId;
+    var counter = 0;
+
+    this.draw = function() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        for (var i = 0; i < actors.length; i++) {
+            actors[i].draw(ctx);
+            actors[i].move();
+        }
+    }
+
+    this.start = function(c) {
+        actors = [];
+        actors.push(new Actor().init(3, 4, "red"));
+        actors.push(new Actor().init(2, 2, "blue"));
+
+        canvas = c;
+        ctx = canvas.getContext('2d');
+
+        canvas.addEventListener('keydown', function(e) {
+          switch (e.keyCode) {
+            case 38:  /* Up arrow */
+              actors[0].setStateMoving(0, -1);
+              e.cancelBubble = true;
+              break;
+            case 40:  /* Down arrow */
+              actors[0].setStateMoving(0, 1);
+              e.cancelBubble = true;
+              break;
+            case 37:  /* Left arrow */
+              actors[0].setStateMoving(-1, 0);
+              e.cancelBubble = true;
+              break;
+            case 39:  /* Right arrow */
+              actors[0].setStateMoving(1, 0);
+              e.cancelBubble = true;
+              break;
+          }
+        }, true);
+
+        intervalId = setInterval(this.draw, 25);
+    }
+}