Diferència entre revisions de la pàgina «Sol juego color»

De wikiserver
Dreceres ràpides: navegació, cerca
(Es crea la pàgina amb «<source lang="jquery"> </source>».)
 
 
Línia 1: Línia 1:
 
<source lang="jquery">
 
<source lang="jquery">
 +
 +
<!Doctype html>
 +
 +
<!-- html[lang="es"]>(head>meta[charset="utf-8"]+title{Ejercicios con jQuery UI}+link*2)+(body>script*2) -->
 +
<html lang="es">
 +
<head>
 +
<meta charset="utf-8"></meta>
 +
<title>Ejercicios con jQuery UI</title>
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 +
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
 +
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
 +
 +
<script>
 +
var contador = 0;
 +
var tiempo = 5;
 +
 +
$(document).ready(function(){
 +
//crear divs desde jQuery
 +
$('body').append('<div class="contador"></div>');
 +
$('body').append('<div class="tiempo"></div>');
 +
 +
 +
$('.respuesta').draggable();
 +
$('.contenedor').droppable({
 +
drop:function(event, ui){
 +
//Aqui dentro se ejecuta la accion
 +
//cuando algo es soltado encima
 +
//event y ui permiten saber qué
 +
//objeto fue soltado encima
 +
var correcta = $(this).attr('data-respuesta');
 +
//ui.draggable = objeto soltado
 +
var valor = ui.draggable.attr('data-valor');
 +
if(correcta==valor){
 +
ui.draggable.slideUp();
 +
$(this).slideUp();
 +
contador+=1;
 +
} else {
 +
contador-=1;
 +
}
 +
$('.contador').html('Contador:'+contador);
 +
}
 +
});
 +
 +
//setInterval es un loop que se ejecuta cada X segs
 +
//1000 milisegundos = 1 segundo
 +
var conteo = setInterval(function(){
 +
tiempo-=1;
 +
$('.tiempo').html('Tiempo restante:'+tiempo);
 +
 +
if(tiempo==0){
 +
alert('PERDISTESSS'); //perdio
 +
clearInterval(conteo); //detener conteo
 +
}
 +
 +
}, 1000);
 +
 +
});
 +
</script>
 +
 +
<style>*{margin:0;padding:0;}
 +
 +
.contenedor{
 +
width:200px;
 +
height:200px;
 +
background-color: #fd0;
 +
margin: 10px;
 +
float:left;
 +
}
 +
 +
.respuesta{
 +
padding: 10px;
 +
background: #888;
 +
float:left;
 +
margin:5px;
 +
}
 +
 +
.tiempo{
 +
position:fixed;
 +
background: #6a7;
 +
left:0;
 +
bottom:0;
 +
padding: 20px;
 +
font-size:2em;
 +
}</style>
 +
 +
</head>
 +
<body>
 +
 +
<!-- .contenedor[data-respuesta=""]#contenedor$*3 -->
 +
<div class="contenedor" data-respuesta="azul" id="contenedor1">Color del cielo</div>
 +
<div class="contenedor" data-respuesta="verde" id="contenedor2">Color del pasto</div>
 +
<div class="contenedor" data-respuesta="azul" id="contenedor3">Color del mar</div>
 +
 +
<!-- .respuesta[data-valor=""]*6 -->
 +
<div class="respuesta" data-valor="rojo">rojo</div>
 +
<div class="respuesta" data-valor="azul">azul</div>
 +
<div class="respuesta" data-valor="amarillo">amarillo</div>
 +
<div class="respuesta" data-valor="verde">verde</div>
 +
<div class="respuesta" data-valor="naranja">naranja</div>
 +
<div class="respuesta" data-valor="azul">azul</div>
 +
 +
</body>
 +
</html>
 
</source>
 
</source>

Revisió de 10:35, 21 abr 2016

<!Doctype html>

<!-- html[lang="es"]>(head>meta[charset="utf-8"]+title{Ejercicios con jQuery UI}+link*2)+(body>script*2) -->
<html lang="es">
<head>
	<meta charset="utf-8"></meta>
	<title>Ejercicios con jQuery UI</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
 
	<script>
		var contador = 0;
var tiempo = 5;

$(document).ready(function(){
	//crear divs desde jQuery
	$('body').append('<div class="contador"></div>');
	$('body').append('<div class="tiempo"></div>');


	$('.respuesta').draggable();
	$('.contenedor').droppable({
		drop:function(event, ui){
			//Aqui dentro se ejecuta la accion
			//cuando algo es soltado encima
			//event y ui permiten saber qué
			//objeto fue soltado encima
			var correcta = $(this).attr('data-respuesta');
			//ui.draggable = objeto soltado
			var valor = ui.draggable.attr('data-valor');
			if(correcta==valor){
				ui.draggable.slideUp();
				$(this).slideUp();
				contador+=1;
			} else {
				contador-=1;
			}
			$('.contador').html('Contador:'+contador);
		}
	});
	
	//setInterval es un loop que se ejecuta cada X segs
	//1000 milisegundos = 1 segundo
	var conteo = setInterval(function(){
		tiempo-=1;
		$('.tiempo').html('Tiempo restante:'+tiempo);

		if(tiempo==0){
			alert('PERDISTESSS'); //perdio
			clearInterval(conteo); //detener conteo
		}

	}, 1000);

});
	</script>

	<style>*{margin:0;padding:0;}

.contenedor{
	width:200px;
	height:200px;
	background-color: #fd0;
	margin: 10px;
	float:left;
}

.respuesta{
	padding: 10px;
	background: #888;
	float:left;
	margin:5px;
}

.tiempo{
	position:fixed;
	background: #6a7;
	left:0;
	bottom:0;
	padding: 20px;
	font-size:2em;
}</style>

</head>
<body>

	<!-- .contenedor[data-respuesta=""]#contenedor$*3 -->
	<div class="contenedor" data-respuesta="azul" id="contenedor1">Color del cielo</div>
	<div class="contenedor" data-respuesta="verde" id="contenedor2">Color del pasto</div>
	<div class="contenedor" data-respuesta="azul" id="contenedor3">Color del mar</div>

	<!-- .respuesta[data-valor=""]*6 -->
	<div class="respuesta" data-valor="rojo">rojo</div>
	<div class="respuesta" data-valor="azul">azul</div>
	<div class="respuesta" data-valor="amarillo">amarillo</div>
	<div class="respuesta" data-valor="verde">verde</div>
	<div class="respuesta" data-valor="naranja">naranja</div>
	<div class="respuesta" data-valor="azul">azul</div>

</body>
</html>
Obtingut de «http://wikiserver.infomerce.es/index.php?title=Sol_juego_color&oldid=6844»