Updated Making Things Move examples to reflect new style.

lamberta · Apr 8, 2011 · 33c479f · 33c479f
1 parent debe495
commit 33c479f
Show file tree

Hide file tree

Showing 181 changed files with 1,288 additions and 1,301 deletions.
diff --git a/doc/examples/making-things-move/README b/doc/examples/making-things-move/README
diff --git a/doc/examples/making-things-move/chap02/01-event_sprite.html b/doc/examples/making-things-move/chap02/01-event_sprite.html
@@ -12,16 +12,16 @@
  * http://www.amazon.com/gp/product/1590597915?tag=de05f-20
  *
  * Ported to JavaScript by Billy Lamberta using the Doodle.js library
- * available at http://github.com/biilly/doodle-js
+ * available at http://github.com/billyist/doodle-js
  */
 
 function init_scene () {
   //dom block element wrapper
-  var display = doodle.Display("#my_display");
+  var display = doodle.createDisplay("#display", {frameRate: 15});
   //creates new canvas element wrapper
-  var layer0 = display.addLayer();
+  var layer0 = display.createLayer();
 
-  var eventSprite = doodle.Sprite();
+  var eventSprite = doodle.createSprite();
   eventSprite.graphics.beginFill(0xff0000);
   eventSprite.graphics.circle(0, 0, 100);
   eventSprite.graphics.endFill();
@@ -51,6 +51,6 @@
     </script>
   </head>
   <body style="background-color: #bbbbbb;" onload="init_scene();">
-    <div id="my_display" width="800" height="600" style="background-color: #ffffff;"></div>
+    <div id="display" style="background-color: #fff; width: 800px; height: 600px; width: 800px; height:600px;"></div>
   </body>
 </html>
diff --git a/doc/examples/making-things-move/chap02/02-ball.html b/doc/examples/making-things-move/chap02/02-ball.html
@@ -12,16 +12,16 @@
  * http://www.amazon.com/gp/product/1590597915?tag=de05f-20
  *
  * Ported to JavaScript by Billy Lamberta using the Doodle.js library
- * available at http://github.com/biilly/doodle-js
+ * available at http://github.com/billyist/doodle-js
  */
 
 function init_scene () {
 
-  var display = doodle.Display("#my_display");
+  var display = doodle.createDisplay("#display");
   display.frameRate = 15;
-  var layer0 = display.addLayer();
+  var layer0 = display.createLayer();
 
-  var ball = doodle.Sprite();
+  var ball = doodle.createSprite();
   layer0.addChild(ball);
 
   ball.graphics.beginFill(0xff0000);
@@ -40,6 +40,6 @@
     </script>
   </head>
   <body style="background-color: #bbbbbb;" onload="init_scene();">
-    <div id="my_display" width="800" height="600" style="background-color: #ffffff;"></div>
+    <div id="display" style="background-color: #fff; width: 800px; height: 600px;"></div>
   </body>
 </html>
diff --git a/doc/examples/making-things-move/chap02/03-reparenting.html b/doc/examples/making-things-move/chap02/03-reparenting.html
@@ -12,27 +12,27 @@
  * http://www.amazon.com/gp/product/1590597915?tag=de05f-20
  *
  * Ported to JavaScript by Billy Lamberta using the Doodle.js library
- * available at http://github.com/biilly/doodle-js
+ * available at http://github.com/billyist/doodle-js
  */
 
 function init_scene () {
 
-  var display = doodle.Display("#my_display");
-  var layer0 = display.addLayer();
+  var display = doodle.createDisplay("#display", {frameRate: 15});
+  var layer0 = display.createLayer();
 
-  var parent1 = doodle.Sprite();
+  var parent1 = doodle.createSprite();
   parent1.graphics.rect(-50, -50, 100, 100);
   parent1.x = 60;
   parent1.y = 60;
   layer0.addChild(parent1);
 
-  var parent2 = doodle.Sprite();
+  var parent2 = doodle.createSprite();
   parent2.graphics.rect(-50, -50, 100, 100);
   parent2.x = 170;
   parent2.y = 60;
   layer0.addChild(parent2);
 
-  var ball = doodle.Sprite();
+  var ball = doodle.createSprite();
   ball.graphics.beginFill(0xff0000);
   ball.graphics.circle(0, 0, 40);
   ball.graphics.endFill();
@@ -50,6 +50,6 @@
     </script>
   </head>
   <body style="background-color: #bbbbbb;" onload="init_scene();">
-    <div id="my_display" width="800" height="600" style="background-color: #ffffff;"></div>
+    <div id="display" style="background-color: #fff; width: 800px; height: 600px;"></div>
   </body>
 </html>
diff --git a/doc/examples/making-things-move/chap02/04-reparenting_classes.html b/doc/examples/making-things-move/chap02/04-reparenting_classes.html
@@ -12,32 +12,32 @@
  * http://www.amazon.com/gp/product/1590597915?tag=de05f-20
  *
  * Ported to JavaScript by Billy Lamberta using the Doodle.js library
- * available at http://github.com/biilly/doodle-js
+ * available at http://github.com/billyist/doodle-js
  */
 
 /* Creates new objects that inherit from Sprite.
  */
-function ParentBox () {
-  return doodle.Sprite(function () {
+function createParentBox () {
+  return doodle.createSprite(function () {
     this.graphics.rect(-50, -50, 100, 100);
   });
 };
 
 function init_scene () {
-  var display = doodle.Display("#my_display");
-  var layer0 = display.addLayer();
+  var display = doodle.createDisplay("#display", {frameRate: 15});
+  var layer0 = display.createLayer();
 
-  var parent1 = ParentBox();
+  var parent1 = createParentcreateBox();
   parent1.x = 60;
   parent1.y = 60;
   layer0.addChild(parent1);
 
-  var parent2 = ParentBox();
+  var parent2 = createParentcreateBox();
   parent2.x = 170;
   parent2.y = 60;
   layer0.addChild(parent2);
 
-  var ball = doodle.Sprite();
+  var ball = doodle.createSprite();
   ball.graphics.beginFill(0xff0000);
   ball.graphics.circle(0, 0, 40);
   ball.graphics.endFill();
@@ -55,6 +55,6 @@
     </script>
   </head>
   <body style="background-color: #bbbbbb;" onload="init_scene();">
-    <div id="my_display" width="800" height="600" style="background-color: #ffffff;"></div>
+    <div id="display" style="background-color: #fff; width: 800px; height: 600px;"></div>
   </body>
 </html>
diff --git a/doc/examples/making-things-move/chap02/05-mouse_events.html b/doc/examples/making-things-move/chap02/05-mouse_events.html
@@ -12,14 +12,14 @@
  * http://www.amazon.com/gp/product/1590597915?tag=de05f-20
  *
  * Ported to JavaScript by Billy Lamberta using the Doodle.js library
- * available at http://github.com/biilly/doodle-js
+ * available at http://github.com/billyist/doodle-js
  */
 
 function init_scene () {
-  var display = doodle.Display("#my_display");
-  var layer0 = display.addLayer();
+  var display = doodle.createDisplay("#display", {frameRate: 15});
+  var layer0 = display.createLayer();
 
-  var sprite = doodle.Sprite();
+  var sprite = doodle.createSprite();
   sprite.graphics.beginFill(0xff0000);
   sprite.graphics.circle(0, 0, 50);
   sprite.graphics.endFill();
@@ -44,6 +44,6 @@
     </script>
   </head>
   <body style="background-color: #bbbbbb;" onload="init_scene();">
-    <div id="my_display" width="800" height="600" style="background-color: #ffffff;"></div>
+    <div id="display" style="background-color: #fff; width: 800px; height: 600px;"></div>
   </body>
 </html>
diff --git a/doc/examples/making-things-move/chap02/06-keyboard_events.html b/doc/examples/making-things-move/chap02/06-keyboard_events.html
@@ -12,11 +12,11 @@
  * http://www.amazon.com/gp/product/1590597915?tag=de05f-20
  *
  * Ported to JavaScript by Billy Lamberta using the Doodle.js library
- * available at http://github.com/biilly/doodle-js
+ * available at http://github.com/billyist/doodle-js
  */
 
 function init_scene () {
-  var display = doodle.Display("#my_display");
+  var display = doodle.createDisplay("#display");
 
   display.addEventListener(doodle.events.KeyboardEvent.KEY_DOWN, onKeyboardEvent);
   display.addEventListener(doodle.events.KeyboardEvent.KEY_UP, onKeyboardEvent);
@@ -29,6 +29,6 @@
     </script>
   </head>
   <body style="background-color: #bbbbbb;" onload="init_scene();">
-    <div id="my_display" width="800" height="600" style="background-color: #ffffff;"></div>
+    <div id="display" style="background-color: #fff; width: 800px; height: 600px;"></div>
   </body>
 </html>
diff --git a/doc/examples/making-things-move/chap02/07-key_codes.html b/doc/examples/making-things-move/chap02/07-key_codes.html
@@ -12,16 +12,16 @@
  * http://www.amazon.com/gp/product/1590597915?tag=de05f-20
  *
  * Ported to JavaScript by Billy Lamberta using the Doodle.js library
- * available at http://github.com/biilly/doodle-js
+ * available at http://github.com/billyist/doodle-js
  */
 
 function init_scene () {
-  var display = doodle.Display("#my_display");
+  var display = doodle.createDisplay("#display", {frameRate: 15});
   display.frameRate = 15;
 
-  var layer0 = display.addLayer();
+  var layer0 = display.createLayer();
 
-  var ball = doodle.Sprite();
+  var ball = doodle.createSprite();
   layer0.addChild(ball);
   ball.graphics.beginFill(0xff0000);
   ball.graphics.circle(0, 0, 40);
@@ -54,6 +54,6 @@
     </script>
   </head>
   <body style="background-color: #bbbbbb;" onload="init_scene();">
-    <div id="my_display" width="800" height="600" style="background-color: #ffffff;"></div>
+    <div id="display" style="background-color: #fff; width: 800px; height: 600px;"></div>
   </body>
 </html>
diff --git a/doc/examples/making-things-move/chap03/01-rotate_arrow.html b/doc/examples/making-things-move/chap03/01-rotate_arrow.html
@@ -13,16 +13,16 @@
  * http://www.amazon.com/gp/product/1590597915?tag=de05f-20
  *
  * Ported to JavaScript by Billy Lamberta using the Doodle.js library
- * available at http://github.com/biilly/doodle-js
+ * available at http://github.com/billyist/doodle-js
  */
 
 function init_scene () {
-  var display = doodle.Display("#my_display");
+  var display = doodle.createDisplay("#display");
   display.frameRate = 15;
 
-  var layer0 = display.addLayer();
+  var layer0 = display.createLayer();
 
-  var arrow = Arrow();
+  var arrow = createArrow();
   arrow.x = display.width/2;
   arrow.y = display.height/2;
   layer0.addChild(arrow);
@@ -40,6 +40,6 @@
     </script>
   </head>
   <body style="background-color: #bbbbbb;" onload="init_scene();">
-    <div id="my_display" width="800" height="600" style="background-color: #ffffff;"></div>
+    <div id="display" style="background-color: #fff; width: 800px; height: 600px;"></div>
   </body>
 </html>
diff --git a/doc/examples/making-things-move/chap03/02-up_down_motion.html b/doc/examples/making-things-move/chap03/02-up_down_motion.html
@@ -13,7 +13,7 @@
  * http://www.amazon.com/gp/product/1590597915?tag=de05f-20
  *
  * Ported to JavaScript by Billy Lamberta using the Doodle.js library
- * available at http://github.com/biilly/doodle-js
+ * available at http://github.com/billyist/doodle-js
  */
 
 function init_scene () {
@@ -22,12 +22,12 @@
       range = 50,
       speed = 0.1;
 
-  var display = doodle.Display("#my_display");
+  var display = doodle.createDisplay("#display");
   display.frameRate = 20;
 
-  var layer0 = display.addLayer();
+  var layer0 = display.createLayer();
 
-  var ball = Ball();
+  var ball = createBall();
   ball.x = display.width/2;
   layer0.addChild(ball);
 
@@ -42,6 +42,6 @@
     </script>
   </head>
   <body style="background-color: #bbbbbb;" onload="init_scene();">
-    <div id="my_display" width="800" height="600" style="background-color: #ffffff;"></div>
+    <div id="display" style="background-color: #fff; width: 800px; height: 600px;"></div>
   </body>
 </html>
diff --git a/doc/examples/making-things-move/chap03/03-linear_vertical_motion.html b/doc/examples/making-things-move/chap03/03-linear_vertical_motion.html
@@ -13,7 +13,7 @@
  * http://www.amazon.com/gp/product/1590597915?tag=de05f-20
  *
  * Ported to JavaScript by Billy Lamberta using the Doodle.js library
- * available at http://github.com/biilly/doodle-js
+ * available at http://github.com/billyist/doodle-js
  */
 
 function init_scene () {
@@ -23,12 +23,12 @@
       xspeed = 1,
       yspeed = 0.05;
 
-  var display = doodle.Display("#my_display");
+  var display = doodle.createDisplay("#display");
   display.frameRate = 20;
 
-  var layer0 = display.addLayer();
+  var layer0 = display.createLayer();
 
-  var ball = Ball();
+  var ball = createBall();
   ball.x = 0;
   layer0.addChild(ball);
 
@@ -44,6 +44,6 @@
     </script>
   </head>
   <body style="background-color: #bbbbbb;" onload="init_scene();">
-    <div id="my_display" width="800" height="600" style="background-color: #ffffff;"></div>
+    <div id="display" style="background-color: #fff; width: 800px; height: 600px;"></div>
   </body>
 </html>
diff --git a/doc/examples/making-things-move/chap03/04-pulsing_motion.html b/doc/examples/making-things-move/chap03/04-pulsing_motion.html
@@ -13,7 +13,7 @@
  * http://www.amazon.com/gp/product/1590597915?tag=de05f-20
  *
  * Ported to JavaScript by Billy Lamberta using the Doodle.js library
- * available at http://github.com/biilly/doodle-js
+ * available at http://github.com/billyist/doodle-js
  */
 
 function init_scene () {
@@ -22,12 +22,12 @@
       range = 0.5,
       speed = 0.1;
 
-  var display = doodle.Display("#my_display");
+  var display = doodle.createDisplay("#display");
   display.frameRate = 20;
 
-  var layer0 = display.addLayer();
+  var layer0 = display.createLayer();
 
-  var ball = Ball();
+  var ball = createBall();
   ball.x = display.width/2;
   ball.y = display.height/2;
   layer0.addChild(ball);
@@ -43,6 +43,6 @@
     </script>
   </head>
   <body style="background-color: #bbbbbb;" onload="init_scene();">
-    <div id="my_display" width="800" height="600" style="background-color: #ffffff;"></div>
+    <div id="display" style="background-color: #fff; width: 800px; height: 600px;"></div>
   </body>
 </html>