Canvas и javaScript
 

В общем беда такая - есть задача сделать простую игрушку, где летают шары по рандому и добавляются препятствия (все через кнопки, плюч очистка поля). Естественно, все должно взаимодействовать между собой и перетаскиваться мышкой. У меня пока лишь беда - то шарики летают, то препятствия ставятся, а вместе ну ни как. А уж как мышью работать вообще не пойму.

window.onload = function() {
             canvas = document.getElementById("canvas");
             context = canvas.getContext("2d");
             canvas.width = 800;
             canvas.height = 400;
              canvas.onmousedown = canvasClick;
         
           setTimeout("drawFrame()", 20);
	    setTimeout("draw()", 20);
	   function loaded() {
	X[0]=20;
	Y[0]=20
	block(0); //запускаем функцию

var textX = 50;
var textY = 50;

function update() {
textX += 1;
textY += 1;
}

var FPS = 30; //интервал времени
var X=[]; //коорд X
var Y=[]; // коорд Y
var IdIl=0 // номер элемента


function Ball(x, y, dx, dy, radius) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
var colors = ["green", "blue", "red", "yellow", "#756391", "orange", "brown", "#09a4d1", "pink"];
var random = Math.floor(Math.random()*colors.length);
this.fillColor = colors[random];
}
function block(id_il){ //id_il - id элемента
var colors = ["Snow", "GhostWhite", "WhiteSmoke", "Gainsboro", "FloralWhite", "Seashell", "MintCream", "Azure", "Grey"];
var random = Math.floor(Math.random()*colors.length);
var big = ["70", "50", "60", "40", "80"];
var small = ["5", "10", "15"];
var randomBig = Math.floor(Math.random()*big.length);
var randomSmall = Math.floor(Math.random()*small.length);

context.fillStyle = colors[random];
context.beginPath();
context.fillRect(X[id_il],Y[id_il], big[randomBig], small[randomSmall])
context.closePath();
context.fill();
}

var balls = [];
var blocks = []; //массив кирпичей, не работает, гад!

function addBall() {
// Устанавливаем размер мячика
var radius = parseFloat(document.getElementById("ballSize").val ue);
// Создаем новый мячик
var ball = new Ball(50,50,6,6,radius);
// Сохраняем его в массиве
balls.push(ball);
}
function addBlock() { //!! кирпичи добавляются!!!
IdIl++;
var x = (1- Math.random())* (880-20); //генератор случайных чисел.
var y = (1 - Math.random())* (420-20);
X[IdIl] = x;
Y[IdIl] = y;
block(IdIl);
blocks.push(block);
}



function clear() {
// Удаляем все мячики и кирпичи
balls = [];
blocks = [];
}

function drawFrame() {
// Очистить холст
context.clearRect(0, 0, canvas.width, canvas.height);
// Вызываем метод beginPath(), чтобы убедиться,
// что мы не рисуем часть уже нарисованного содержимого холста
context.beginPath();
// Перебираем все мячики
for(var i=0; i<balls.length; i++) {
// Перемещаем каждый мячик в его новую позицию
var ball = balls[i];
ball.x += ball.dx;
ball.y += ball.dy;
// Добавляем движение мячика
if ((ball.y) < canvas.height) ball.dy;
// Добавляем эффект "трения", который замедляет движение мячика
ball.dx = ball.dx * 0.999;
// Если мячик натолкнулся на край холста, отбиваем его, но слегка увеличиваем скорость, чтоб не заглох
if ((ball.x + ball.radius > 800) || (ball.x - ball.radius < 0)) {
ball.dx = -ball.dx*1.01;
}
// Если мячик упал вниз, отбиваем его, но слегка уменьшаем скорость
if ((ball.y + ball.radius > canvas.height) || (ball.y - ball.radius < 0)) {
ball.dy = -ball.dy*0.99;
}
context.beginPath();
context.fillStyle = ball.fillColor;
// Рисуем мячик
context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
context.fill();
}
// Рисуем следующий кадр через 20 миллисекунд
setTimeout("drawFrame()", 20);
}
function draw() {
block ();
setTimeout("draw()", 20);
}


function canvasClick(e) {
// Координаты щелчка мышью
var clickX = e.pageX - canvas.offsetLeft;
var clickY = e.pageY - canvas.offsetTop;
for(var i in balls)
{
var ball = balls[i];

// Проверка попадания
if ((clickX > (ball.x-ball.radius)) && (clickX < (ball.x+ball.radius)))
{
if ((clickY > (ball.y-ball.radius)) && (clickY < (ball.y+ball.radius)))
{
// Изменить скорость мячика
ball.dx -= 4;
ball.dy -= 5;
return;
}
}
}
}[/JS]