Publicado el Deja un comentario

05 Python.Condicional If

Vemos en el video como solicitar 2 numeros al usuario y evaluar cual es el mayor, usando para ello el bloque condicional If de Python.

#SOLICITAMOS NUMEROS
numero1=int(input(“Dime el primer numero “))
numero2=int(input(“Dime el segundo numero “))
#COMPARAMOS LOS NUMEROS
if (numero1>numero2):
    print(“El numero “,numero1,” es mayor que “,numero2)
elif (numero1<numero2):
    print(“El numero “,numero1,” es menor que “,numero2)
else:
    print(“El numero “,numero1,” es igual a “,numero2)
print(“Hemos acabado”)  
 

Please follow and like us:
Publicado el Deja un comentario

20 Java. Consultar datos de Sqlite

Crearemos un metodo para consultar datos de Sqlite mediante Java con el IDE Eclipse.

Clase Principal

import java.sql.SQLException;

public class main {
    static String nombreTabla=”alumno”;
    public static void main(String[] args) throws SQLException  {
        sqlite  miBaseDb=new sqlite();
        miBaseDb.conectar();
        miBaseDb.crearTabla(nombreTabla);
        miBaseDb.insertaDatos(17, “Jose”, “Ojeda”,”Bien”);
        miBaseDb.insertaDatos(18, “Juan”, “Martin”,”Bien”);
        miBaseDb.consultaDatos(nombreTabla);
    }

}

