HTML and CSS Reference
In-Depth Information
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<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(20),
lines = [],
gravity = 0.2,
bounce = -0.6;
ball.x = 100;
ball.y = 50;
//create 5 lines, position and rotate
lines[0] = new Line(-50, 0, 50, 0);
lines[0].x = 100;
lines[0].y = 100;
lines[0].rotation = 30 * Math.PI / 180;
lines[1] = new Line(-50, 0, 50, 0);
lines[1].x = 100;
lines[1].y = 200;
lines[1].rotation = 45 * Math.PI / 180;
lines[2] = new Line(-50, 0, 50, 0);
lines[2].x = 220;
lines[2].y = 150;
lines[2].rotation = -20 * Math.PI / 180;
lines[3] = new Line(-50, 0, 50, 0);
lines[3].x = 150;
lines[3].y = 330;
lines[3].rotation = 10 * Math.PI / 180;
lines[4] = new Line(-50, 0, 50, 0);
lines[4].x = 230;
lines[4].y = 250;
lines[4].rotation = -30 * Math.PI / 180;
function checkLine (line) {
var bounds = line.getBounds();
if (ball.x + ball.radius > bounds.x && ball.x - ball.radius < bounds.x + bounds.width) {
//get sine and cosine of angle
var cos = Math.cos(line.rotation),
sin = Math.sin(line.rotation),
//get position of ball, relative to line
x1 = ball.x - line.x,
Search WWH ::




Custom Search