Publicado el Deja un comentario

10 Pygame. Textos y tiempo

Vemos como mostrar textos por pantalla y mostrar el tiempo transcurrido.

# -*- coding: utf-8 -*-“””Created on Tue Aug 14 15:44:41 2018
@author: Jose“””
#importamos modulosimport pygame, sysfrom pygame.locals import *from random import randint
#init antes de usar pygamepygame.init()#declaramos ventana con alto anchoventana=pygame.display.set_mode((500,400))#titulopygame.display.set_caption(“Time”)#variablescolorFondo=(25,150,70)colorRectangulo1=(255,255,255)colorRectangulo2=(255,55,0)colorTexto=(125,10,200)velocidad=10
posX,posY=randint(1,400),randint(1,300)#rectangulosrectangulo1=pygame.Rect(5,10,70,40)rectangulo2=pygame.Rect(posX,posY,70,40)#textosfuente=pygame.font.SysFont(‘Arial’,40)
#bucle ejecucion ventanawhile True:    ventana.fill(colorFondo)     #tiempo    tiempo=pygame.time.get_ticks()/1000        #mostramos texto     texto=fuente.render(“Tiempo: “+str(tiempo),0,colorTexto)    ventana.blit(texto,(140,140))    #dibujamos rectangulos          pygame.draw.rect(ventana,colorRectangulo1,rectangulo1)    pygame.draw.rect(ventana,colorRectangulo2,rectangulo2)    #codigo seguir puntero raton    posX,posY=pygame.mouse.get_pos()    #lo centramos a rectangulo    posX=posX-35    posY=posY-20    #cambiamos posicion rectangulo 1    rectangulo1.left=posX    rectangulo1.top=posY    #colision    if rectangulo1.colliderect(rectangulo2):        print(“colisionando”)        posX,posY=randint(1,400),randint(1,300)
        #cambiamos las coordenadas si se sale de limites        if posX<0:            posX=0        elif posX>430:            posX=430        elif posY<0:            posY=0        elif posY>360:            posY=360        rectangulo2.left=posX-35        rectangulo2.top=posY-20                #control de eventos    for evento in pygame.event.get():        if evento.type==QUIT:            pygame.quit()            sys.exit()        #actualizamos segun pulse tecla flechas        elif evento.type==pygame.KEYDOWN:             if evento.key==K_LEFT:                posX-=velocidad                if posX<0:                    posX=0            elif evento.key==K_RIGHT:                posX+=velocidad                if posX>(500-70):                    posX=500-70            elif evento.key==K_UP:                posY-=velocidad                if posY<0:                    posY=0            elif evento.key==K_DOWN:                posY+=velocidad                if posY>360:                    posY=360    #actualiza ventana    pygame.display.update()

Please follow and like us:
Publicado el Deja un comentario

05 JavaScript. Contador de tiempo

Creamos un contador de tiempo para nuestra web, para ello usamos HTML, CSS y JavaScript.

El codigo es:

HTML

<!DOCTYPE html>
<html>
<head>
<link href=”css/estilo.css” rel=”stylesheet” type=”text/css”>
<title>
Contador
</title></head>
<body>
<section>
<div id=”contenido”>
<article>
<div id=”tiempo”>
<h5 id=”titulo”>
<span>Horas</span>
<span>Minutos</span>
<span>Segundos</span>
</h5>
<h2 id=”contador”>
<span id=”horas”>00</span>
<span id=”minutos”>00</span>
<span id=”segundos”>00</span>
</h2>
</div>
</article>
</div></section>
<script src=”js/tiempo.js”></script>
</body></html>

CSS

 body{
margin:0 auto;
max-width:98%;
font-family: Helvetica, Arial;
font-size:14px;

}
#titulo{
font-size:1.3em;
text-align:center;
margin-top:5em;
padding:1.3em;
color:#434343;
}
#contador{
font-size:2.2em;
text-align:center;
color:#434343;
}

JavaScript

 var horas,minutos,segundos;
horas=0;
minutos=0;
segundos=0;
hor=document.getElementById(“horas”);
min=document.getElementById(“minutos”);
seg=document.getElementById(“segundos”);
function tiempo(){
var contador=0;
window.setInterval(function(){
if(contador<10){
seg.innerHTML=”0″+contador;
}else{
seg.innerHTML= contador;
}
if(contador>59){
segundos=0;
contador=0;
minutos=minutos+1;
}
if(minutos>59){
minutos=0;
horas=horas+1;
}
if(horas>23){
horas=0;

}
if(minutos<10){
min.innerHTML=”0″+minutos;
}else{
min.innerHTML=minutos;
}
if(horas<10){
hor.innerHTML=”0″+horas;
}else{
hor.innerHTML=horas;
}
contador++;
},1000);
}
tiempo();

Please follow and like us:
Publicado el Deja un comentario

30 Scratch. Choque de vehiculos (fisica)

En este video planteo el tipico problema de fisica de choque de vehiculos aplicandolo a Scratch, dadas las velocidades y la distancia total, la aplicacion calcula el punto del choque y el tiempo que tardan en chocar.
Es una forma sencilla de mostrar a los niños el ejemplo y que vean el resultado real, los vehiculos se mueven a la distancia exacta del choque.
Los niños pueden practicar cambiando los datos y viendo los resultados simulados.
Podemos realizar infinidad de aplicaciones Scratch aplicandolas al aula para facilitar la comprension de las materias, realizando simulaciones de los problemas.

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: