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

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>

https://codepen.io/dismalskull/pen/eYYZezv

 

estoy desarrollando un proyecto que puede verse aca:

 

https://codepen.io/dismalskull/pen/eYYZezv

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>
 

Origen Enlace

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

estoy desarrollando un proyecto que puede verse aca:

https://codepen.io/dismalskull/pen/eYYZezv

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?