From 24a330ff8da8636dbe9db85360d2f2d496171293 Mon Sep 17 00:00:00 2001
From: happy wang
Date: Thu, 20 Nov 2014 11:50:48 +0800
Subject: [PATCH 01/44] Update 07-wave-2.html
make the wave is more like a sin
---
examples/ch03/07-wave-2.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/examples/ch03/07-wave-2.html b/examples/ch03/07-wave-2.html
index b226853..cd8b1b7 100644
--- a/examples/ch03/07-wave-2.html
+++ b/examples/ch03/07-wave-2.html
@@ -33,7 +33,7 @@
context.moveTo(xpos, ypos);
//Calculate the new position.
xpos += xspeed;
- angle += yspeed;
+ angle -= yspeed; // Coordinate of canvas is different
ypos = centerY + Math.sin(angle) * range;
context.lineTo(xpos, ypos);
context.stroke();
From f89141f8636cb5c59ca2178a37a14dcef8b153af Mon Sep 17 00:00:00 2001
From: shuizhongyueming
Date: Sun, 27 May 2018 23:00:03 +0800
Subject: [PATCH 02/44] =?UTF-8?q?+=20=E6=96=B0=E5=A2=9Ecustom=E7=9B=AE?=
=?UTF-8?q?=E5=BD=95=E7=94=A8=E6=9D=A5=E5=B0=9D=E8=AF=95=E6=8A=8A=E6=95=B4?=
=?UTF-8?q?=E4=B8=AA=E9=A1=B9=E7=9B=AE=E7=94=A8es6=E5=AE=9E=E7=8E=B0=20+?=
=?UTF-8?q?=20=E5=AE=8C=E6=88=90utils.js=E7=9A=84captureMouse=E5=92=8Ccapt?=
=?UTF-8?q?ureTouch=E7=9A=84=E8=BD=AC=E6=8D=A2=20+=20=E5=AE=8C=E6=88=90dem?=
=?UTF-8?q?o=2004-mouse-position.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
custom/README.md | 1 +
custom/examples/ch02/04-mouse-position.html | 28 ++++
custom/examples/include/style.css | 138 ++++++++++++++++++++
custom/examples/include/utils.js | 123 +++++++++++++++++
4 files changed, 290 insertions(+)
create mode 100644 custom/README.md
create mode 100644 custom/examples/ch02/04-mouse-position.html
create mode 100644 custom/examples/include/style.css
create mode 100644 custom/examples/include/utils.js
diff --git a/custom/README.md b/custom/README.md
new file mode 100644
index 0000000..fb3bf83
--- /dev/null
+++ b/custom/README.md
@@ -0,0 +1 @@
+尝试以ES6的方式重写所有的例子
\ No newline at end of file
diff --git a/custom/examples/ch02/04-mouse-position.html b/custom/examples/ch02/04-mouse-position.html
new file mode 100644
index 0000000..ce6aa5a
--- /dev/null
+++ b/custom/examples/ch02/04-mouse-position.html
@@ -0,0 +1,28 @@
+
+
+
+
+ Mouse Position
+
+
+
+
+
+
+
+
+
+
+
diff --git a/custom/examples/include/style.css b/custom/examples/include/style.css
new file mode 100644
index 0000000..adfd0ae
--- /dev/null
+++ b/custom/examples/include/style.css
@@ -0,0 +1,138 @@
+/* Some HTML5 Tags
+ */
+
+ aside, footer, header, nav, section {
+ display: block;
+ }
+
+ /* Examples
+ */
+
+ body {
+ background-color: #bbb;
+ color: #383838;
+ }
+
+ #canvas {
+ background-color: #fff;
+ }
+
+ header {
+ padding-bottom: 10px;
+ }
+
+ header a {
+ color: #30f;
+ text-decoration: none;
+ }
+
+ aside {
+ padding-top: 6px;
+ }
+
+ /* Index page
+ */
+
+ #index-body {
+ background-color: #fdeba1;
+ font-family: "Vollkorn", serif;
+ color: #000;
+ }
+
+ #index-body a {
+ text-decoration: none;
+ color: #b30300;
+ }
+
+ #index-body #description, #index-body #exercises {
+ overflow: auto;
+ max-width: 900px;
+ margin: 0px auto 20px auto;
+ padding-left: 15px;
+ padding-bottom: 15px;
+ background-color: #fff;
+ border-radius: 15px;
+ }
+
+ #index-body #description {
+ margin-top: 40px;
+ }
+
+ #index-body h1 {
+ color: #b30300;
+ }
+
+ #index-body #description h2 {
+ margin-bottom: 0;
+ }
+
+ #index-body h1 a {
+ text-decoration: underline;
+ color: #b30300;
+ }
+
+ #index-body li h2, #index-body li h3, #index-body li h4 {
+ color: #000;
+ }
+
+ #index-body li h3 {
+ margin-bottom: 0px;
+ }
+
+ #index-body #description ul {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ }
+
+ #index-body #description ul li {
+ padding-bottom: 0.6em;
+ }
+ .container {
+ display: table;
+ width: 100%;
+ height: auto;
+ }
+ .container .text {
+ display:table-cell;
+ height:100%;
+ vertical-align:middle;
+ }
+ .container img {
+ padding: 0 20px;
+ display: block;
+ float: right;
+ }
+ .container .clear {
+ clear: both;
+ }
+
+ #exercises ul {
+ margin: 0;
+ padding: 4px 20px 10px 20px;
+ }
+
+ #exercises ol {
+ margin: 0 20px 10px 0;
+ padding: 0;
+ list-style-type: none;
+ }
+
+ #exercises ol li {
+ padding-top: 5px;
+ }
+
+ #exercises ol ol ol {
+ padding-left: 60px;
+ list-style-type: decimal-leading-zero;
+ }
+
+ #exercises ol ol ol li img, #exercises ol ol li img {
+ margin-left: 4px;
+ margin-bottom: -10;
+ }
+
+ #exercises h2 {
+ margin: 10px 0 0 0;
+ }
+
\ No newline at end of file
diff --git a/custom/examples/include/utils.js b/custom/examples/include/utils.js
new file mode 100644
index 0000000..17a2aec
--- /dev/null
+++ b/custom/examples/include/utils.js
@@ -0,0 +1,123 @@
+/**
+ * Normalize the browser animation API across implementations. This requests
+ * the browser to schedule a repaint of the window for the next animation frame.
+ * Checks for cross-browser support, and, failing to find it, falls back to setTimeout.
+ * @param {function} callback Function to call when it's time to update your animation for the next repaint.
+ * @param {HTMLElement} element Optional parameter specifying the element that visually bounds the entire animation.
+ * @return {number} Animation frame request.
+ */
+if (!window.requestAnimationFrame) {
+ window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ function (callback) {
+ return window.setTimeout(callback, 17 /*~ 1000/60*/);
+ });
+ }
+
+/**
+ * ERRATA: 'cancelRequestAnimationFrame' renamed to 'cancelAnimationFrame' to reflect an update to the W3C Animation-Timing Spec.
+ *
+ * Cancels an animation frame request.
+ * Checks for cross-browser support, falls back to clearTimeout.
+ * @param {number} Animation frame request.
+ */
+if (!window.cancelAnimationFrame) {
+ window.cancelAnimationFrame = (window.cancelRequestAnimationFrame ||
+ window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame ||
+ window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame ||
+ window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame ||
+ window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame ||
+ window.clearTimeout);
+}
+
+/**
+ * Keeps track of the current mouse position, relative to an element.
+ * @param {HTMLElement} element
+ * @return {object} Contains properties: x, y, event
+ */
+export function captureMouse (element) {
+ let mouse = {x: 0, y: 0, event: null}
+ const {
+ scrollLeft: body_scrollLeft,
+ scrollTop: body_scrollTop
+ } = document.body
+ const {
+ scrollLeft: element_scrollLeft,
+ scrollTop: element_scrollTop
+ } = document.documentElement
+ const {offsetLeft, offsetTop} = element
+
+ element.addEventListener('mousemove', event => {
+ let x, y
+
+ if (event.pageX || event.pageY) {
+ x = event.pageX
+ y = event.pageY
+ } else {
+ x = event.clientX + body_scrollLeft + element_scrollLeft
+ y = event.clientY + body_scrollTop + element_scrollTop
+ }
+
+ x -= offsetLeft
+ y -= offsetTop
+
+ mouse.x = x
+ mouse.y = y
+ mouse.event = event
+ }, false)
+
+ return mouse
+}
+
+/**
+ * Keeps track of the current (first) touch position, relative to an element.
+ * @param {HTMLElement} element
+ * @return {object} Contains properties: x, y, isPressed, event
+ */
+export function captureTouch (element) {
+ let touch = {x: null, y: null, isPressed: false, event: null}
+ const {
+ scrollLeft: body_scrollLeft,
+ scrollTop: body_scrollTop
+ } = document.body
+ const {
+ scrollLeft: element_scrollLeft,
+ scrollTop: element_scrollTop
+ } = document.documentElement
+ const {offsetLeft, offsetTop} = element
+
+ element.addEventListener('touchstart', event => {
+ touch.isPressed = true;
+ touch.event = event;
+ }, false);
+
+ element.addEventListener('touchend', event => {
+ touch.isPressed = false;
+ touch.x = null;
+ touch.y = null;
+ touch.event = event;
+ }, false);
+
+ element.addEventListener('touchmove', event => {
+ let x, y,
+ touch_event = event.touches[0]; //first touch
+
+ if (touch_event.pageX || touch_event.pageY) {
+ x = touch_event.pageX;
+ y = touch_event.pageY;
+ } else {
+ x = touch_event.clientX + body_scrollLeft + element_scrollLeft;
+ y = touch_event.clientY + body_scrollTop + element_scrollTop;
+ }
+ x -= offsetLeft;
+ y -= offsetTop;
+
+ touch.x = x;
+ touch.y = y;
+ touch.event = event;
+ }, false);
+
+ return touch;
+};
From 85c1883846f01ec1d5f3c6224a5423fd75c1c308 Mon Sep 17 00:00:00 2001
From: shuizhongyueming
Date: Mon, 28 May 2018 22:43:09 +0800
Subject: [PATCH 03/44] =?UTF-8?q?+=20=E6=96=B0=E5=A2=9Extras/keycode.js=20?=
=?UTF-8?q?+=20=E6=94=B9=E5=86=99ch02/08-key-names.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
custom/examples/ch02/08-key-names.html | 41 ++++++++
custom/xtras/keycode.js | 129 +++++++++++++++++++++++++
2 files changed, 170 insertions(+)
create mode 100644 custom/examples/ch02/08-key-names.html
create mode 100644 custom/xtras/keycode.js
diff --git a/custom/examples/ch02/08-key-names.html b/custom/examples/ch02/08-key-names.html
new file mode 100644
index 0000000..088fc5a
--- /dev/null
+++ b/custom/examples/ch02/08-key-names.html
@@ -0,0 +1,41 @@
+
+
+
+
+ Key Names
+
+
+
+
+
+
+
+
+
diff --git a/custom/xtras/keycode.js b/custom/xtras/keycode.js
new file mode 100644
index 0000000..6f483bd
--- /dev/null
+++ b/custom/xtras/keycode.js
@@ -0,0 +1,129 @@
+/**
+ * A list of JavaScript key codes to reference by name.
+ * From 'Foundation HTML5 Animation with JavaScript': http://amzn.com/1430236655?tag=html5anim-20
+ */
+
+const keycode = {
+ BACKSPACE: 8,
+ TAB: 9,
+ ENTER: 13,
+ COMMAND: 15,
+ SHIFT: 16,
+ CONTROL: 17,
+ ALTERNATE: 18,
+ PAUSE: 19,
+ CAPS_LOCK: 20,
+ NUMPAD: 21,
+ ESCAPE: 27,
+ SPACE: 32,
+ PAGE_UP: 33,
+ PAGE_DOWN: 34,
+ END: 35,
+ HOME: 36,
+
+ //arrows
+ LEFT: 37,
+ UP: 38,
+ RIGHT: 39,
+ DOWN: 40,
+
+ INSERT: 45,
+ DELETE: 46,
+
+ //numbers
+ NUMBER_0: 48,
+ NUMBER_1: 49,
+ NUMBER_2: 50,
+ NUMBER_3: 51,
+ NUMBER_4: 52,
+ NUMBER_5: 53,
+ NUMBER_6: 54,
+ NUMBER_7: 55,
+ NUMBER_8: 56,
+ NUMBER_9: 57,
+
+ //letters
+ A: 65,
+ B: 66,
+ C: 67,
+ D: 68,
+ E: 69,
+ F: 70,
+ G: 71,
+ H: 72,
+ I: 73,
+ J: 74,
+ K: 75,
+ L: 76,
+ M: 77,
+ N: 78,
+ O: 79,
+ P: 80,
+ Q: 81,
+ R: 82,
+ S: 83,
+ T: 84,
+ U: 85,
+ V: 86,
+ W: 87,
+ X: 88,
+ Y: 89,
+ Z: 90,
+
+ LEFT_WINDOW_KEY: 91,
+ RIGHT_WINDOW_KEY: 92,
+ SELECT_KEY: 93,
+
+ //number pad
+ NUMPAD_0: 96,
+ NUMPAD_1: 97,
+ NUMPAD_2: 98,
+ NUMPAD_3: 99,
+ NUMPAD_4: 100,
+ NUMPAD_5: 101,
+ NUMPAD_6: 102,
+ NUMPAD_7: 103,
+ NUMPAD_8: 104,
+ NUMPAD_9: 105,
+ NUMPAD_MULTIPLY: 106,
+ NUMPAD_ADD: 107,
+ NUMPAD_ENTER: 108,
+ NUMPAD_SUBTRACT: 109,
+ NUMPAD_DECIMAL: 110,
+ NUMPAD_DIVIDE: 111,
+
+ //function keys
+ F1: 112,
+ F2: 113,
+ F3: 114,
+ F4: 115,
+ F5: 116,
+ F6: 117,
+ F7: 118,
+ F8: 119,
+ F9: 120,
+ F10: 121,
+ F11: 122,
+ F12: 123,
+ F13: 124,
+ F14: 125,
+ F15: 126,
+
+ NUM_LOCK: 144,
+ SCROLL_LOCK: 145,
+
+ //punctuation
+ SEMICOLON: 186,
+ EQUAL: 187,
+ COMMA: 188,
+ MINUS: 189,
+ PERIOD: 190,
+ SLASH: 191,
+ BACKQUOTE: 192,
+ LEFTBRACKET: 219,
+ BACKSLASH: 220,
+ RIGHTBRACKET: 221,
+ QUOTE: 222
+};
+
+export default keycode
\ No newline at end of file
From 9fb213a77d8787fa7443b79c38af11575ef3f368 Mon Sep 17 00:00:00 2001
From: shuizhongyueming
Date: Mon, 28 May 2018 23:25:23 +0800
Subject: [PATCH 04/44] =?UTF-8?q?+=20=E5=AE=8C=E6=88=90ch03=E7=9A=84classe?=
=?UTF-8?q?s=E9=83=A8=E5=88=86=E7=9A=84=E8=BD=AC=E6=8D=A2=20+=20=E5=AE=8C?=
=?UTF-8?q?=E6=88=90ch03/01-rotate-to-mouse.html=E7=9A=84=E6=94=B9?=
=?UTF-8?q?=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
custom/examples/ch03/01-rotate-to-mouse.html | 41 ++++++++++++++++++++
custom/examples/ch03/classes/arrow.js | 30 ++++++++++++++
custom/examples/ch03/classes/ball.js | 32 +++++++++++++++
3 files changed, 103 insertions(+)
create mode 100644 custom/examples/ch03/01-rotate-to-mouse.html
create mode 100644 custom/examples/ch03/classes/arrow.js
create mode 100644 custom/examples/ch03/classes/ball.js
diff --git a/custom/examples/ch03/01-rotate-to-mouse.html b/custom/examples/ch03/01-rotate-to-mouse.html
new file mode 100644
index 0000000..0c0dffc
--- /dev/null
+++ b/custom/examples/ch03/01-rotate-to-mouse.html
@@ -0,0 +1,41 @@
+
+
+
+
+ Rotate to Mouse
+
+
+
+
+
+
+
+
+
+
diff --git a/custom/examples/ch03/classes/arrow.js b/custom/examples/ch03/classes/arrow.js
new file mode 100644
index 0000000..9a18cbc
--- /dev/null
+++ b/custom/examples/ch03/classes/arrow.js
@@ -0,0 +1,30 @@
+export default class Arrow {
+ constructor() {
+ this.x = 0;
+ this.y = 0;
+ this.color = "#ffff00";
+ this.rotation = 0;
+ }
+ draw(context) {
+ context.save();
+ context.translate(this.x, this.y);
+ context.rotate(this.rotation);
+
+ context.lineWidth = 2;
+ context.fillStyle = this.color;
+ context.beginPath();
+ context.moveTo(-50, -25);
+ context.lineTo(0, -25);
+ context.lineTo(0, -50);
+ context.lineTo(50, 0);
+ context.lineTo(0, 50);
+ context.lineTo(0, 25);
+ context.lineTo(-50, 25);
+ context.lineTo(-50, -25);
+ context.closePath();
+ context.fill();
+ context.stroke();
+
+ context.restore();
+ }
+}
diff --git a/custom/examples/ch03/classes/ball.js b/custom/examples/ch03/classes/ball.js
new file mode 100644
index 0000000..f9023e9
--- /dev/null
+++ b/custom/examples/ch03/classes/ball.js
@@ -0,0 +1,32 @@
+export default class Ball {
+ constructor(radius, color) {
+ if (radius === undefined) { radius = 40; }
+ if (color === undefined) { color = "#ff0000"; }
+ this.x = 0;
+ this.y = 0;
+ this.radius = radius;
+ this.rotation = 0;
+ this.scaleX = 1;
+ this.scaleY = 1;
+ this.color = utils.parseColor(color);
+ this.lineWidth = 1;
+ }
+ draw() {
+ context.save();
+ context.translate(this.x, this.y);
+ context.rotate(this.rotation);
+ context.scale(this.scaleX, this.scaleY);
+
+ context.lineWidth = this.lineWidth;
+ context.fillStyle = this.color;
+ context.beginPath();
+ //x, y, radius, start_angle, end_angle, anti-clockwise
+ context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
+ context.closePath();
+ context.fill();
+ if (this.lineWidth > 0) {
+ context.stroke();
+ }
+ context.restore();
+ }
+}
From e5872e0d6f38ae9efd30588661417c05988a18a8 Mon Sep 17 00:00:00 2001
From: shuizhongyueming
Date: Tue, 29 May 2018 23:39:53 +0800
Subject: [PATCH 05/44] =?UTF-8?q?+=20utils=20=E6=96=B0=E5=A2=9EparseColor?=
=?UTF-8?q?=20+=20=E4=BF=AE=E5=A4=8Dball.js=E7=9A=84=E4=BE=9D=E8=B5=96?=
=?UTF-8?q?=E9=97=AE=E9=A2=98=20+=20=E5=AE=8C=E6=88=90ch03/02-bobbing-1.ht?=
=?UTF-8?q?ml=E7=9A=84=E6=94=B9=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
custom/examples/ch03/01-rotate-to-mouse.html | 6 +--
custom/examples/ch03/02-bobbing-1.html | 42 ++++++++++++++++++++
custom/examples/ch03/classes/ball.js | 6 ++-
custom/examples/include/utils.js | 23 +++++++++++
4 files changed, 71 insertions(+), 6 deletions(-)
create mode 100644 custom/examples/ch03/02-bobbing-1.html
diff --git a/custom/examples/ch03/01-rotate-to-mouse.html b/custom/examples/ch03/01-rotate-to-mouse.html
index 0c0dffc..dc66a8c 100644
--- a/custom/examples/ch03/01-rotate-to-mouse.html
+++ b/custom/examples/ch03/01-rotate-to-mouse.html
@@ -23,7 +23,7 @@
arrow.x = canvas.width / 2
arrow.y = canvas.height / 2
- const drawFrame = () => {
+ ;(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas)
context.clearRect(0, 0, canvas.width, canvas.height)
@@ -32,9 +32,7 @@
arrow.rotation = Math.atan2(dy, dx)
arrow.draw(context)
- }
-
- drawFrame()
+ }())
};
diff --git a/custom/examples/ch03/02-bobbing-1.html b/custom/examples/ch03/02-bobbing-1.html
new file mode 100644
index 0000000..3539304
--- /dev/null
+++ b/custom/examples/ch03/02-bobbing-1.html
@@ -0,0 +1,42 @@
+
+
+