HTML and CSS Reference
In-Depth Information
<script src="utils.js"></script>
<script src="ball.js"></script>
<script src="line.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball = new Ball(),
line = new Line(0, 0, 300, 0),
gravity = 0.2,
bounce = -0.6;
ball.x = 100;
ball.y = 100;
line.x = 50;
line.y = 200;
line.rotation = 10 * Math.PI / 180; //10 degrees to radians
//get sine and cosine of angle
var cos = Math.cos(line.rotation),
sin = Math.sin(line.rotation);
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
//normal motion code
ball.vy += gravity;
ball.x += ball.vx;
ball.y += ball.vy;
//get position of ball, relative to line
var x1 = ball.x - line.x,
y1 = ball.y - line.y,
//rotate coordinates
x2 = x1 * cos + y1 * sin,
y2 = y1 * cos - x1 * sin,
//rotate velocity
vx1 = ball.vx * cos + ball.vy * sin,
vy1 = ball.vy * cos - ball.vx * sin;
//perform bounce with rotated values
if (y2 > -ball.radius) {
y2 = -ball.radius;
vy1 *= bounce;
}
//rotate everything back
x1 = x2 * cos - y2 * sin;
y1 = y2 * cos + x2 * sin;
