JavaScript - Programa memoria Javascript

 
Vista:
sin imagen de perfil

Programa memoria Javascript

Publicado por kendo (6 intervenciones) el 14/10/2013 18:36:38
Hola soy nuevo en esto y me gustaría por favor que alguien me ayudase un poco
con el siguiente programa ,dado que es la primera vez que veo Javascript y aunque he mirado
un par de tutoriales y tal , aún no se por donde me pega el viento con este lenguaje.

El programa es el siguiente :

Hay que crear un minijuego para poner a prueba la memoria:
-Al pulsar un botón de inicio al usuario se le muestra una tabla de 3x3 números
aleatorios del 0 al 9.
-Una vez que el usuario considere que los ha memorizado, pulsa un botón y los
números desaparecen de sus casillas; ahora el usuario tiene que tratar de poner los
mismos números.
-Una vez haya terminado, se le mostrará el tiempo transcurrido en segundos y el
número de aciertos o fallos.
-Todas las casillas acertadas aparecerán con fondo verde y el resto en rojo.

Alguien podría ayudarme con esto , no digo que lo hagais entero sino ver como iniciar el código, cómo seguir, unas pautas .

GRACIAS !
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Programa memoria Javascript

Publicado por xve (2100 intervenciones) el 15/10/2013 07:22:50
Hola Kendo, la verdad es que no es que sea una tarea rápida de realizar... intentare ayudarte con los problemas que tengas....
Cualquier duda que vayas teniendo nos comentas, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Programa memoria Javascript

Publicado por kendo (6 intervenciones) el 15/10/2013 13:18:02
Te agradezco tu ayuda xve ,intentaré por lo menos empezar , a ver que tal
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Programa memoria Javascript

Publicado por kendo (6 intervenciones) el 19/10/2013 20:46:11
Hola , te dejo el código que he intentado hacer (el código se que está mal hay variables que no corresponden porque he ido cogiendo algo de cada parte que he visto en internet y al final me ha salido eso), cuando lo ejecutes verás columna de números que al recargar la página cambian , es decir son aleatorios. Mi intención era meter esos números dentro de las casillas pero no lo he conseguido ni por asomo ! :/


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Juego de memoria</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <h2>JUEGO DE MEMORIA</h2>
<SCRIPT LANGUAGE="JavaScript">
var aleatorio = Math.floor(Math.random() * 9) + 1;
</script>
        <form name="f">
        <table cellpadding="0" cellspacing="0" border="1">
        <script language="javascript">
        <!-- GENERAR LA TABLA
        for (r = 0; r <= 2; r++) {
        document.write('<tr>');
        for (c = 0; c <= 2; c++) {
        document.write('<td align="center">');
        document.write('<a href="javascript:showimage('+aleatorio+')" onClick="document.f.b.focus()">');
        document.write('<img src="image0.jpg" name="img'+aleatorio+'" border="0" height="100" width="100">');
        document.write('</a></td>');
        document.write("<p>" + aleatorio + "</p>");<!--CONTINUAR AQUI
        }
        document.write('</tr>');
        }
        // FIN DE TABLA
        </script>
        </table>
        <br><br>
        <input type="button" value="         " name="b" onClick="init()">
        </form>
        </center>
       
   
    </script>
</head>
<body>
</body>
</html>

Si alguien puede ayudarme a seguir con el codigo lo agradecería muchisimo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Programa memoria Javascript

Publicado por xve (2100 intervenciones) el 20/10/2013 10:12:47
Hola Kendo, veo varias cosas...
- no deberías de poner codigo html dentro del head, ya ahi no es su sitio
- revisa tu código, ya que cierras cosas que no has abierto como </script> y </center>
- Te recomiendo tabular muy bien tu código, de esta manera te daras cuenta de los tags que no cierras o de los que has cerrado y no estan abiertos.- <center> es una regla que ya no existe en html5, es importante que no la utilices.
- Si deseas escribir dentro de una tabla, tienes que hacerlo dentro del tab <td>.. tu estas mostrando el numero aleatorio fuera de ese tag.

Mira este código haber si te sirve:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Juego de memoria</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
    <h2>JUEGO DE MEMORIA</h2>
    <form name="f">
        <table cellpadding="0" cellspacing="0" border="1">
            <script language="javascript">
                <!-- GENERAR LA TABLA
                for (r = 0; r <= 2; r++) {
                    document.write('<tr>');
                    for (c = 0; c <= 2; c++) {
                        var aleatorio = Math.floor(Math.random() * 9) + 1;  
                        document.write('<td align="center">');
                        document.write('<a href="javascript:showimage('+aleatorio+')" onClick="document.f.b.focus()">');
                        document.write('<img src="image0.jpg" name="img'+aleatorio+'" border="0" height="100" width="100"></a>');
                        document.write("<p>" + aleatorio + "</p>");
                        document.write('</td>');
                    }
                    document.write('</tr>');
                }
                // FIN DE TABLA
            </script>
        </table>
        <br><br>
        <input type="button" value="         " name="b" onClick="init()">
    </form>
</body>
</html>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Programa memoria Javascript

Publicado por kendo (6 intervenciones) el 20/10/2013 17:04:03
Hola xve , pues he probado lo mismo pero para intentar conseguir eh creado una hoja de estilo para posteriormente enlazarlas pero no consigo nada , además se me agota el tiempo para la entrega de la práctica porque es hoy así que nada la entregaré como la tenga , que por lo menos vean que lo he intentando...además eh intentado esto pero tampoco consigo nada, ni resetear el tiempo ni nada ....me quedo con lo tengo , GRACIAS POR HABERME AYUDADO XVE !!!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
MemoryGame.fn.resetGame = function(){
	this.resetTimer();
	this._numClicks = 0;
	this._clicksSpan.html("0");
}
 
 
<!DOCTYPE HTML PUBLIC>
<html>
 <head>
 <title>Juego de memoria</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <LINK href="C:\Users\pablo\Desktop\estilo.css" rel="stylesheet" type="text/css">
 
 </head>
 <body style="height:400px"> <h2>JUEGO DE MEMORIA</h2>
  <form name="f">
    <table id="table" cellpadding="0" cellspacing="0" border="1">
        <script language="javascript">
            <!-- GENERAR LA TABLA
            for (r = 0; r <= 2; r++) {
            document.write('<tr>');
            for (c = 0; c <= 2; c++) {
            var aleatorio = Math.floor(Math.random() * 9) + 1; 
             document.write('<td align="center"  height="100px"  width="100px">');
             
             document.write("<p>" + aleatorio + "</p>");
             document.write('</td>');
        }
        document.write('</tr>');
		
    }
	
	MemoryGame.fn.resetGame = function(){
	this.resetTimer();
	this._numClicks = 0;
	this._clicksSpan.html("0");
}


     // FIN DE TABLA 
    </script>
</table>
<br><br>
<input type="button" value=" " name="b" onClick="init()">
 </form>
</body> 
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Programa memoria Javascript

Publicado por kendo (6 intervenciones) el 20/10/2013 19:14:01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE HTML PUBLIC>
<html>
 <head>
 <title>Juego de memoria</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 </head>
 <body style="height:400px"> <h2>JUEGO DE MEMORIA</h2>
	<table id="table" cellpadding="0" cellspacing="0" border="1">
        <script language="javascript">
            <!-- GENERAR LA TABLA
            for (r = 0; r <= 2; r++) {
            document.write('<tr>');
            for (c = 0; c <= 2; c++) {
            var aleatorio = Math.floor(Math.random() * 9) + 1; 
			document.write('<td align="center"  height="100px"  width="100px">');
            document.write("<p>" + aleatorio + "</p>");
            document.write('</td>');
			}
			}
			var borrados = function(){

	var borrado = document.getElementsByTagName('td');
	for(var i=0;i<borrado.length; i++){
	numeros[i]=borrado[i].innerHTML;
	borrado[i].innerHTML = "";
	var input= document.createElement('input');
	input.type="text";
	input.name="text";
	borrado[i].appendChild(input);
	}

	};
			
</script>
</table>
<a href="javascript:location.reload()"><strong><font size="2">Jugar otra</font></strong></a> 
<a href="javascript:location.borrado()"><strong><font size="2">borrado</font></strong></a> 
 
</body> 
</html>

Sigo intentandolo , pero no consigo que al presionar "borrado" desaparezcan los numeros de la tabla para luego "empezar a jugar " (cosa que por mas que intento no consigo continuar el código)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Programa memoria Javascript

Publicado por xve (2100 intervenciones) el 20/10/2013 20:33:25
Hola Kendo, haber si te sirve este código que te he preparado.

Lo que hace es que te muestra los números aleatorios, y te permite ocultarlos y mostrarlos nuevamente.
Te he puesto comentada la opción de eliminar dichos números, pero luego ya no sabrás cuales eran a la hora de revisarlo...

Espero que te ayude...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<title>Juego de memoria</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script type="text/javascript">
    var ocultar = function()
    {
        for(var i=0;i<9;i++)
        {
            // con esta linea los eliminas, pero no podras volver a mostrarlos
            //document.getElementsByClassName("numero")[i].innerHTML="";
            document.getElementsByClassName("numero")[i].style.display="none";
            document.getElementsByClassName("solicitudNumero")[i].style.display="inline";
        }
        document.getElementById("mostrar").style.display="inline";
    };
    var mostrar = function()
    {
        for(var i=0;i<9;i++)
        {
            document.getElementsByClassName("numero")[i].style.display="inline";
            document.getElementsByClassName("solicitudNumero")[i].style.display="none";
        }
    };
</script>
 
<style>
#table td {width:100px;height:100px;text-align:center;}
.solicitudNumero {display:none;width:50px;}
#mostrar {display:none;}
</style>
 
</head>
<body style="height:400px">
    <h2>JUEGO DE MEMORIA</h2>
    <table id="table" cellpadding="0" cellspacing="0" border="1">
        <script type="text/javascript">
            for (r = 0; r <= 2; r++)
            {
                document.write('<tr>');
                for (c = 0; c <= 2; c++)
                {
                    var aleatorio = Math.floor(Math.random() * 9) + 1;
                    document.write("<td>");
                    document.write("<span class='numero'>" + aleatorio + "</span>");
                    document.write("<input class='solicitudNumero' type='text' name='text[]'>");
                    document.write("</td>");
                }
                document.write('</tr>');
            }
        </script>
    </table>
    <a href="javascript:location.reload()"><strong><font size="2">Jugar otra</font></strong></a>
    <a href="javascript:ocultar()"><strong><font size="2">ocultar</font></strong></a>
    <a href="javascript:mostrar()" id="mostrar"><strong><font size="2">mostrar</font></strong></a>
</body>
</html>

Ya nos comentaras que tal te fue la prueba.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Programa memoria Javascript

Publicado por kendo (6 intervenciones) el 20/10/2013 21:10:17
Hola de nuevo xve el asunto es el siguiente (que canso soy) cuando desaparezcan los numeros tengo que poner un cronometro para saber cuanto tiempo tarda el jugador en adivinar las parejas...esa funcion me imaigno que seria con un if pero nose como implementarla para que ademas tambien me cuente el numero de aciertos y fallos...bueno tengo esto que he creado totalmente aparte que es un contador....que va bien ( nose como pero va bien ) y quiero saber donde tengo que meterlo porque he probado pero no sale :/

GRACIAS !!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYE html>
<html>
<head>
	<script type="text/javascript">
	//setInterval
	var cronometro;
 
	function detenerse()
	{
		clearInterval(cronometro);
	}
 
	function carga()
	{
		contador_s =0;
		contador_m =0;
		s = document.getElementById("segundos");
		m = document.getElementById("minutos");
 
		cronometro = setInterval(
			function(){
				if(contador_s==60)
				{
					contador_s=0;
					contador_m++;
					m.innerHTML = contador_m;
 
					if(contador_m==60)
					{
						contador_m=0;
					}
				}
 
				s.innerHTML = contador_s;
				contador_s++;
			}
			,1000);
	}
	</script>
</head>
<body onload="carga()">
	<p>
		<span id="minutos">0</span>:<span id="segundos">0</span>
	</p>
	<input type="button" onclick="detenerse()" value="deternse"/>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar