Подскажите, как отрисовать круглый шарик?
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;
}
}
