Canvas и javaScript

[varanika]

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

window.onload = function() {
             // Определение контекста рисования
             canvas = document.getElementById("canvas");
             context = canvas.getContext("2d");
             canvas.width = 800;
             canvas.height = 400;
              canvas.onmousedown = canvasClick;
              
             // Обновляем холст через 0.02 секунды
           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").value);
    // Создаем новый мячик
    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;
      }
    }
  }
}