8

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?

6
  • 3
    Menos mal que has puesto un comentario antes de la imagen de fondo xD
    – ordago
    Commented el 15 oct. 2019 a las 16:16
  • jajaja, :v la verdad es un proyecto muy divertido en el que estoy trabajando, son juguetes eroticos con formas muy raras. Commented el 15 oct. 2019 a las 16:24
  • A que te refieres con los objetos que caen? Commented el 15 oct. 2019 a las 17:20
  • en el canvas aleatoreamente se dibuja un dildo que cae verticalmente, me gustaria ponerles hipervinculos Commented el 15 oct. 2019 a las 17:36
  • 1
    Seria muy util que en este caso, aclararas que el codigo es NSFW.. la gente que quiere ayudarte podria verse en problemas si abre el mismo en algun lugar en particular. Seria mucho mejor, que tu codigo fuera ATP.
    – gbianchi
    Commented el 18 oct. 2019 a las 17:39

2 respuestas 2

6

En una página HTML puedes añadir listeners a los elementos del DOM, pero dentro de un canvas esto no es posible. Tienes que usar algún sistema de detección que te permita saber qué hay en el sitio en el que se pulsó dentro del canvas y, manualmente detectar si hay algo en ese punto. (es un decir, si usas alguna librería como Phaser o CreateJS esta funcionalidad es incluida).

Asumiendo que no usamos ninguna librería específica, necesitas saber dónde está cada imagen clickable en todo momento. Por suerte esto ya lo tienes porque lo has necesitado para poder moverlas por la pantalla.

Entonces sólo tienes que identificar si el click es sobre el rectángulo, conociendo las coordenadas actuales de la imagen y las del click del ratón dentro del canvas.

Me he tomado la libertad de modificar tu código para "actualizarlo": he usado clases y la función requestAnimationFrame para optimizar el repintado del canvas, sólo te faltaría añadir las URLs a cada imagen (o tener una lista aparte y simplemente elegir una al azar cuando se haga click en una imagen), pero te dejo elegir lo que más te convenga:

// Clase que representa cada imagen moviéndose sobre el canvas
class DildoImage {
  constructor(image, initialX, initialY, fallingSpeed,
    width = 50, height = 80, alpha = .5) {
    this.image = image;
    this.x = initialX;
    this.y = initialY;
    this.fall = fallingSpeed;
    this.width = width;
    this.height = height;
    this.alpha = alpha;
  }

  draw(ctx) {
    ctx.globalAlpha = this.alpha;
    ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
  }
}

class Elfo {

  constructor() {
    this.images = [];
    this.maxImages = 8;
    this.minScale = .4;
    this.imageW = 50;
    this.imageH = 80;
    

    this.canvas = document.querySelector('canvas');

    if (!this.canvas.getContext) {
      return;
    }

    this.setCanvasSize();
    this.ctx = this.canvas.getContext('2d');
    //Sólo necesitamos la imagen una vez, se puede reusar para pintarla
    const image = new Image();
    image.src = 'https://dismal.site/demo/elfo/dildo01.png';

    //Cada click en el canvas lo detectaremos
    this.canvas.addEventListener('click', (e) => {
      //click tendrá el índice de la imagen clickada o -1 en caso contrario
      const click = this.clickEnImagen(e.offsetX,e.offsetY);
      if (click > -1) {
        console.log('Has clickado en imagen', click, 'cuando estaba en', this.images[click].x,this.images[click].y);
      }
    });

    //bucle para inicializar las imágenes, usando su constructor
    for (let a = 0; a < this.maxImages; a++) {
      
      const scale = (Math.random() * (1 - this.minScale)) + this.minScale;
      
      let dildo = new DildoImage(image,
          Math.random() * this.w, Math.random() * this.h,
        Math.random() + 1,
        scale * this.imageW, scale * this.imageH,
        scale
      ) 
      this.images.push(dildo);
    }
    this.move(); //iniciamos el movimiento!
  }
  //este método se encarga de detectar si hemos pinchado en una imagen,
  //calculando sus bordes y comprobando que el click ha sido dentro de éstos.
  clickEnImagen(x, y) {
    return this.images.findIndex(image => {
      const left = image.x;
      const right = image.x + image.width;
      const top = image.y;
      const bottom = image.y + image.height;
      return (right >= x && left <= x && bottom >= y && top <= y);
    });
  }