Clase Sqlite

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class sqlite {
     Connection c=null;
     Statement sentencia=null;
     String nombreTabla;
     String Nombre,Apellidos,Nota;
     int ID;
    public void conectar(){
   
    try{
        Class.forName(“org.sqlite.JDBC”);
        c=DriverManager.getConnection(“jdbc:sqlite:test.db”);
        System.out.println(“Exito al conectar con base de datos”);
    }catch(Exception e){
        System.out.println(“Error al conectar con base de datos”);
    }

    }
    public void crearTabla(String nombreTabla) throws SQLException{
        this.nombreTabla=nombreTabla;
        try{
            sentencia=c.createStatement();
            String sql=”CREATE TABLE “+nombreTabla+” “+
                    “(ID INT PRIMARY KEY NOT NULL,”+
                    ” Nombre TEXT NOT NULL,”+
                    ” Apellidos TEXT NOT NULL,”+
                    ” Nota TEXT NOT NULL)”;
            sentencia.execute(sql);
            sentencia.close();
            c.close();
            System.out.println(“Exito al crear la tabla”);
        }catch(Exception e){
            System.out.println(“Error al crear la tabla o que ya estaba creada”);
        }
    }
    public void insertaDatos(int ID,String Nombre,String Apellidos,String Nota)throws SQLException{
        this.ID=ID;
        this.Nombre=Nombre;
        this.Apellidos=Apellidos;
        this.Nota=Nota;
        String sqlInsert=”INSERT INTO “+nombreTabla+”(ID, Nombre, Apellidos, Nota) “+
                “VALUES(“+ID+”,'”+Nombre+”‘,'”+Apellidos+”‘,'”+Nota+”‘);”;
       
        try {
            conectar();
            sentencia=c.createStatement();
            sentencia.executeUpdate(sqlInsert);
            sentencia.close();
            c.close();
            System.out.println(“Datos insertados”);
        }catch(Exception e){
            System.out.println(“Error al insertar datos en la tabla”);
        }
    }
    public void consultaDatos(String nombreTabla)throws SQLException{
        conectar();
        sentencia=c.createStatement();
        String consultaSql=”SELECT * FROM “+nombreTabla+”;”;
        try{
            ResultSet rs=sentencia.executeQuery(consultaSql);
            while(rs.next()){
                int ID=rs.getInt(“ID”);
                String Nombre=rs.getString(“Nombre”);
                String Apellidos=rs.getString(“Apellidos”);
                String Nota=rs.getString(“Nota”);
                System.out.println(“Id : “+ID+” Nombre : “+Nombre+” Apellidos : “+Apellidos+” Nota : “+Nota);
            }
            rs.close();
            sentencia.close();
            c.close();
        }catch(Exception e){
            System.out.println(“Fallo al recuperar datos”);}
       
       
    }
    }

Please follow and like us:
Publicado el Deja un comentario

Crea tu web Responsive 1

Web
basica HTML

El esqueleto de nuestra web con codigo HTML sera asi:
<!DOCTYPE html>

<html>

<head>

<title>

Mi primera web

</title>

</head>

<body>

<header>

</header>

<nav>

</nav>

<section>

<article>

</article>

</section>
<ASIDE>
</ASIDE>
<footer>
</footer>

</body>

</html>
Pon el codigo
anterior en el editor de textos y grabalo como index.html, asi se suele nombrar
la pagina principal.
Si ejecutas
dicha pagina en un navegador web o desde el menu de Notepad++ le damos a
“ejecutar / lanzar en …” podremos ver que el contenido de la web esta en
blanco, excepto el titulo que aparecera en la ventana superior o solapa del
navegador.
El
código es básico, pero tiene todas las etiquetas que forman la estructura de
nuestra pagina web, como observais las etiquetas suelen ir emparejadas una abre
y otra cierra, con algunas excepciones que ya iremos viendo.
El
inicio del documento <!DOCTYPE> es la declaración del documento.
Despues
tenemos la etiqueta <html> que abre y cierra toda nuestra web
</html>, engloba todo el documento.
En
<head> se incluye la parte de declaración no visible de la web en si,
donde enlazamos con el documento CSS para dar estilo a la web, ponemos su
titulo e incluimos las descripciones y palabras claves, las llamadas “metas”,
esta etiqueta se cierra con </head>.
Pasamos
ahora a la etiqueta <body> aquí es donde va todo el contenido visible de
nuestra web, donde incluiremos textos, imágenes, videos, etc; se cierra con
</body>.
Dentro
del body o cuerpo de la web tenemos:
·        
Header,
donde situamos la cabecera de la web, logotipo, titulo principal, etc.
·        
Nav,
aquí incluiremos la barra de menus o navegación de nuestra web.
·        
Section,
en esta etiqueta incluiremos los contenidos, dentro de ella usaremos los
Article, es la parte principal de la web.
·        
Aside,
es como la parte complementaria de la web, donde ponemos las redes sociales,
publicidad, etc, no es la parte imprescindible de la web.
·        
Footer,
es el pie de nuestra pagina web, donde se suele poner el contador de visitas o
el copyright entre otros.
Una
vez vista la base de nuestra web, pasamos a ver y preparar cada etiqueta.

Head

En el
head vamos a poner las metas indicando las palabras claves, descripción,
lenguaje usado, autor, código para los caracteres y enlace al documento CSS que
dara formato a nuestra web, el código del head es:
<html>

<head>

<meta
charset=”UTF-8″>

<meta
name=”language” content=”Spanish”>

<meta
name=”author” content=”Jose Ojeda”>

<meta
name=”description” content=”mi primera web”>

<meta
name=”keywords” content=”web,diseño,html,css”>

<link rel=”stylesheet”
href=”css/estilos.css” type=”text/css”/>

<title>

Mi primera web

</title>

</head>
Como
se ve en el código las metas tienen su nombre y el contenido, en charset hemos
puesto utf-8 para que no se vean raros los caracteres con acentos o “ñ”, en
link hemos puesto la referencia o enlace al documento CSS que crearemos una vez
terminada la estructura.

Header

En el
header vamos a introducir el titulo de nuestra web, poniendo en su código lo
siguiente:
<header>

<h1>Mi
Web</h1>

<p>diseñada
por Jose Ojeda</p>

</header>
En el
código hemos introducido un titulo h1 y un párrafo, los títulos van numerados
en orden de tamaño a h1, h2, h3…

Nav

En la barra de navegación vamos a incluir
botones de menu a Inicio, Blog, Nosotros y Contacto, quedando el código asi:
<nav>

<ul>

<li><a
href=”#”>Inicio</a></li>

<li><a
href=”#”>Blog</a></li>

<li><a
href=”#”>Nosotros</a></li>

<li><a
href=”#”>Contacto</a></li>

</ul>

</nav>
Para esto hemos usado la etiqueta
<ul> de listas desordenadas en la que incluimos los ítems mediante
<li> y dentro de estos los enlaces mediante la etiqueta <a> apuntando
al documento que pongamos en sustitución de “#” que cambiaremos en cuanto lo
preparemos mas adelante;  para mostrar el
texto que aparecerá en el enlace lo hacemos mediante las palabras incluidas
entre <a> y </a>.

Section, Article

En este apartado incluiremos el
contenido principal de nuestra web, la sección “section” podrá contener varios artículos
“article”, el código base lo formamos de la siguiente forma:
<section>

<article>

<hgroup>

<h2>Titulo del
articulo</h2>

</hgroup>

<p>Parrafo de pruebas para el
articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

</p>

<p>Parrafo2 de pruebas para el
articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

</p>

</article>

</section>
Hemos incluido dentro de “Article” la
etiqueta “hgroup” donde englobamos los encabezados, en este caso incluimos un
encabezado de orden 2, “h2”.
Despues incluimos la etiqueta de párrafo
“p” y cada salto de línea con “br”, en el ejemplo incluimos dos párrafos para
que se vea bien el contenido.

Aside

Como indicamos al principio, en este
apartado se incluirá el contenido secundario de nuestra web, como pueden ser
enlaces a otras webs, redes sociales, publicidad, etc.
<aside>

<div
id=”enlacesexternos”>

<h2>Enlaces:</h2>

<ul>

<li><a
href=”materialpalette.com”>Paleta de Colores</a></li>

<li><a
href=”https://www.ticoticotaa.es”>Tutoriales</a></li>

</ul>

</div>

<div
id=”redessociales”>

<h2>Sigueme:</h2>

</div>

</aside>
Como veis en esta ultima parte de código,
hemos introducido dentro del “aside” dos “divs” con sus respectivos nombres
diferenciadores para poder manejarlos cuando entremos con CSS, un div lo vamos
a dedicar a los enlaces externos y el otro a las redes sociales.

Footer

Llegamos ya a la parte final de
nuestra web, el pie de pagina, en este caso incluiremos el copyright y quien
diseña la plantilla, mediante dos “divs” que diferenciaremos con CSS, el código
del footer es:
<footer>

<div
id=”copyright”><cite>Derechos reservados
2017</cite></div>

<div
id=”creacion”><cite>Plantilla creada por Jose
Ojeda</cite></div>

</footer>
Con el ejemplo que estamos realizando,
actualmente nuestra web se ve de la siguiente forma:

El código html completo es el
siguiente:
<!DOCTYPE html>

<html>

<head>

<meta
charset=”UTF-8″>

<meta name=”language”
content=”Spanish”>

<meta name=”author”
content=”Jose Ojeda”>

<meta
name=”description” content=”mi primera web”>

<meta name=”keywords”
content=”web,diseño,html,css”>

<link rel=”stylesheet”
href=”css/estilos” type=”text/css”/>

<title>

Mi primera web

</title>

</head>

<body>

<header>

<h1>Mi Web</h1>

<p>diseñada por Jose
Ojeda</p>

</header>

<nav>

<ul>

<li><a
href=”#”>Inicio</a></li>

<li><a
href=”#”>Blog</a></li>

<li><a
href=”#”>Nosotros</a></li>

<li><a
href=”#”>Contacto</a></li>

</ul>

</nav>

<section>

<article>

<hgroup>

<h2>Titulo del
articulo</h2>

</hgroup>

<p>Parrafo de pruebas para el
articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

</p>

<p>Parrafo2 de pruebas para el
articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo
de nuestra pagina web.<br/>

</p>

</article>

</section>

<aside>

<div
id=”enlacesexternos”>

<h2>Enlaces:</h2>

<ul>

<li><a
href=”materialpalette.com”>Paleta de Colores</a></li>

<li><a
href=”https://www.ticoticotaa.es”>Tutoriales</a></li>

</ul>

</div>

<div
id=”redessociales”>

<h2>Sigueme:</h2>

</div>

</aside>

<footer>

<div
id=”copyright”><cite>Derechos reservados
2017</cite></div>

<div
id=”creacion”><cite>Plantilla creada por Jose
Ojeda</cite></div>

</footer>

</body>

</html>
Una vez llegado a este punto, podemos
proceder a dar formato a nuestra web usando CSS, lo veremos en la proxima entrada. Gracias.
Please follow and like us:
Publicado el Deja un comentario

05 Javascript Repeticion Funcion cada cierto tiempo

Para probar este ejemplo pulsemos en nuestro navegador firefox Ctrl+Shift+I con lo que abriremos la consola, donde podremos probar directamente el codigo javascript que explico a continuacion:

function Muestra(){
     alert(“Esto se repite cada X segundos”);
}
//aqui llamamos a la funcion anterior dandole el intervalo de repeticion
setInterval(Muestra,3000);

La primera parte del codigo es para crear la funcion a la que damos el nombre “Muestra”, consiste en lanzar una ventana mostrando el texto que pusimos entre los parentesis del alert.
Despues procedemos a llamar a la funcion dentro de setInterval que indica cada cuanto tiempo se realizara la llamada a dicha funcion, en este caso cada tres segundos.
Este ejemplo, a pesar de ser corto y sencillo muestra como desarrollar una funcion, llamarla y  realizar dicha llamada cada cierto tiempo.

Please follow and like us:
Publicado el Deja un comentario

02 Javascript Variables y operadores

Introduccion sobre variables y operadores javascript:

Declaramos una variable usando la palabra reservada var, le damos un valor y la imprimimos en el documento web, todo mediante este codigo encerrado entre las etiquetas script (dentro del html):

<!doctype html>
<html lang=”ES”>
<head>
<link rel=”stylesheet” type=”text/css” href=”css/display.css”>
<title>
Variables
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
<script>
var x=16;
document.write(x);
</script>

</article>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

Si quisieramos imprimir comillas u otros caracteres especiales dentro del documento, tendremos que usar escapes como la “”, por ejemplo: document.write(“”Hola””); de esta forma imprime “Hola” con las comillas.
Los operadores que podemos manejar son:
Primitivos + – * / %

var x=10+6;//x vale 16
document.write(x);
var x=26%6; //modulo, valor de x es 2 que es el resto

Incremento / decremento

var a=0;
var b=10;
var a =b++;//a vale 10 en este se incrementa despues
var a=++b;//a vale 11 en este se incrementa antes

//igual ocurre en decremento b– y –b PROBARLO

Asignacion

var a=0;
var b=12;
a=b;//ahora a es 12
a+=b;//equivale a a=a+b
a-=b;//equivale a a=a-b

Comparacion

 //lo veremos con detalle en bucles y condicionales
a==b;  a===b; a!=b; a!==b; a>b; a<b; a>=b; a<=b;

Logicos

(4<2)&&(10<15); // daria False por que no se cumplen las 2 condiciones
&& //operador and, se tienen que cumplir las 2 condiciones
|| operador or, se tienen que cumplir una condicion

Ternario

variable(condicion)?valor1:valor2;
var Mayor(edad<18)?”Es menor”:”Es mayor”;

Todos los operadores los iremos viendo conforme avancemos con el codigo, ahora nos vale con conocerlos y ver de que disponemos.
Espero os sea util, gracias.

Please follow and like us:
Publicado el Deja un comentario

Scratch – 02 Bucle Repeticion

En este video se realiza un sencillo programa para utilizar la repeticion de condigo, concretamente se repite el codigo 5 veces.
Con el codigo se consigue que el objeto (pelota) este moviendose como si botara por la pantalla, esta accion se repite el numero de veces que le hemos indicado.

 
Please follow and like us:
Publicado el Deja un comentario

07. Juego tres en raya, activar boton partida y terminacion

En este video activo el boton de volver a jugar y preparamos el codigo para que el juego este completamente operativo.

El codigo HTML queda asi:

<!doctype html>
<html lang=”ES”>
<head>
<link rel=”stylesheet” type=”text/css” href=”css/estilos.css”>
<title>
Tres en Raya
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Juego Tres en Raya</h1>
</hgroup>
<div id=”tiempo”>
<p>Contador:</p>
<p id=”contador”>
<span id=”minutos”>00</span>:
<span id=”segundos”>00</span></p>
</div>
<div id=”tablero”>
<div class=”row”>
<div id=”c00″ onClick=”RevisarCelda(0,0)” class=”celda amarillo”></div>
<div id=”c01″ onClick=”RevisarCelda(0,1)” class=”celda rojo”></div>
<div id=”c02″ onClick=”RevisarCelda(0,2)” class=”celda amarillo”></div>
</div><!–row–>
<div class=”row”>
<div id=”c10″ onClick=”RevisarCelda(1,0)” class=”celda amarillo”></div>
<div id=”c11″ onClick=”RevisarCelda(1,1)” class=”celda rojo”></div>
<div id=”c12″ onClick=”RevisarCelda(1,2)” class=”celda amarillo”></div>
</div><!–row–>
<div class=”row”>
<div id=”c20″ onClick=”RevisarCelda(2,0)” class=”celda amarillo”></div>
<div id=”c21″ onClick=”RevisarCelda(2,1)” class=”celda rojo”></div>
<div id=”c22″ onClick=”RevisarCelda(2,2)” class=”celda amarillo”></div>
</div><!–row–>
</div><!–tablero–>
<p id=”mensaje”></p>
<p id=”boton” onClick=”jugarOtraVez()”></p>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
<script src=”js/tablero.js”></script>
<script src=”js/juego.js”></script>
<script src=”js/cronometro.js”></script>
<script src=”js/ejecutar.js”></script>
</body>
</html>

El codigo de ejecutar.js queda asi:

var Total_segs;
var Total_mins;
var cronometro;
//tablero
var tablero=new Array(3);
var casillapte=9;
var color;
//jugador
var jugador=1;
var gana=0;
var fin=false;
function jugarOtraVez(){
    jugador=1;
    gana=0;
    fin=null;
    casillapte=9;
    Mensaje.style.display=”none”;
    textoBoton.style.display=”none”;

    ejecutar();
}
function SeleccionaCelda(x,y,jugador){
   
    tablero[x][y]=jugador; //podra ser 2 por otro jugador
    //pintamos la celda
    PintarCelda(x,y,”blue”,jugador);   
    casillapte–;
    comprobar(x,y,jugador);
}
function tiraJugador2(){
    jugador=2;
    x2=Math.round(Math.random()*2);
    y2=Math.round(Math.random()*2);
    while((tablero[x2][y2]==1) ||( tablero[x2][y2]==2)){
        x2=Math.round(Math.random()*2);
    y2=Math.round(Math.random()*2);
    }
    if(fin){
        mensajeFin();
    }else{
        SeleccionaCelda(x2,y2,jugador);
    }
    jugador=1;
}
function RevisarCelda(x,y){
    if(tablero[x][y]==1 || tablero[x][y]==2){
        //alert(“Casilla ocupada”);
        mensajeCasilla();
    } else if(fin){
        //alert(“Se acabo la partida”);
        mensajeFin();
    } else {
        jugador=1;
    SeleccionaCelda(x,y,jugador);
    if(casillapte>0){
        jugador=2;
        tiraJugador2();
    }
    }
}
function ejecutar(){
    //array tablero
    for(i=0;i<3;i++){
        tablero[i]=new Array(3);
    }
    LimpiaReloj();
    IniciaReloj();
color=”red”;   
    IniciarTablero(color);
 
}
ejecutar();

El codigo de tablero.js queda asi:

function IniciarTablero(color){
    for(i=0;i<3;i++){
        for(j=0;j<3;j++){
            tablero [i][j]=0;
            celda=document.getElementById(“c”+i+j);
            celda.style.background=color;
            celda.innerHTML=””;
        }
    }
}
function PintarCelda(x,y,color,jugador){
    //selecciona celda
    celda=document.getElementById(“c”+x+y);
    //ponemos color
    celda.style.background=color;
    if(jugador==1){
        celda.innerHTML=”<img src=’img/cruz.png’></img>”;
    }else {
        celda.innerHTML=”<img src=’img/circulo.png’></img>”;
    }
}

El codigo de juego.js queda asi:

function comprobar(x,y,jugador){
    if(tablero[0][0]==jugador && tablero[0][1]==jugador && tablero[0][2]==jugador){
        gana=jugador;
    }
        if(tablero[1][0]==jugador && tablero[1][1]==jugador && tablero[1][2]==jugador){
        gana=jugador;
    }
        if(tablero[2][0]==jugador && tablero[2][1]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][0]==jugador && tablero[1][0]==jugador && tablero[2][0]==jugador){
        gana=jugador;
    }
        if(tablero[0][1]==jugador && tablero[1][1]==jugador && tablero[2][1]==jugador){
        gana=jugador;
    }
        if(tablero[0][2]==jugador && tablero[1][2]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][1]==jugador && tablero[1][1]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][2]==jugador && tablero[1][1]==jugador && tablero[2][0]==jugador){
        gana=jugador;
    }
    if(gana==1){
        //alert(“Gana el jugador 1”);
        mensaje(gana);
        fin=true;
    }else if(gana==2){
        //alert(“Gana el jugador 2”);
        mensaje(gana);
        fin=true;
    }else if(casillapte==0){
        fin=true;
        gana=0;
        mensaje(gana);
    }
}
function mensaje(gana){
    if(gana!=0){
        textoMensaje=”Gana el jugador “+gana;
        Mensaje=document.getElementById(“mensaje”);
        Mensaje.style.display=”block”;
        Mensaje.innerHTML=textoMensaje;
        texto=”Jugar Otra Vez”;
        textoBoton=document.getElementById(“boton”);
        textoBoton.style.display=”block”;
        textoBoton.innerHTML=texto;
       
    }else{
                textoMensaje=”Empate”;
        Mensaje=document.getElementById(“mensaje”);
        Mensaje.style.display=”block”;
        Mensaje.innerHTML=textoMensaje;
        texto=”Jugar Otra Vez”;
        textoBoton=document.getElementById(“boton”);
        textoBoton.style.display=”block”;
        textoBoton.innerHTML=texto;
    }
}
function mensajeFin(){
            textoMensaje=”Se acabo la partida”;
        Mensaje=document.getElementById(“mensaje”);
        Mensaje.style.display=”block”;
        Mensaje.innerHTML=textoMensaje;
        Pausa();
}
function mensajeCasilla(){
            textoMensaje=”Casilla ocupada”;
        Mensaje=document.getElementById(“mensaje”);
        Mensaje.style.display=”block”;
        Mensaje.innerHTML=textoMensaje;
        Pausa();
}
function Pausa(){
    segundos=0;
    tiempo=setInterval(function(){
        while(segundos<2){
            segundos++;
        }
        if(segundos==2){
            Mensaje.style.display=”none”;
        }
    },2000);
}

