Sol juego color
De wikiserver
La revisió el 10:35, 21 abr 2016 per Jnoguera (Discussió | contribucions)
<!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>
