lamberta · shuizhongyueming · Nov 20, 2014 · May 27, 2018 · May 28, 2018 · May 28, 2018
diff --git a/custom/README.md b/custom/README.md
@@ -0,0 +1 @@
+尝试以ES6的方式重写所有的例子
diff --git a/custom/examples/ch02/04-mouse-position.html b/custom/examples/ch02/04-mouse-position.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mouse Position</title>
+    <link rel="stylesheet" href="../include/style.css">
+  </head>
+  <body>
+    <header>
+      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
+    </header>
+    <canvas id="canvas" width="400" height="400"></canvas>
+    <aside>Open debugging console in web browser and click mouse.</aside>
+
+    <!-- <script src="../include/utils.js"></script> -->
+    <script type="module">
+    import {captureMouse} from '../include/utils.js'
+    window.onload = function () {
+      var canvas = document.getElementById('canvas'),
+          mouse = captureMouse(canvas);
+
+      canvas.addEventListener('mousedown', function () {
+        console.log("x: " + mouse.x + ", y: " + mouse.y);
+      }, false);
+    };
+    </script>
+  </body>
+</html>
diff --git a/custom/examples/ch02/08-key-names.html b/custom/examples/ch02/08-key-names.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Key Names</title>
+    <link rel="stylesheet" href="../include/style.css">
+  </head>
+  <body>
+    <header>
+      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
+    </header>
+    <aside>Open debugging console in web browser and press arrow key.</aside>
+
+    <script type="module">
+    import keycode from '../../xtras/keycode.js'
+    window.onload = function () {
+
+      function onKeyboardEvent (event) {
+        switch (event.keyCode) {
+        case keycode.UP:
+          console.log("up!");
+          break;
+        case keycode.DOWN:
+          console.log("down!");
+          break;
+        case keycode.LEFT:
+          console.log("left!");
+          break;
+        case keycode.RIGHT:
+          console.log("right!");
+          break;
+        default:
+          console.log(event.keyCode);
+        }
+      }
+
+      window.addEventListener('keydown', onKeyboardEvent, false);
+    };
+    </script>
+  </body>
+</html>
diff --git a/custom/examples/ch03/01-rotate-to-mouse.html b/custom/examples/ch03/01-rotate-to-mouse.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Rotate to Mouse</title>
+    <link rel="stylesheet" href="../include/style.css">
+  </head>
+  <body>
+    <header>
+      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
+    </header>
+    <canvas id="canvas" width="400" height="400"></canvas>
+    <aside>Move mouse on canvas element.</aside>
+
+    <script type="module">
+    import {captureMouse} from '../include/utils.js'
+    import Arrow from './classes/arrow.js'
+    window.onload = () => {
+      const canvas = document.getElementById('canvas')
+      const context = canvas.getContext('2d')
+      let mouse = captureMouse(canvas)
+      let arrow = new Arrow()
+      arrow.x = canvas.width / 2
+      arrow.y = canvas.height / 2
+
+      ;(function drawFrame () {
+        window.requestAnimationFrame(drawFrame, canvas)
+        context.clearRect(0, 0, canvas.width, canvas.height)
+
+        const dx = mouse.x - arrow.x
+        const dy = mouse.y - arrow.y
+
+        arrow.rotation = Math.atan2(dy, dx)
+        arrow.draw(context)
+      }())
+    };
+    </script>
+  </body>
+</html>
diff --git a/custom/examples/ch03/02-bobbing-1.html b/custom/examples/ch03/02-bobbing-1.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Bobbing 1</title>
+    <link rel="stylesheet" href="../include/style.css">
+  </head>
+  <body>
+    <header>
+      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
+    </header>
+    <canvas id="canvas" width="400" height="400"></canvas>
+
+    <script type="module">
+    import '../include/utils.js';
+    import Ball from './classes/ball.js'
+    window.onload = function () {
+      const canvas = document.getElementById('canvas'),
+            context = canvas.getContext('2d'),
+            ball = new Ball();
+      const {width, height} = canvas;
+      const centerY = height / 2;
+      const range = 100;
+      let angle = 0;
+      const angleSpeed = 0.05;
+
+      ball.x = width / 2;
+      ball.y = centerY;
+
+      ;(function draw(){
+        window.requestAnimationFrame(draw, canvas);
+        context.clearRect(0, 0, width, height);
+
+        angle += angleSpeed;
+        ball.y = centerY + Math.sin(angle) * range;
+
+        ball.draw(context);
+      }());
+    };
+    </script>
+  </body>
+</html>
diff --git a/custom/examples/ch03/04-wave-1.html b/custom/examples/ch03/04-wave-1.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Bobbing 1</title>
+    <link rel="stylesheet" href="../include/style.css">
+  </head>
+  <body>
+    <header>
+      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
+    </header>
+    <canvas id="canvas" width="400" height="400"></canvas>
+
+    <script type="module">
+    import '../include/utils.js';
+    import Ball from './classes/ball.js'
+    window.onload = function () {
+      const canvas = document.getElementById('canvas'),
+            context = canvas.getContext('2d'),
+            ball = new Ball();
+      const {width, height} = canvas;
+      const centerY = height / 2;
+      const range = 100;
+      let angle = 0;
+      const angleSpeed = 0.05;
+      const speedX = 1;
+
+      ball.x = 0;
+      ball.y = centerY;
+
+      ;(function draw(){
+        window.requestAnimationFrame(draw, canvas);
+        context.clearRect(0, 0, width, height);
+
+        angle += angleSpeed;
+        ball.y = centerY + Math.sin(angle) * range;
+        ball.x += speedX;
+
+        ball.draw(context);
+      }());
+    };
+    </script>
+  </body>
+</html>
diff --git a/custom/examples/ch03/05-pulse.html b/custom/examples/ch03/05-pulse.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Bobbing 1</title>
+    <link rel="stylesheet" href="../include/style.css">
+  </head>
+  <body>
+    <header>
+      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
+    </header>
+    <canvas id="canvas" width="400" height="400"></canvas>
+
+    <script type="module">
+    import '../include/utils.js';
+    import Ball from './classes/ball.js'
+    window.onload = function () {
+      const canvas = document.getElementById('canvas'),
+            context = canvas.getContext('2d'),
+            ball = new Ball();
+      const {width, height} = canvas;
+      const range = 0.8;
+      const scaleBase = 1;
+      let angle = 0;
+      const angleSpeed = 0.05;
+
+      ball.x = width / 2;
+      ball.y = height / 2;
+
+      ;(function draw(){
+        window.requestAnimationFrame(draw, canvas);
+        context.clearRect(0, 0, width, height);
+
+        angle += angleSpeed;
+        ball.scaleX = ball.scaleY = scaleBase + Math.sin(angle) * range;
+
+        ball.draw(context);
+      }());
+    };
+    </script>
+  </body>
+</html>
diff --git a/custom/examples/ch03/06-random.html b/custom/examples/ch03/06-random.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Bobbing 1</title>
+    <link rel="stylesheet" href="../include/style.css">
+  </head>
+  <body>
+    <header>
+      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
+    </header>
+    <canvas id="canvas" width="400" height="400"></canvas>
+
+    <script type="module">
+    import '../include/utils.js';
+    import Ball from './classes/ball.js'
+    window.onload = function () {
+      const canvas = document.getElementById('canvas'),
+            context = canvas.getContext('2d'),
+            ball = new Ball();
+      const {width, height} = canvas;
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const range = 50;
+      let angleX = 0;
+      let angleY = 0;
+      const angleSpeedX = 0.07;
+      const angleSpeedY = 0.11;
+
+      ball.x = 0;
+      ball.y = centerY;
+
+      ;(function draw(){
+        window.requestAnimationFrame(draw, canvas);
+        context.clearRect(0, 0, width, height);
+
+        angleX += angleSpeedX;
+        angleY += angleSpeedY;
+        ball.x = centerX + Math.cos(angleX) * range;
+        ball.y = centerY + Math.sin(angleY) * range;
+
+        ball.draw(context);
+      }());
+    };
+    </script>
+  </body>
+</html>
diff --git a/custom/examples/ch03/07-wave-2.html b/custom/examples/ch03/07-wave-2.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Bobbing 1</title>
+    <link rel="stylesheet" href="../include/style.css">
+  </head>
+  <body>
+    <header>
+      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
+    </header>
+    <canvas id="canvas" width="400" height="400"></canvas>
+
+    <script type="module">
+    import '../include/utils.js';
+    window.onload = function () {
+      const canvas = document.getElementById('canvas'),
+            context = canvas.getContext('2d');
+      const {width, height} = canvas;
+      const centerY = height / 2;
+      let posX = 0;
+      let posY = centerY;
+      let angle = 0;
+      const angleSpeed = 0.05;
+      const speedX = 1;
+      const range = 50;
+
+      // 宽度太小，曲线不会很平滑
+      context.lineWidth = 2;
+
+      ;(function draw(){
+        window.requestAnimationFrame(draw, canvas);
+
+        // canvas的坐标系不一样 
+        // Y轴越大越向下
+        // 为了使得曲线一开始走正向
+        // 需要反向的函数波形
+        angle -= angleSpeed;
+
+        context.beginPath();
+        context.moveTo(posX, posY);
+
+        posX += speedX;
+        posY = centerY + Math.sin(angle) * range;
+
+        context.lineTo(posX, posY);
+        context.stroke();
+
+      }());
+    };
+    </script>
+  </body>
+</html>
diff --git a/custom/examples/ch03/08-circle.html b/custom/examples/ch03/08-circle.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Bobbing 1</title>
+    <link rel="stylesheet" href="../include/style.css">
+  </head>
+  <body>
+    <header>
+      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
+    </header>
+    <canvas id="canvas" width="400" height="400"></canvas>
+
+    <script type="module">
+    import '../include/utils.js';
+    import Ball from './classes/ball.js'
+    window.onload = function () {
+      const canvas = document.getElementById('canvas'),
+            context = canvas.getContext('2d'),
+            ball = new Ball();
+      const {width, height} = canvas;
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const range = 100;
+      let angle = 0;
+      const angleSpeed = 0.05;
+
+      ;(function draw(){
+        window.requestAnimationFrame(draw, canvas);
+        context.clearRect(0, 0, width, height);
+
+        ball.x = centerX + Math.cos(angle) * range;
+        ball.y = centerY + Math.sin(angle) * range;
+        angle += angleSpeed;
+
+        ball.draw(context);
+      }());
+    };
+    </script>
+  </body>
+</html>