I am developing a project that can be seen here:
var Elfo = {
heartHeight: 80,
heartWidth: 50,
hearts: [],
heartImage : 'https://dismal.site/demo/elfo/dildo01.png',
maxHearts: 8,
minScale: 0.4,
draw: function() {
this.setCanvasSize();
this.ctx.clearRect(0, 0, this.w, this.h);
for (var i = 0; i < this.hearts.length; i++) {
var heart = this.hearts[i];
heart.image = new Image();
heart.image.style.height = heart.height;
heart.image.src = this.heartImage;
this.ctx.globalAlpha = heart.opacity;
this.ctx.drawImage (heart.image, heart.x, heart.y, heart.width, heart.height);
}
this.move();
},
move: function() {
for(var b = 0; b < this.hearts.length; b++) {
var heart = this.hearts[b];
heart.y += heart.ys;
if(heart.y > this.h) {
heart.x = Math.random() * this.w;
heart.y = -1 * this.heartHeight;
}
}
},
setCanvasSize: function() {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
this.w = this.canvas.width;
this.h = this.canvas.height;
},
initialize: function() {
this.canvas = $('#canvas')[0];
if(!this.canvas.getContext)
return;
this.setCanvasSize();
this.ctx = this.canvas.getContext('2d');
for(var a = 0; a < this.maxHearts; a++) {
var scale = (Math.random() * (1 - this.minScale)) + this.minScale;
this.hearts.push({
x: Math.random() * this.w,
y: Math.random() * this.h,
ys: Math.random() + 1,
height: scale * this.heartHeight,
width: scale * this.heartWidth,
opacity: scale
});
}
setInterval($.proxy(this.draw, this), 50);
}
};
$(document).ready(function(){
Elfo.initialize();
});
body {
/*Dildo Elfo a Mostrar */
background-image: url("https://i.ibb.co/wQhz4B2/descarga-1.png");
height: 100%;
width: 100%;
margin: 0;
padding: 0; height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>
I have a question about it, is there a way to place a link in each of the objects that fall randomly? How can I create a function that allows the falling objects to be clicked, it does not work for the canvas because the entire screen would be a click zone, I am only looking for what can be done on the falling objects, how can I do it using javascript?
In an HTML page you can add listeners to DOM elements, but within a canvas this is not possible. You have to use some detection system that allows you to know what is in the clicked place inside the canvas and manually detect if there is something in that point. (That is to say, if you use a library like Phaser or CreateJS this functionality is included).
Assuming we don't use any specific library, you need to know where each clickable image is at all times. Luckily you already have this because you have needed it to be able to move them around the screen.
Then you only have to identify if the click is on the rectangle, knowing the current coordinates of the image and those of the mouse click inside the canvas.
I have taken the liberty of modifying your code to "update" it: I have used classes and the function
requestAnimationFrame
to optimize the repainting of the canvas, you would only need to add the URLs to each image (or have a separate list and simply choose one at random when it appears). click on an image), but I let you choose what suits you best:you can do like this: