Untitled

console.log("connected");
const canvasWidth = 500;
const canvasHeight = 250;


window.onload = function(){
    var canvas = document.getElementById("myCanvas")
    var context = canvas.getContext("2d");
    var stop = false;
    var ball = {};
    var area = {};
    var plate = {};
    var last_time = 0;
    var toggle = document.getElementById("button");


    function InitAnimation(){
        console.log("fired");
        var date = new Date();
        last_time = date.getTime() + date.getMilliseconds() / 1000;
        context.fillStyle = "white";
        ball = {x: 20, y:20, r:10, vx: 50, vy: -150};
        area = {x: 0, y:0, width: canvasWidth, height: canvasHeight};
        plate = {x: area.width / 2.0, y: area.height - 20, width: 100, height: 7, fillStyle: "red", strokeStyle: "black", vx: 1}
        // włączenie poruszanie
        document.onkeydown = function (evt){
            if(evt.keyCode === 37){
                plate.vx = -300;
            }
            if(evt.keyCode === 39){
                plate.vx = 300;
            }
        }

        window.requestAnimationFrame(drawAnimation);
    }


    function drawAnimation()
    {
        // czyszczenie płótna
        context.clearRect(0,0,canvasWidth,canvasHeight);
        var date = new Date();
        var currentTime = date.getTime();
        var time_interval = currentTime - last_time;
        last_time = currentTime;
        //wyznaczenie kolejnego stanu animacji
        //wektor przesunięcia
        var dx = ball.vx * time_interval / 1000;
        var dy = ball.vy * time_interval / 1000;
        var pdx = plate.vx * time_interval / 1000;
        //console.log("pdx = " + pdx);
        //obliczenia itp.
        if(ball.x + dx + ball.r >= area.width || ball.x - ball.r + dx <= 0)
        {
            ball.vx = -ball.vx; // kierunek
            dx = ball.vx * time_interval/1000;
        }
        ball.x += dx;

        if(ball.y + dy + ball.r >= area.height || ball.y - ball.r + dy <= 0)
        {
            ball.vy = -ball.vy;
            dy = ball.vy * time_interval/1000;
        }
        ball.y += dy;

        if(plate.x + pdx >= area.x && plate.x + pdx + plate.width <= area.width){
            plate.x += pdx;
        }
        else{
            plate.vx = 0;
        }


        //rysowanie stanu
        context.save();
        context.beginPath();
        //kod rysujący elementy w nowych miejscach
        context.fillStyle = "purple";
        context.strokeStyle = "black";
        context.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
        context.fillRect(plate.x, plate.y, plate.width, plate.height);
        context.strokeRect(plate.x, plate.y, plate.width, plate.height);
        context.closePath();
        context.stroke();
        context.fill();
        context.beginPath();
        context.fillStyle = plate.fillStyle;
        context.strokeStyle = plate.strokeStyle;
        context.fillRect(plate.x, plate.y, plate.width, plate.height);
        context.strokeRect(plate.x, plate.y, plate.width, plate.height);
        context.closePath();
        context.stroke();
        context.fill();

        context.restore();
        if(!stop) window.requestAnimationFrame(drawAnimation);
    }

    InitAnimation();

    toggle.addEventListener("click", function(){
        if(stop)
            stop = false;
        else
            stop = true;
            window.requestAnimationFrame(drawAnimation);
    });
}

/*
boilerplate

<html>
    <body>
            <canvas id="myCanvas" width="500" height = "250" style="border:1px solid #000000;"></canvas>
             <button id = "button"> START/STOP </button>
             <script type = text/javascript src="script.js"></script>
    </body>
</html>


*/