0

I have the following code in which I have set a requestanimationFrame and I want to end it by calling the function draw2. It's a beginner's animation based on the single ball bouncing on the wall. 

 <body>               
    // canvas creation
var x =290;
var y=320;
var xdir=1;
var hit =0;


    // select directions
function select () {
    if (x ==950 || x==0){

    xdir=-1* xdir}


        if (xdir==1) {
        x=x+5;
        }
        else 
        {
        x=x-5;
        }

    requestAnimationFrame(draw1);
    }

function draw1()  { 
    ctx.clearRect(0, 0, 1000, 800 );
    ctx.beginPath();
                  var draw1=ctx.arc(x,y,5,0,2*Math.PI);  
                  ctx.strokeStyle="black";
                  ctx.stroke();
                  ctx.fillStyle="darkgrey";
                  ctx.fill();             

        //draw cowboy
            // body
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.strokeStyle = "black";
    ctx.lineCap = "square";
    ctx.moveTo(100, 300);
    ctx.lineTo(100, 600);
    ctx.stroke();

    // hand 
    ctx.beginPath();
    ctx.strokeStyle = " black";
    ctx.lineCap = "round";
    ctx.moveTo(100, 350);
    ctx.lineTo(250, 350);
    ctx.stroke();


    //gun
    ctx.beginPath();
    ctx.strokeStyle = "darkgrey";
    ctx.lineWidth=10;
    ctx.moveTo(250, 350);
    ctx.lineTo(250, 320);
    ctx.lineTo(290, 320);
    ctx.stroke()

    //head
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.lineWidth=5;
    ctx.arc(100,280,50,0,2*Math.PI);    
    ctx.fill(); 

        } 



     function draw2() {
      ctx.clearRect(0, 0, 1000, 800 );
    ctx.beginPath();

         //draw dead cowboy
            // body

    var draw2=ctx.lineWidth = 10;
    ctx.strokeStyle = "black";
    ctx.lineCap = "square";
    ctx.moveTo(300, 600);
    ctx.lineTo(100, 600);
    ctx.stroke();


    //head
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.lineWidth=5;
    ctx.arc(340,580,50,0,2*Math.PI);    
    ctx.fill();

     } 

    requestAnimationFrame(draw1);
        setInterval(select, 20);

    </script>
</body

>

I try to set an if statement like this:

if (x==120) {
            hit=1;
        }

        if (hit==1){
            alert ("This was a mistake!");
            draw2();
    }

but when I try this the animation disappears completely from the canvas. I think I have the correct guidance but I can't put them together.

Margarita G
  • 1
  • 1
  • The indentation of the code... oh my. You'll help yourself by fixing that. – trincot May 10 '20 at 17:49
  • You're right but to be honest, it doesn't bother me that much :D I'm pretty new to all this so my coding is a bit messy at the moment. I 'm satisfied if it just works for now. – Margarita G May 10 '20 at 18:29
  • Well, to be honest too, it *does* affect you: the code has 6 opening braces and 5 closing braces. If you properly indent it and make it syntactically correct, you'll increase the probability that someone will take your question. – trincot May 10 '20 at 19:01
  • Yes sorry about that I missed it in copy-paste, I fixed it. – Margarita G May 10 '20 at 19:27
  • Hope someone else will take your question. If you properly indent your code I might look into it. – trincot May 10 '20 at 19:34

0 Answers0