[Max_02]

Подскажите, как отрисовать круглый шарик?

function rect(color, x, y, width, height) {
    this.color = color;
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.draw = function() {
        context.fillStyle = this.color;
        context.fillRect(this.x, this.y, this.width, this.height);
    };
}
function playerMove(e) {
    var y = e.pageY;
    if (player.height / 2 +10 < y && y < game.height - player.height / 2 - 10) {
        player.y = y - player.height / 2;
    }
}
function draw() {
    game.draw(); //игровое поле
    context.font = 'bold 128px courier';
    context.textAlign = 'center';
    context.textBaseline = 'top';
    context.fillStyle = 'white';
    context.fillText(ai.scores, 100, 0);
    context.fillText(player.scores, game.width - 100, 0);
    for (var i = 15; i < game.height; i += 45)
    // средняя линия
    {
        context.fillStyle = "white";
        context.fillRect(game.width / 2 - 10, i, 20, 30);
    }
    ai.draw(); // левый
    player.draw(); // правый
    ball.draw(); // шарик
}
function update() {
    aiMove();
    if (ball.y<0 || ball.y+ball.height>game.height) {
        // соприкосновение пол и потолок
        ball.vY = -ball.vY;
    }
    if (ball.x<0) { 
        ball.vX = -ball.vX;
        player.scores ++;
    }
    if (ball.x+ball.width>game.width) {
        ball.vX = -ball.vX;
        ai.scores ++;
    }
    if ((collision(ai, ball) && ball.vX<0) || (collision(player, ball) && ball.vX>0)){
        ball.vX = -ball.vX;
    }
    ball.x += ball.vX;
    ball.y += ball.vY;
	
	if (ai.scores === 5 || player.scores === 5){
	if(ai.scores === 5) {
	game.lose++;
	start=false;
	ball.x = game.width-player.width-1.5*ball.width-10;
	ball.y = game.height/2 - ball.width/2;
	ai.y = game.height/2 - ai.height/2;
	player.y = game.height/2 - ai.height/2;
	alert ("Вы проиграли, чтобы начать заново нажмите ОК");
	}
	else {
	game.win++;
	start = false;
	ball.x = player.width + ball.width;
	ball.y = game.height/2 - ball.width/2;
	ai.y = game.height/2;
	player.y =game.height/2 - ai.height/2;
	alert ("Поздравляю, вы выиграли, чтобы начать заново нажмите ОК!");
	}
	ball.vx=0;
	ball.vy=0;
	ai.scores = 0;
	player.scores =0;
	game.total++;
	}

}
function play() {
    draw(); // отрисовка на холсте
    update(); // обновляем 
}
function init() {
    game = new rect("green", 0, 0, 780, 520);
    ai = new rect("red", 10, game.height / 2 - 40, 20, 50);
    player = new rect("blue", game.width - 30, game.height / 2 - 40, 20, 50);
    ai.scores = 0;
    player.scores = 0;
    ball = new rect("black", 40, game.height / 2-10, 20, 20);
    ball.vX = 6;
    ball.vY = 6;
    canvas = document.getElementById("pong");
    canvas.width = game.width;
    canvas.height = game.height;
    context = canvas.getContext("2d");
    canvas.onmousemove = playerMove;
    setInterval(play, 1000 / 50);
}
function collision(objA, objB) {
    if (objA.x+objA.width  > objB.x &&
        objA.x             < objB.x+objB.width &&
        objA.y+objA.height > objB.y &&
        objA.y             < objB.y+objB.height) {
            return true;
        }
        else {
            return false;
            }
    }
    function aiMove() {
    var y;
    switch (ball.vY) {
    case 2:
        vY = 2;
        break;
    case 3:
        vY = 3;
        break;
    case 4:
        vY = 4;
        break;
    case 5:
        vY = 5;
        break;
    case 6:
        vY = 5;
        break;
    case 7:
        vY = 6;
        break;
    case 8:
        vY = 6;
        break;
    case 9:
        vY = 6;
        break;
    case 0:
        vY = 0;
        break;
    }

    if (ball.y < ai.y + ai.height / 2) {
        y = ai.y - vY;
    }
    if (ball.y > ai.y + ai.height / 2) {
        y = ai.y + vY;
    }
    if (10 < y && y < game.height - ai.height - 10) {
        ai.y = y;
    }
}