Skip to main content
2 de 2
se añadieron 2587 caracteres en el cuerpo
JackNavaRow
  • 7.2k
  • 6
  • 25
  • 49

Como puedo añadir un Link a esta imagen con javascript

estoy desarrollando un proyecto que puede verse aca:

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>

Tengo una duda al respecto, existe alguna forma de colocar un enlace en cada uno de los objetos que caen de forma aleatoria? como puedo crear una funcion que permita que los objetos que caen se les pueda dar click, no sirve por el canvas porque todo la pantalla seria una zona de click, busco unicamente que se pueda hacer en los objetos que caen, como lo puedo hacer usando javascript?