El codigo de cronometro.js y estilo.css queda igual que estaba en video anterior.
Con este video acabo el tutorial para crear un juego sencillo de tablero como el Tres en Raya.
Si teneis alguna duda podeis contactar conmigo para aclararla.
Espero os sea util y no olvideis practicar. Gracias.

Please follow and like us:
Publicado el Deja un comentario

02. Juego tres en raya, cronometro

En este video se explica como poner en marcha el cronometro del juego.

El codigo del archivo cronometro.js es:


function LimpiaReloj(){
    //reset cronometro
    clearInterval(cronometro);
}
function IniciaReloj(){
    //iniciar reloj
    s=document.getElementById(“segundos”);
    m=document.getElementById(“minutos”);
    segundos=0;
    cronometro=setInterval(function(){
        segundos++;//incremento segundos
        segs=segundos;
        mins=0;
        while(segs>=60){
            mins++;
            segs-=60;
        }
        //imprimimos min y segs
        if(mins<10)m.innerHTML=”0″+mins;
        else m.innerHTML=mins;
        if(segs<10)s.innerHTML=”0″+segs;
        else s.innerHTML=segs;
        Total_segs=segs;
        Total_mins=mins;
    },1000);
    }

El codigo del archivo ejecutar.js es:

var Total_segs;
var Total_mins;
var cronometro;
function ejecutar(){
    LimpiaReloj();
    IniciaReloj();
}
ejecutar();

