Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Apress
committed
Oct 15, 2016
0 parents
commit c52113b
Showing
237 changed files
with
15,828 additions
and
0 deletions.
There are no files selected for viewing
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
Freeware License, some rights reserved | ||
|
||
Copyright (c) 2011 Billy Lamberta and Keith Peters | ||
|
||
Permission is hereby granted, free of charge, to anyone obtaining a copy | ||
of this software and associated documentation files (the "Software"), | ||
to work with the Software within the limits of freeware distribution and fair use. | ||
This includes the rights to use, copy, and modify the Software for personal use. | ||
Users are also allowed and encouraged to submit corrections and modifications | ||
to the Software for the benefit of other users. | ||
|
||
It is not allowed to reuse, modify, or redistribute the Software for | ||
commercial use in any way, or for a user�s educational materials such as books | ||
or blog articles without prior permission from the copyright holder. | ||
|
||
The above copyright notice and this permission notice need to be included | ||
in all copies or substantial portions of the software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
AUTHORS OR COPYRIGHT HOLDERS OR APRESS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
SOFTWARE. | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
#Apress Source Code | ||
|
||
This repository accompanies [*Foundation HTML5 Animation with JavaScript*](http://www.apress.com/9781430236658) by Billy Lamberta and Keith Peters (Apress, 2011). | ||
|
||
![Cover image](9781430236658.jpg) | ||
|
||
Download the files as a zip using the green button, or clone the repository to your machine using Git. | ||
|
||
##Releases | ||
|
||
Release v1.0 corresponds to the code in the published book, without corrections or updates. | ||
|
||
##Contributions | ||
|
||
See the file Contributing.md for more information on how you can contribute to this repository. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
# Contributing to Apress Source Code | ||
|
||
Copyright for Apress source code belongs to the author(s). However, under fair use you are encouraged to fork and contribute minor corrections and updates for the benefit of the author(s) and other readers. | ||
|
||
## How to Contribute | ||
|
||
1. Make sure you have a GitHub account. | ||
2. Fork the repository for the relevant book. | ||
3. Create a new branch on which to make your change, e.g. | ||
`git checkout -b my_code_contribution` | ||
4. Commit your change. Include a commit message describing the correction. Please note that if your commit message is not clear, the correction will not be accepted. | ||
5. Submit a pull request. | ||
|
||
Thank you for your contribution! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
This example code is from 'Foundation HTML5 Animation with JavaScript' | ||
by Billy Lamberta and Keith Peters, published by Apress. | ||
http://amzn.com/1430236655?tag=html5anim-20 | ||
|
||
You are free to use this source code as you wish. For a | ||
detailed explanation of each exercise, or if you find these | ||
listings helpful and would like to support our work, please | ||
consider buying the book. | ||
|
||
The latest version of this code can be found at | ||
https://github.com/lamberta/html5-animation |
16 changes: 16 additions & 0 deletions
16
html5-animation-source-code/examples/ch02/01-skeleton.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title></title> | ||
<link rel="stylesheet" href="../include/style.css"> | ||
</head> | ||
<body> | ||
<canvas id="canvas" width="400" height="400"></canvas> | ||
<script> | ||
window.onload = function () { | ||
//Our code here... | ||
}; | ||
</script> | ||
</body> | ||
</html> |
29 changes: 29 additions & 0 deletions
29
html5-animation-source-code/examples/ch02/02-event-demo.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Event Demo</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> | ||
window.onload = function () { | ||
var canvas = document.getElementById('canvas'); | ||
|
||
canvas.addEventListener('mousedown', function (event) { | ||
console.log("mouse down"); | ||
}, false); | ||
|
||
canvas.addEventListener('mouseup', function (event) { | ||
console.log("mouse up"); | ||
}, false); | ||
}; | ||
</script> | ||
</body> | ||
</html> |
34 changes: 34 additions & 0 deletions
34
html5-animation-source-code/examples/ch02/03-mouse-events.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Mouse Events</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 move/click mouse.</aside> | ||
|
||
<script> | ||
window.onload = function () { | ||
var canvas = document.getElementById('canvas'); | ||
|
||
function onMouseEvent (event) { | ||
console.log(event.type); | ||
} | ||
|
||
canvas.addEventListener('mousedown', onMouseEvent, false); | ||
canvas.addEventListener('mouseup', onMouseEvent, false); | ||
canvas.addEventListener('click', onMouseEvent, false); | ||
canvas.addEventListener('dblclick', onMouseEvent, false); | ||
canvas.addEventListener('mousewheel', onMouseEvent, false); | ||
canvas.addEventListener('mousemove', onMouseEvent, false); | ||
canvas.addEventListener('mouseover', onMouseEvent, false); | ||
canvas.addEventListener('mouseout', onMouseEvent, false); | ||
}; | ||
</script> | ||
</body> | ||
</html> |
27 changes: 27 additions & 0 deletions
27
html5-animation-source-code/examples/ch02/04-mouse-position.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
<!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> | ||
window.onload = function () { | ||
var canvas = document.getElementById('canvas'), | ||
mouse = utils.captureMouse(canvas); | ||
|
||
canvas.addEventListener('mousedown', function () { | ||
console.log("x: " + mouse.x + ", y: " + mouse.y); | ||
}, false); | ||
}; | ||
</script> | ||
</body> | ||
</html> |
30 changes: 30 additions & 0 deletions
30
html5-animation-source-code/examples/ch02/05-touch-events.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Touch Events</title> | ||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> | ||
<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 of touch-capable device.</aside> | ||
|
||
<script> | ||
window.onload = function () { | ||
var canvas = document.getElementById('canvas'); | ||
|
||
function onTouchEvent (event) { | ||
console.log(event.type); | ||
} | ||
|
||
canvas.addEventListener('touchstart', onTouchEvent, false); | ||
canvas.addEventListener('touchend', onTouchEvent, false); | ||
canvas.addEventListener('touchmove', onTouchEvent, false); | ||
}; | ||
</script> | ||
</body> | ||
</html> |
26 changes: 26 additions & 0 deletions
26
html5-animation-source-code/examples/ch02/06-keyboard-events.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Keyboard Events</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 key.</aside> | ||
|
||
<script> | ||
window.onload = function () { | ||
|
||
function onKeyboardEvent (event) { | ||
console.log(event.type); | ||
} | ||
|
||
window.addEventListener('keydown', onKeyboardEvent, false); | ||
window.addEventListener('keyup', onKeyboardEvent, false); | ||
}; | ||
</script> | ||
</body> | ||
</html> |
40 changes: 40 additions & 0 deletions
40
html5-animation-source-code/examples/ch02/07-key-codes.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Key Codes</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> | ||
window.onload = function () { | ||
|
||
function onKeyboardEvent (event) { | ||
switch (event.keyCode) { | ||
case 38: | ||
console.log("up!"); | ||
break; | ||
case 40: | ||
console.log("down!"); | ||
break; | ||
case 37: | ||
console.log("left!"); | ||
break; | ||
case 39: | ||
console.log("right!"); | ||
break; | ||
default: | ||
console.log(event.keyCode); | ||
} | ||
} | ||
|
||
window.addEventListener('keydown', onKeyboardEvent, false); | ||
}; | ||
</script> | ||
</body> | ||
</html> |
41 changes: 41 additions & 0 deletions
41
html5-animation-source-code/examples/ch02/08-key-names.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 src="../../xtras/keycode.js"></script> | ||
<script> | ||
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> |
40 changes: 40 additions & 0 deletions
40
html5-animation-source-code/examples/ch03/01-rotate-to-mouse.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
<!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 src="../include/utils.js"></script> | ||
<script src="./classes/arrow.js"></script> | ||
<script> | ||
window.onload = function () { | ||
var canvas = document.getElementById('canvas'), | ||
context = canvas.getContext('2d'), | ||
mouse = utils.captureMouse(canvas), | ||
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); | ||
|
||
var dx = mouse.x - arrow.x, | ||
dy = mouse.y - arrow.y; | ||
|
||
arrow.rotation = Math.atan2(dy, dx); //radians | ||
arrow.draw(context); | ||
}()); | ||
}; | ||
</script> | ||
</body> | ||
</html> |
Oops, something went wrong.