Untitled

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <canvas id="can" width="1000" height="500" style="position: absolute;"></canvas>
        <canvas id="can2" width="1000" height="500" style="position: absolute;"></canvas>
        <script>


            var canvas = document.getElementById("can");
            var ctx = canvas.getContext("2d");
            var canvas2 = document.getElementById("can2");
            var ctx2 = canvas2.getContext("2d");

            //Parametry animacja 2
            var parametry=[];
            parametry[0]=0;
            parametry[1]=0;
            var keeper=[];
            var ilosc=0;


            function rysuj(){
            ctx.beginPath();
            ctx.moveTo(520,250);
            ctx.lineTo(450,150);
            ctx.lineTo(600,150);
            ctx.lineTo(520,250);
            ctx.lineTo(450,350);
            ctx.lineTo(600,350);
            ctx.lineTo(520,250);
            ctx.strokeStyle="Blue";
            ctx.stroke();
            ctx.closePath();

            ctx.beginPath();
            ctx.arc(375,285,60,0,Math.PI*2);
            ctx.stroke();
            ctx.closePath();

            ctx.beginPath();
            ctx.arc(675,316,30,0,Math.PI*2);
            ctx.stroke();
            ctx.closePath();
        }
        //Obiekt do animacja 1
            class piasek{
                constructor(){
                    this.x=520;
                    this.y=250;
                }

                ziarnko(){

                    ctx2.beginPath();
                    ctx2.arc(this.x,this.y,1,0,Math.PI*2);
                    ctx2.fillStyle="yellow";
                    ctx2.fill();
                    ctx2.closePath();
                }

                przesun(){
                    this.y+=1;
                }
            }

            function animacja(){
              ctx2.clearRect(0,0,1000,500);
              keeper[ilosc] = new piasek();
              ilosc+=1;
              for(j=0; j<=ilosc; j++){
                  keeper[j].przesun();
                  keeper[j].ziarnko();
                  if(keeper[j].y===311){
                      delete keeper[j];
                      keeper[j] = new piasek();
                      ilosc--;
                  }
              }
           }

            function animacja2(){
                    ctx.clearRect(0,0,1000,500);
                    rysuj();
                    ctx.beginPath();
                    ctx.moveTo(520,250);
                    ctx.lineTo(520,190+parametry[0]);
                    ctx.lineTo(478+parametry[1],190+parametry[0]);
                    ctx.fillStyle="yellow";
                    ctx.fill();
                    ctx.closePath();

                    ctx.beginPath();
                    ctx.moveTo(520,250);
                    ctx.lineTo(520,190+parametry[0]);
                    ctx.lineTo(564-parametry[1],190+parametry[0]);
                    ctx.fill();
                    ctx.closePath();

                    ctx.beginPath();
                    ctx.moveTo(520,350);
                    ctx.lineTo(520,310-parametry[0]);
                    ctx.lineTo(564-parametry[1],310-parametry[0]);
                    ctx.lineTo(600,350);
                    ctx.fill();
                    ctx.closePath();

                    ctx.beginPath();
                    ctx.moveTo(520,350);
                    ctx.lineTo(520,310-parametry[0]);
                    ctx.lineTo(478+parametry[1],310-parametry[0]);
                    ctx.lineTo(450,350);
                    ctx.fill();
                    ctx.closePath();

                    parametry[0]+=1;
                    parametry[1]+=0.75;

                    if(parametry[0]===60){
                        clearInterval(x);
                        clearInterval(z);
                    }
                }

           animacja2();
           var x = setInterval(animacja2,700);
           var z = setInterval(animacja,10);

           function restart(){
               ilosc=0;
               parametry[0]=0;
               parametry[1]=0;
               var x = setInterval(animacja2,700);
               var z = setInterval(animacja,10);
           }
        </script>
        <input type="button" value="Restart" onclick="restart()" style="margin-top: 650px;">
    </body>
</html>