Comunidad de diseño web y desarrollo en internet

Juego 4 fotos 1 palabra

Citar            
MensajeEscrito el 12 Abr 2017 03:04 pm
¡Buenas! Resultado que estoy haciendo un trabajo de informática para el instituto, el cual es un juego utilizando Javascript. Se trata del famoso juego para móvil 4 fotos 1 palabra, que tienes que adivinar qué palabra es mirando 4 fotos relacionadas entre sí. Entonces, yo tengo problemas a la hora de hacerlo, más bien por los botones, ya que no sé qué etiquetas ponerles. Ahora aquí abajo dejaré cómo lo he hecho.
Además, me gustaría que cuando el usuario acertara pusiera "Has acertado" y cuando no "Has fallado". Me gustaría que alguien me dijera por qué no me va (pasar las imágenes sí que me funciona) y si me falta alguna cosa. ¡Gracias!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="4fotos1palabra.css">
<title>4 fotos 1 palabra</title>
<script>
var image = 0;
var fotos = ["./img/raton.jpg",
"./img/presidentes.jpg",
"./img/deporte.jpg",
"./img/spain.jpg"];
function game(ima) {
document.getElementById("juego").src = fotos[ima];
image++;
if (image>3) {
image=0;
}
}
</script>
<script>
function joc(uno,dos,tres,cuatro) {
var miRat = "";
var miPres = "";
var miDep = "";
var miSpa = "";
switch (uno) {
case "raton":
miRat = "raton";
alert("¡Has acertado!");
break;
default:
miRat = "¡Has fallado!";
}

switch (dos) {
case "presidentes":
miPres = "presidentes";
alert("¡Has acertado!");
break;
default:
miPres = "¡Has fallado!";
}

switch (tres) {
case "deporte":
miDep = "deporte";
alert("¡Has acertado!");
break;
default:
miDep = "¡Has fallado!";
}

switch (cuatro) {
case "spain":
miSpa = "spain";
alert("¡Has acertado!");
break;
default:
miSpa = "¡Has fallado!";
}
}
</script>
</head>

<body>
<div id=cuerpo>
<h1>4 fotos 1 palabra<br>
¡Adivina!</h1><br><br>
<form>
<img id="juego" src="./img/raton.jpg" style="width:300px;height:300px;"><br><br><br>
<input type="text"><br><br>
<button onClick = "joc(miRat.value,miPres.value,miDep.value,miSpa.value)">Aceptar</button>
<input type="button" value="Siguiente" onclick="game(image)">
</form>
</div>
</body>
</html>

Por LydiaOcean

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 13 Abr 2017 12:46 am
Aqui te dejo un ejemplo que hice para ti pero solo trabajo con javascript asi que puede que te sirva de algo esto que hice para ti, haz pruebas con lo que te deje con diferentes browsers:

Código HTML :

<html id='H' style="overflow:hidden;"><head id="h"><meta charset="utf-8"></head><body id="b" spellcheck="false"><style>.Us{-moz-appearance:none;text-indent:0.01px;text-overflow:'';}</style></body>
<script>

///variables browser
sessionStorage['link']='http://www.granma.cu/file/img/2016/03/medium/f0055893.jpg|||https://www.dondevive.org/wp-content/uploads/2016/06/donde-vive-el-raton.jpg|||https://www.okomeds.com/wp-content/uploads/2016/02/p18lq7ediepl816p6s04171vo23.jpg|||https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Flag_of_the_Basque_Country.svg/200px-Flag_of_the_Basque_Country.svg.png';
sessionStorage['respostes']='colgatepresident,mickymouse,pilotes,ayvalaostia';

///funcions base
String['prototype'].rep=function(){var a=arguments;var z=this.replace(a[0],a[1]);while(z.indexOf(a[0])>-1){z=z.replace(a[0],a[1]);};return z;};
window['$']=function(){var a=arguments,b,B,c,C='createElement',d,D=document,e,f='',g,G='getElementById',i,I='indexOf',j,l=a.length,L='length',o=(l==4)?D[C](a[1]):(typeof a[0]=='object')?a[0]:(a[0]=='')?'':D[G](a[0]),s='substr',S='style',t='split',T='sessionStorage',W=window;if(l==1){return o;}else if(l==2){b=a[1];c=b[0];d=b[s](1);if(c==':'){return o[d];}else if(c==';'){return o[S][d];}else if(c=='@'){e=d[t](c);W[e[0]].apply(this,e[1][t]('|'));}else{var A=Array();if(b[I](',')<0){A[0]=b;}else{A=b[t](',');};for(j in A){e=A[j];f=e.match(/[:;@]/)[0];g=Array(e[s](0,e[I](f)),e.substr((1+e[I](f))));if(f==':'){o[g[0]]=g[1];}else if(f==';'){o[S][g[0]]=g[1];}else if(f=='@'){o[g[0]]=W[g[1]];}}}}else if(l==3){}else if(l==4){var p=$(a[2]);if(a[0]!=''){o.id=a[0];};$(o,a[3]);p.appendChild(o);}}

///////maketitzacio
var A=Array();A=sessionStorage['link'].split('|||'),R=sessionStorage['respostes'].split(',');


$('d','div','b','position;absolute,top;20px,left;-600px,width;540px,padding;20px,height;160px,border;10px solid grey,borderRadius;10px,overflow;hidden,transition;left 0.75s');

$('d0','div','d','position;absolute,bottom;-150px,left;30px,width;100px,height;auto,border;10px solid red,borderRadius;10px,transition;bottom 1s');
$('df0','img','d0','width:100,src:'+A[0]);

$('d1','div','d','position;absolute,bottom;-150px,left;160px,width;100px,height;auto,border;10px solid yellow,borderRadius;10px,transition;bottom 1s');
$('df1','img','d1','width:100,src:'+A[1]);

$('d2','div','d','position;absolute,bottom;-150px,left;290px,width;100px,height;auto,border;10px solid blue,borderRadius;10px,transition;bottom 1s');
$('df2','img','d2','width:100,src:'+A[2]);

$('d3','div','d','position;absolute,bottom;-150px,left;420px,width;100px,height;auto,border;10px solid green,borderRadius;10px,transition;bottom 1s');
$('df3','img','d3','width:100,src:'+A[3]);

$('input','div','d','position;absolute,div:0,bottom;5px,left;-200px,width;100px,height;10px,overflow;hidden,padding;5px,border;3px solid black,borderRadius;3px,transition;left 1s,contentEditable:true,fontSize;12px');

window.onload=function(){$('d','left;40px');setTimeout(function(){$('d0','bottom;40px');setTimeout(function(){$('d1','bottom;40px');setTimeout(function(){$('d2','bottom;40px');setTimeout(function(){$('d3','bottom;40px');$('input','left;32px');},500);},500);},500);},500);}

$('input').onblur=function(){
   var div=this.div;
   if(this.textContent==R[div]){
      this.textContent='CORRECTE';this.style.color='green';var C=this.cloneNode(true);$(C,'id:res'+div+',contentEditable:false,textAlign;center');$('d').appendChild(C);
      this.div++;div=this.div;
      if(div<4){
         
         var o=$('d'+div);
         $('input','textContent:,left;'+(o.offsetLeft+12)+'px,color;black');
      }else{
         alert('a');
         $('d','overflow;visible');$('input').style.transition='backgroundColor 1s,width 1s,bottom 1s,left 1s';$('input','textContent,click aqui para el siguiente nivel,textAlign;center,ContentEditable:false,color;white,bottom;-50px,width;580px,left;-10px,backgroundColor;black');}
   }else{
      this.textContent='INCORRECTE';this.style.color='red';setTimeout(function(){$('input','textContent:,color;black');},1000);
   }   
   
}

//aqui lidia le puedes poner la condicion de hacer un onclick al boton recomiendo que utilices ajax al hacer click desde aqui puedes cambiar el src de las imagenes desde ajax, hacer un remove() a los elementos res0,res1,res2,res3 hacer contenteditable true otra vez a input i posicionarlo i redimensinarlo en la posicion donde estava el obama apartir de ahi no hago nada mas porque necesitaria acceder a tu servidor para ir creando las stages con combinacion con algun lenguaje de servidor, no te doy la solucion masticada pèro creo que te va a dar ideas para hacerlo mas interactivo, te lo he puesto asi de simple porque se quejaron que lo ponia complicado los scripts, por lo que puedes cojer los strings repetidos i meterlos en variables que puedes ir poniendo en un for para asi que te quede mas comprimido sin tanta escritura. Respecto a las soluciones sessionStorage simplemente las pongo porque las puedes añadir cuando quieras es decir en el nivel 2 por ejemplo puedes añadir via ajax las respuestas de nivel 3 4 o 5 o si quieres puedes cargarlas en el momento, tambien puedes hacer que las respuestas sean verificadas por el servidor una a una mediante codigos... bueno ahi ya me enrolle demasiado jajajaja 
</script></html>

Por aukun

Claber

199 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Abr 2017 01:22 am

aukun escribió:

Aqui te dejo un ejemplo que hice para ti pero solo trabajo con javascript asi que puede que te sirva de algo esto que hice para ti, haz pruebas con lo que te deje con diferentes browsers:

Código HTML :

<html id='H' style="overflow:hidden;"><head id="h"><meta charset="utf-8"></head><body id="b" spellcheck="false"><style>.Us{-moz-appearance:none;text-indent:0.01px;text-overflow:'';}</style></body>
<script>

///variables browser
sessionStorage['link']='http://www.granma.cu/file/img/2016/03/medium/f0055893.jpg|||https://www.dondevive.org/wp-content/uploads/2016/06/donde-vive-el-raton.jpg|||https://www.okomeds.com/wp-content/uploads/2016/02/p18lq7ediepl816p6s04171vo23.jpg|||https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Flag_of_the_Basque_Country.svg/200px-Flag_of_the_Basque_Country.svg.png';
sessionStorage['respostes']='colgatepresident,mickymouse,pilotes,ayvalaostia';

///funcions base
String['prototype'].rep=function(){var a=arguments;var z=this.replace(a[0],a[1]);while(z.indexOf(a[0])>-1){z=z.replace(a[0],a[1]);};return z;};
window['$']=function(){var a=arguments,b,B,c,C='createElement',d,D=document,e,f='',g,G='getElementById',i,I='indexOf',j,l=a.length,L='length',o=(l==4)?D[C](a[1]):(typeof a[0]=='object')?a[0]:(a[0]=='')?'':D[G](a[0]),s='substr',S='style',t='split',T='sessionStorage',W=window;if(l==1){return o;}else if(l==2){b=a[1];c=b[0];d=b[s](1);if(c==':'){return o[d];}else if(c==';'){return o[S][d];}else if(c=='@'){e=d[t](c);W[e[0]].apply(this,e[1][t]('|'));}else{var A=Array();if(b[I](',')<0){A[0]=b;}else{A=b[t](',');};for(j in A){e=A[j];f=e.match(/[:;@]/)[0];g=Array(e[s](0,e[I](f)),e.substr((1+e[I](f))));if(f==':'){o[g[0]]=g[1];}else if(f==';'){o[S][g[0]]=g[1];}else if(f=='@'){o[g[0]]=W[g[1]];}}}}else if(l==3){}else if(l==4){var p=$(a[2]);if(a[0]!=''){o.id=a[0];};$(o,a[3]);p.appendChild(o);}}

///////maketitzacio
var A=Array();A=sessionStorage['link'].split('|||'),R=sessionStorage['respostes'].split(',');


$('d','div','b','position;absolute,top;20px,left;-600px,width;540px,padding;20px,height;160px,border;10px solid grey,borderRadius;10px,overflow;hidden,transition;left 0.75s');

$('d0','div','d','position;absolute,bottom;-150px,left;30px,width;100px,height;auto,border;10px solid red,borderRadius;10px,transition;bottom 1s');
$('df0','img','d0','width:100,src:'+A[0]);

$('d1','div','d','position;absolute,bottom;-150px,left;160px,width;100px,height;auto,border;10px solid yellow,borderRadius;10px,transition;bottom 1s');
$('df1','img','d1','width:100,src:'+A[1]);

$('d2','div','d','position;absolute,bottom;-150px,left;290px,width;100px,height;auto,border;10px solid blue,borderRadius;10px,transition;bottom 1s');
$('df2','img','d2','width:100,src:'+A[2]);

$('d3','div','d','position;absolute,bottom;-150px,left;420px,width;100px,height;auto,border;10px solid green,borderRadius;10px,transition;bottom 1s');
$('df3','img','d3','width:100,src:'+A[3]);

$('input','div','d','position;absolute,div:0,bottom;5px,left;-200px,width;100px,height;10px,overflow;hidden,padding;5px,border;3px solid black,borderRadius;3px,transition;left 1s,contentEditable:true,fontSize;12px');

window.onload=function(){$('d','left;40px');setTimeout(function(){$('d0','bottom;40px');setTimeout(function(){$('d1','bottom;40px');setTimeout(function(){$('d2','bottom;40px');setTimeout(function(){$('d3','bottom;40px');$('input','left;32px');},500);},500);},500);},500);}

$('input').onblur=function(){
   var div=this.div;
   if(this.textContent==R[div]){
      this.textContent='CORRECTE';this.style.color='green';var C=this.cloneNode(true);$(C,'id:res'+div+',contentEditable:false,textAlign;center');$('d').appendChild(C);
      this.div++;div=this.div;
      if(div<4){
         
         var o=$('d'+div);
         $('input','textContent:,left;'+(o.offsetLeft+12)+'px,color;black');
      }else{
         alert('a');
         $('d','overflow;visible');$('input').style.transition='backgroundColor 1s,width 1s,bottom 1s,left 1s';$('input','textContent,click aqui para el siguiente nivel,textAlign;center,ContentEditable:false,color;white,bottom;-50px,width;580px,left;-10px,backgroundColor;black');}
   }else{
      this.textContent='INCORRECTE';this.style.color='red';setTimeout(function(){$('input','textContent:,color;black');},1000);
   }   
   
}

//aqui lidia le puedes poner la condicion de hacer un onclick al boton recomiendo que utilices ajax al hacer click desde aqui puedes cambiar el src de las imagenes desde ajax, hacer un remove() a los elementos res0,res1,res2,res3 hacer contenteditable true otra vez a input i posicionarlo i redimensinarlo en la posicion donde estava el obama apartir de ahi no hago nada mas porque necesitaria acceder a tu servidor para ir creando las stages con combinacion con algun lenguaje de servidor, no te doy la solucion masticada pèro creo que te va a dar ideas para hacerlo mas interactivo, te lo he puesto asi de simple porque se quejaron que lo ponia complicado los scripts, por lo que puedes cojer los strings repetidos i meterlos en variables que puedes ir poniendo en un for para asi que te quede mas comprimido sin tanta escritura. Respecto a las soluciones sessionStorage simplemente las pongo porque las puedes añadir cuando quieras es decir en el nivel 2 por ejemplo puedes añadir via ajax las respuestas de nivel 3 4 o 5 o si quieres puedes cargarlas en el momento, tambien puedes hacer que las respuestas sean verificadas por el servidor una a una mediante codigos... bueno ahi ya me enrolle demasiado jajajaja 
</script></html>


¡Muchas gracias por contestar! ¿Pero si utilizo Switch pasa algo?

Por LydiaOcean

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 13 Abr 2017 01:39 am
ostias no sabia lo que querias decir con switch jajaja ahora lo vi lo de case, bueno utilizalo, es mucho mas largo con switch pero si te aclaras mas, aqui cada programador utiliza una gramatica diferente para hacer exactamente las mismas cosas, yo me aclaro mas con condicionales de toda la vida lo que pasa es que los dos puntos en javascript yo siempre los utilizo para tipear Objects o adicionas mediante prototype, por cierto probastes el html que te envie?

Por aukun

Claber

199 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Abr 2017 01:58 am
por cierto te dara error porque ---> textContent,click aqui para el siguiente nivel deberia ser ---> textContent:click aqui para el siguiente nivel . buscalo y luego te saldra bien

Por aukun

Claber

199 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Abr 2017 01:57 pm

aukun escribió:

ostias no sabia lo que querias decir con switch jajaja ahora lo vi lo de case, bueno utilizalo, es mucho mas largo con switch pero si te aclaras mas, aqui cada programador utiliza una gramatica diferente para hacer exactamente las mismas cosas, yo me aclaro mas con condicionales de toda la vida lo que pasa es que los dos puntos en javascript yo siempre los utilizo para tipear Objects o adicionas mediante prototype, por cierto probastes el html que te envie?


Síí, he puesto todo lo que me has dicho y he cambiado lo que me has mencionado en el otro comentario de lo de textContent, pero voy a abrir la página y me aparece en blanco :?
PD: ¿Del ejemplo que yo he enviado sabrías reconocer dónde está el error en los botones? Me está volviendo loca

Por LydiaOcean

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 13 Abr 2017 04:36 pm
respecto al html que te deje algo debes estar poniendo mal porque a mi me funciona en todos los browsers , bueno como quieras pero con eso no vas a aprender nada, a ver el principal problema que veo en tu script es que llamas a las cuatro variables que solo existen dentro de la funcion, desde fuera la funcion para eso es mejor crear unas variables externas y les vas dando el valor a ver creo que esto quedaria asi:

Código HTML :

<html>
<head>
<meta charset="UTF-8">
<title>4 fotos 1 palabra</title>

</head>

<body>
<div id=cuerpo>
<h1>4 fotos 1 palabra<br>
¡Adivina!</h1><br><br>
<form>
<img id="juego" src="https://www.dondevive.org/wp-content/uploads/2016/06/donde-vive-el-raton.jpg" style="width:300px;height:300px;"><br><br><br>
<input id='i2' type="text"><br><br>
<button id='i1' Style="visibility:hidden" >Aceptar</button>
<input id='b1' Style="visibility:visible" type="button" value="Siguiente" onclick="game(image)">
</form>
</div>
</body>
<script>

var fotos = String("https://www.dondevive.org/wp-content/uploads/2016/06/donde-vive-el-raton.jpg,http://www.granma.cu/file/img/2016/03/medium/f0055893.jpg,https://www.okomeds.com/wp-content/uploads/2016/02/p18lq7ediepl816p6s04171vo23.jpg,https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Flag_of_the_Basque_Country.svg/200px-Flag_of_the_Basque_Country.svg.png").split(',');
var w=window,D=document,s='style',g='getElementById';
w['image']=0;
var A=Array();
function game(ima) {
   A.push(D[g]('i2').value);
   D[g]('i2').value='';
   image=parseInt(ima)+1;
   D[g]("juego").src = fotos[image];
   if(ima<3){D[g]('b1')[s].visibility='visible';D[g]('i1')[s].visibility='hidden';}else{
   D[g]('b1')[s].visibility='hidden';D[g]('i1')[s].visibility='visible';   
      }
}

function joc(uno,dos,tres,cuatro) {
alert(uno+dos+tres+cuatro);
switch (uno) {
case "raton":
w['miRat'] = "raton";
alert("¡Has acertado!");
break;
default:
w['miRat'] = "¡Has fallado!";
}

switch (dos) {
case "presidentes":
w['miPres'] = "presidentes";
alert("¡Has acertado!");
break;
default:
w['miPres'] = "¡Has fallado!";
}

switch (tres) {
case "deporte":
w['miDep'] = "deporte";
alert("¡Has acertado!");
break;
default:
w['miDep'] = "¡Has fallado!";
}

switch (cuatro) {
case "euskadi":
w['miSpa'] = "euskadi";
alert("¡Has acertado!");
break;
default:
w['miSpa'] = "¡Has fallado!";
}
}
D[g]('i1').onclick=function(){alert(A[0]);
   joc(A[0],A[1],A[2],A[3]);
   }
</script>
</html> 



