Agfdhyk

I just want to start the process by clicking on the ball.gif. I couldn't do it. Also at the end of the animation my picture disappears.
Here are my codes;

Select the object in Canvas and add it to the event.
I looked at almost all the issues. But I didn't find the answer.

var player, mouse;

var iterations = 0;





var game = {

    canvas: document.createElement("canvas"),

    start: function () {



        game.canvas.width = 357;

        game.canvas.height = 500;

        game.canvas.style.border = "1px solid red";

        game.ctx = game.canvas.getContext("2d");

        document.body.appendChild(game.canvas);

        player=new game.nesne(150,400,50,50);



        game.canvas.addEventListener("mousedown", function(event) {

            game.nesne(150,400,50,50);

        });



        game.timer = setInterval(game.animate.bind(this), 30);

    },

    draw: function () {



        player.draw();

    },

    update: function () {

    },

    nesne: function (x, y, w, h) {



        this.x = x;

        this.y = y; 

        this.w = w; 

        this.h = h; 



        this.image=new Image();

        this.image.src="ball.gif";

        this.vx = 1; 

        this.vy = -1; 

        this.draw = function () {



          game.ctx.drawImage(this.image,this.x,this.y,this.w,this.h);





        }





        this.update = function () {

            this.x += this.vx; 

            this.y += this.vy; 



        }

    },



    animate: function () {

        game.ctx.clearRect(0,0,game.canvas.width,game.canvas.height);



        iterations++

    if (iterations >= 100)

        clearInterval(interval);

        game.update(); 

        game.draw(); 



    },

}

window.addEventListener("load", game.start, false);

Changes I've made:

1. instead of clearInterval(interval); I use clearInterval(game.timer);
   The interval is not defined. You have to use the handler you created for the setInterval(line 24 in my code)




2. You call the game.update function but in your code is an empty function. I've changed that. Now the game.update() calls the player.update().




3. To reanimate the player again on mousedown you need to reset the iterations = 0;

var player, mouse;

var iterations = 0;





var game = {

    canvas: document.createElement("canvas"),

    start: function () {



        game.canvas.width = 357;

        game.canvas.height = 500;

        game.canvas.style.border = "1px solid red";

        game.ctx = game.canvas.getContext("2d");

      

      

        document.body.appendChild(game.canvas);

      

        player=new game.nesne(150,400,50,50);

        



        game.canvas.addEventListener("mousedown", 

       function(event) {

      

          if (game.timer) clearInterval(game.timer);

          game.nesne(150, 400, 50, 50);

          iterations = 0;

          game.timer = setInterval(game.animate.bind(this), 30);



         

        });



        game.timer = setInterval(game.animate.bind(this), 30);

    },

  

  

    draw: function () {

        player.draw();

    },

  

    update: function () {

      player.update();///////////////

    },

  

  

    nesne: function (x, y, w, h) {



        this.x = x;

        this.y = y; 

        this.w = w; 

        this.h = h; 



        this.image=new Image();

        this.image.src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppy150x150.jpg";

        this.vx = 1; 

        this.vy = -1; 

        this.draw = function () {



          game.ctx.drawImage(this.image,this.x,this.y,this.w,this.h);





        }





        this.update = function () {

            this.x += this.vx; 

            this.y += this.vy; 



        }

    },



    animate: function () {

        game.ctx.clearRect(0,0,game.canvas.width,game.canvas.height);



        iterations++

    if (iterations >= 100)

        //clearInterval(interval);

        clearInterval(game.timer);

        game.update(); 

        game.draw(); 



    }

}



window.addEventListener("load", game.start, false);

UPDATE

The OP commented:

So how do I do this when I just click on the picture.

In this case you need to detect the position of the mouse when clicking the canvas. I've added a function to detect the mouse position:

function oMousePos(canvas, evt) {

  var ClientRect = canvas.getBoundingClientRect();

    return {

    x: Math.round(evt.clientX - ClientRect.left),

    y: Math.round(evt.clientY - ClientRect.top)

}

}

Next you need to change the function for the mousedown. You need to use the method isPointInPath to check if the mouse is inside the nesne thing.

function(event) {

mouse = oMousePos(game.canvas, event);



game.ctx.beginPath();

game.ctx.rect(player.x,player.y,player.w,player.h);

if (game.ctx.isPointInPath(mouse.x, mouse.y)) {





if (game.timer) clearInterval(game.timer);

game.nesne(150, 400, 50, 50);

iterations = 0;

game.timer = setInterval(game.animate.bind(this), 30);

}



});