Помощь с JS

[Casque17]

Приветствую, помогите пожалуйста с заданием.

На javascript надо написать простенькую игру – чеканить мячик.
Белая страница без всего, границы окна браузера – это границы площадки, соударяясь с которыми мячик отскакивает (линейно).
Везде также действует линейная гравитация вниз, т.е. мячик стремиться упасть на пол.

Мячик – красный круг любого диаметра. Нажимая на него – мы как бы его ударяем в это место. Т.е. нажали снизу – пнули вверх, нажали слева – пнули вправо, нажали справа-снизу, пнули вверх-влево.
То есть пинаем – он ударяется о стенку, пытается упасть, мы его должны опять пнуть. Как при обычной чеканке мячика.

Как усложнение – в середине экрана находится треугольник (желательно произвольного размера) от которого мячик тоже отскакивает соударяясь.

Вот такой код уже написан:

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext("2d");
let ballRadius = 30;
let ball;
let x = canvas.width/2;
let y = canvas.height-30;
let dx = 1; // Здесь указывается по сути скорость движения
let dy = 1; // 0 будет означать, что скорость нулевая.
ctx.fillStyle = "#FF0000";

canvas.onclick = e => {
    if(ctx.isPointInPath(ball, e.offsetX, e.offsetY)){
            requestAnimationFrame(draw); // Здесь можно просто draw()
    }
}

function drawBall() {
    ball = new Path2D();
    ball.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fill(ball);
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    } if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }
    
    x += dx;
    y += dy;
    
    requestAnimationFrame(draw); // Рекурсивный вызов функции draw по готовности браузером рендерить новый кадр
}

drawBall(); // Изначально отрисовываем сам круг, а только при клике - вызываем анимацию

<canvas id="myCanvas" width="480" height="320"></canvas> <-- html
canvas { background: #fff; } <-- css