El codigo del archivo index.html es:

<!doctype html>
<html lang=”ES”>
<head>
<link rel=”stylesheet” type=”text/css” href=”css/estilos.css”>
<title>
Tres en Raya
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Juego Tres en Raya</h1>
</hgroup>
<div id=”tiempo”>
<p>Contador:</p>
<p id=”contador”>
<span id=”minutos”>00</span>:
<span id=”segundos”>00</span></p>
</div>
<div id=”tablero”>
<div class=”row”>
<div id=”c00″ onClick=”RevisarCelda(0,0)” class=”celda amarillo”></div>
<div id=”c01″ onClick=”RevisarCelda(0,1)” class=”celda rojo”></div>
<div id=”c02″ onClick=”RevisarCelda(0,2)” class=”celda amarillo”></div>
</div><!–row–>
<div class=”row”>
<div id=”c10″ onClick=”RevisarCelda(1,0)” class=”celda amarillo”></div>
<div id=”c11″ onClick=”RevisarCelda(1,1)” class=”celda rojo”></div>
<div id=”c12″ onClick=”RevisarCelda(1,2)” class=”celda amarillo”></div>
</div><!–row–>
<div class=”row”>
<div id=”c20″ onClick=”RevisarCelda(2,0)” class=”celda amarillo”></div>
<div id=”c21″ onClick=”RevisarCelda(2,1)” class=”celda rojo”></div>
<div id=”c22″ onClick=”RevisarCelda(2,2)” class=”celda amarillo”></div>
</div><!–row–>
</div><!–tablero–>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
<script src=”js/cronometro.js”></script>
<script src=”js/ejecutar.js”></script>
</body>
</html>

Espero os sea util, gracias.

Please follow and like us: