Ejemplo de interacción con circulos js

En esta sección se resolverán dudas relacionadas con la creación de aplicaciones híbridas, haciendo énfasis en temas relacionados con Javascript y frameworks de Javascript como Angular y Jquery.

Moderator: julianmartinez16

Post Reply
User avatar
xacarana
Site Admin
Posts: 1028
Joined: Fri Jan 15, 2016 6:13 pm

Ejemplo de interacción con circulos js

Post by xacarana » Mon Oct 30, 2017 9:42 am

Este ejemplo consiste en agregar círculos aleatorios a un contenedor y agregarles un evento click para que puedan moverse al interactuar con el usuario. Para ver como funciona, click acá

HTML

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

<input type="button" value="Mover" id="btn_jugar" name="">
<div id="juego">
</div>

<script type="text/javascript" src="js/vendor/TweenMax.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
CSS

Code: Select all

#juego{
	position: relative;
	border: 1px solid black;
	width:800px;
	height: 600px;
	margin:0 auto;
	overflow: hidden;
}
.circulo{
	position: absolute;
	background: red;
	width: 50px;
	height:50px;
	border-radius: 50px;
}
JS

Code: Select all

var juego;
var btn_jugar;

window.onload = init;

function init(){
	inicializarVariables();	
	ponerEventos();
}

function inicializarVariables()
{
	juego = document.getElementById("juego");
	btn_jugar = document.getElementById("btn_jugar");
}

function ponerEventos(){
	//juego.addEventListener("click",procesarClick);
	btn_jugar.addEventListener("click",procesarClick);
}

function procesarClick(evt){
	console.dir(evt.x+" "+evt.y);
	constructorCirculos(evt.x,evt.y);
}

function calcularColor(){
	var r = parseInt(Math.random()*255);
	var g = parseInt(Math.random()*255);
	var b = parseInt(Math.random()*255);
	return "rgb("+r+","+b+","+g+")";
}

function constructorCirculos(x,y){

	var temp = "<span class='circulo'";
	temp+= "style='left:"+x+"px;top:"+y+"px;";
	temp+= "background:"+calcularColor()+";'";
	temp+= " ></span>";

	juego.innerHTML = juego.innerHTML + temp;
	//juego.innerHTML += "<span class='circulo'></span>";
	ponerEventoCirculos();
}

function moverCirculos(){
	var circulos = document.getElementsByClassName("circulo");
	for(var i= 0; i< circulos.length;i++)
	{
		TweenLite.to(circulos[i], 1.5, {top:Math.random()*800, left:Math.random()*600});
	}
}

function moverIndependiente(evt)
{
	TweenLite.to(evt.target, 1.5, {top:Math.random()*800, left:Math.random()*600,onComplete:function(){
			//alert("termine");
			TweenLite.to(this.target, 1.5, {top:Math.random()*800, left:Math.random()*600});
		}});	
}

function ponerEventoCirculos(){
	var circulos = document.getElementsByClassName("circulo");
	for(var i= 0; i< circulos.length;i++)
	{
		circulos[i].addEventListener("click",moverIndependiente);
	}
}
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

Post Reply