  setCanvasSize() {
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.w = this.canvas.width;
    this.h = this.canvas.height;
  }

  move() {
    this.ctx.clearRect(0, 0, this.w, this.h);
    this.images.forEach(image => {
      image.y += image.fall;
      if (image.y > this.h) {
        image.x = Math.random() * this.w;
        image.y = -1 * image.height;
      }
      image.draw(this.ctx);
    });
    
    //IMPORTANTE: cada vez que terminamos de mover, 
    //pedimos al navegador que llame de nuevo a esta función.
    //Esto hará que se ejecute 60 veces por segundo (60fps suele ser el refresco)
    requestAnimationFrame(this.move.bind(this));
  }

}

new Elfo();
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;
}
<canvas/>

2
  • Muchisimas gracias, tendre en cuenta tus recomendaciones, dime tu donde puedo hallar un buen tutorial de Js referente a animaciones con Canvas? o info relacionada a lo que me ayudaste a hacer, me interesa mejorar mucho, un saludo. Commented el 6 nov. 2019 a las 15:39
  • No sabría decirte, casi todo lo que leo está en inglés. Prueba con la documentación de Mozilla Developer Network, que tiene casi todo traducido Commented el 6 nov. 2019 a las 16:37
2

puedes hacer asi:

 var position=[];

	 var Elfo = {
      
      heartHeight: 80,
      heartWidth: 50,
      hearts: [],
      position:[], // almacenara las posiciones de los juguetes creados
      url : "https://www.docjohnson.com/vaculock-double-penetrator-attachments.html", // url a abrir
      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);
          // almacenamos las posiciones depues de ser creadas
          position[i]={x:heart.x, y:heart.y};
        }
        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;
          }
          // editamos las posiciones al ser modificadas
          position[b]={x:heart.x, y:heart.y};
        }

      },
      setCanvasSize: function() {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.w = this.canvas.width;
        this.h = this.canvas.height;
      },
      // detecta la posicion del mouse con respecto al drawimage
      getMousePos:  function(draw,evt) {
	      	// obtenemos la poscione del mouse en el canvas
		    let rect = this.canvas.getBoundingClientRect();
			    let mp= {
			      x: evt.clientX - rect.left,
			      y: evt.clientY - rect.top
			    };
			
			// cambiamos las posiciones X y Y del drawimage a enteros 
		    draw = {x:parseInt(draw.x),y:parseInt(draw.y)};

		    // comparamos las posiciones del mouse con respecto a el drawimage en el eje X
		    if( draw.x <= mp.x && mp.x <= (draw.x+this.heartWidth) ){
		    	return true;
		    }

		    // comparamos las posiciones del mouse con respecto a el drawimage en el eje Y
		    if( draw.y <= mp.y && mp.y <= (draw.y+this.heartHeight) ){
		    	return true;
		    }

		    //retornamos falso si ninguna coincide
			return false;
		},
      initialize: function() {
        this.canvas = $('#canvas')[0];

        if(!this.canvas.getContext)
          return;

        this.setCanvasSize();
        this.ctx = this.canvas.getContext('2d');

        // creamos un evento click para el canvas
        this.canvas.addEventListener("click",function(e){
        	// recorremos las posiciones guardas de los drawimage
        	for (var i = position.length - 1; i >= 0; i--) {
        		// validamos que coincidad el click del mouse respecto a la posicion del juguete
        		// NOTA: se utiliza Elfo.getMousePos en vez de this.getMousePos
        		// para que this no aga referencia al objeto click
        		if(Elfo.getMousePos(position[i],e)){
        			// abrimos una nueva url
        			console.log(`abrir: ${Elfo.url}`);
        			//NOTA: en el edito de stackoverflow no se pueden abrir nuevas ventanas
        			window.open(Elfo.url,'_blank');
        			break;
        		}
        	}
        });
        
        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();
    });
      /*Dildo Elfo a Mostrar */
body {
       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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.