Skip to content

Commit

Permalink
First commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Apress committed Oct 15, 2016
0 parents commit c52113b
Show file tree
Hide file tree
Showing 237 changed files with 15,828 additions and 0 deletions.
Binary file added 9781430236658.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletions LICENSE.txt
@@ -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.


15 changes: 15 additions & 0 deletions README.md
@@ -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.
14 changes: 14 additions & 0 deletions contributing.md
@@ -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!
11 changes: 11 additions & 0 deletions html5-animation-source-code/README
@@ -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 html5-animation-source-code/examples/ch02/01-skeleton.html
@@ -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 html5-animation-source-code/examples/ch02/02-event-demo.html
@@ -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 html5-animation-source-code/examples/ch02/03-mouse-events.html
@@ -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 html5-animation-source-code/examples/ch02/04-mouse-position.html
@@ -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 html5-animation-source-code/examples/ch02/05-touch-events.html
@@ -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 html5-animation-source-code/examples/ch02/06-keyboard-events.html
@@ -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 html5-animation-source-code/examples/ch02/07-key-codes.html
@@ -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 html5-animation-source-code/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 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 html5-animation-source-code/examples/ch03/01-rotate-to-mouse.html
@@ -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>

0 comments on commit c52113b

Please sign in to comment.