recuerda que debes esconder los botones que no sean necesarios , mira de esconder la imagen tambien cuando veas que el elemento imagen esta en blank, de todas formas mirate el script que te deje es mas dinamico. te lo dejo en algun servidor de los que tengo a ver --> http://zaaz.000webhostapp.com/eljocdelsegle.html

Por aukun

Claber

199 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Abr 2017 10:02 pm

aukun escribió:

respecto al html que te deje algo debes estar poniendo mal porque a mi me funciona en todos los browsers , bueno como quieras pero con eso no vas a aprender nada, a ver el principal problema que veo en tu script es que llamas a las cuatro variables que solo existen dentro de la funcion, desde fuera la funcion para eso es mejor crear unas variables externas y les vas dando el valor a ver creo que esto quedaria asi:

Código HTML :

<html>
<head>
<meta charset="UTF-8">
<title>4 fotos 1 palabra</title>

</head>

<body>
<div id=cuerpo>
<h1>4 fotos 1 palabra<br>
¡Adivina!</h1><br><br>
<form>
<img id="juego" src="https://www.dondevive.org/wp-content/uploads/2016/06/donde-vive-el-raton.jpg" style="width:300px;height:300px;"><br><br><br>
<input id='i2' type="text"><br><br>
<button id='i1' Style="visibility:hidden" >Aceptar</button>
<input id='b1' Style="visibility:visible" type="button" value="Siguiente" onclick="game(image)">
</form>
</div>
</body>
<script>

var fotos = String("https://www.dondevive.org/wp-content/uploads/2016/06/donde-vive-el-raton.jpg,http://www.granma.cu/file/img/2016/03/medium/f0055893.jpg,https://www.okomeds.com/wp-content/uploads/2016/02/p18lq7ediepl816p6s04171vo23.jpg,https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Flag_of_the_Basque_Country.svg/200px-Flag_of_the_Basque_Country.svg.png").split(',');
var w=window,D=document,s='style',g='getElementById';
w['image']=0;
var A=Array();
function game(ima) {
   A.push(D[g]('i2').value);
   D[g]('i2').value='';
   image=parseInt(ima)+1;
   D[g]("juego").src = fotos[image];
   if(ima<3){D[g]('b1')[s].visibility='visible';D[g]('i1')[s].visibility='hidden';}else{
   D[g]('b1')[s].visibility='hidden';D[g]('i1')[s].visibility='visible';   
      }
}

function joc(uno,dos,tres,cuatro) {
alert(uno+dos+tres+cuatro);
switch (uno) {
case "raton":
w['miRat'] = "raton";
alert("¡Has acertado!");
break;
default:
w['miRat'] = "¡Has fallado!";
}

switch (dos) {
case "presidentes":
w['miPres'] = "presidentes";
alert("¡Has acertado!");
break;
default:
w['miPres'] = "¡Has fallado!";
}

switch (tres) {
case "deporte":
w['miDep'] = "deporte";
alert("¡Has acertado!");
break;
default:
w['miDep'] = "¡Has fallado!";
}

switch (cuatro) {
case "euskadi":
w['miSpa'] = "euskadi";
alert("¡Has acertado!");
break;
default:
w['miSpa'] = "¡Has fallado!";
}
}
D[g]('i1').onclick=function(){alert(A[0]);
   joc(A[0],A[1],A[2],A[3]);
   }
</script>
</html> 



recuerda que debes esconder los botones que no sean necesarios , mira de esconder la imagen tambien cuando veas que el elemento imagen esta en blank, de todas formas mirate el script que te deje es mas dinamico. te lo dejo en algun servidor de los que tengo a ver --> http://zaaz.000webhostapp.com/eljocdelsegle.html


Vale, muchas gracias por tu tiempo, y gracias también por lo de Euskadi xdddddddddd

Por LydiaOcean

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 13 Abr 2017 10:34 pm
ostias es verdad era españñññña con cinco eñes en vez de euskadi. bueno le cambias la bandera por la española y listos jajajaja

Por aukun

Claber

199 de clabLevel



Genero:Masculino  

firefox

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.