Pencil code 100 pequeños proyectos

Versión original “A Programming Primer” por David Bau -Traducido al español por codemas.org
Pencil Code
100 pequeños proyectos
Para realizar los proyectos, visita http://pencilcode.net/
Puedes ver y descargar la versión original en Inglés de David Bau en PDF aquí:
Pencil_Code_A_Programming_Primer

Sin umbrales y sin límites
El objetivo de este libro es enseñar a escribir programas como lo haría con un lápiz:
como una salida para la creatividad y como herramienta para la comprensión.
Estas páginas siguen una tradition de cincuenta años de utilizar la programación como
una herramienta educativa liberadora, sin umbrales para los principiantes, y no hay
límites para los expertos.
LOGO de Seymour Papert es la inspiración. Comenzar con unas pocas líneas de código,
y el progreso de los programas de escritura para explorar el arte, las matemáticas, el
lenguaje, algoritmos, simulación, y el pensamiento.
El lenguaje es CoffeeScript. A pesar de que CoffeeScript es un lenguaje de
programación utilizado por los profesionales, fue elegido aquí porque tiene una
elegancia y simplicidad muy adecuada para principiantes. Mientras que los primeros
ejemplos hacen que el lenguaje parezca trivial, CoffeeScript tiene una buena notación
para todas las ideas importantes: expresiones algebraicas, listas, bucles, funciones,
objetos, y concurrencia. A medida que aprenda el lenguaje, recuerde que el objetivo
debe ser no el dominio de la sintaxis, si no el dominio de los conceptos subyacentes.
Edite y ejecute sus programas en pencilcode.net. El sitio es un experimento en el
aprendizaje comunitario: todo lo publicado es público. Escribir programas que puedan
ser interesante para otros. Las cuentas son gratuitas.
A medida que experimente mediante la construcción de sus propias ideas, notara que
al principio sus programas se comportaran de una manera que no se pretendía. Los
detalles son importantes, y la persistencia da sus frutos. Si usted es paciente en el ajuste
y el perfeccionamiento de su trabajo, usted será recompensado.
Lea, piense, juegue, y creer algo hermoso.
David Bau, 2013

Índice
1. Líneas
2. Puntos
3. bucles
4. anidamiento
5. Funciones
6. Parámetros
7. Tiempo
8. salida
9. entrada
10. números
11. Cálculo
12. Objetos
13. Las matrices
14. La recursividad
15. La aleatoriedad
16. Conjuntos
17. Texto
18. movimiento
19. concurrencia
20. Estilos
21. Selectores
22. Eventos
23. El rebanar
24. Clasificación
25. Buscar
26. Inteligencia

100 pequeños proyectos
En las siguientes páginas, los conceptos básicos de la programación informática
moderna se muestran en una serie de breves ejemplos.
Ninguno de los ejemplos viene con explicaciones. Solo inténtalos.
Una vez que funciona un programa, parar y pensar acerca de cómo funciona.
Hacer su propia versión personalizada.
¿Puedes dibujar una violeta con un tallo? ¿Se puede hacer un copo de nieve
que realmente se ve como un copo de nieve? Y ¿se puede hacer estas cosas de
una manera elegante?
Para una introducción tutorial para CoffeeScript, vaya al apéndice que comienza
siguiendo el ejemplo establecido 26. También asegúrese de probar el comando
"help" en el panel de prueba.
Suficientes consejos.
Vamos a jugar.

1. Líneas

2. Puntos

3. Bucles

4. Anidamientos

5. Funciones

6. Parámetros

7. Tiempo

8. Salida

9. Entrada

10.Números

11.Cálculo

12.Objetos

13. Matrices

14.Recursividad

15.Aleatoriedad

16.Conjuntos

17.Texto

18.Movimiento

19.Concurrencia

20.Estilos

21.Selectores

22.Eventos

23.Rebanar

24.Clasificación

25.Buscar

26.Inteligencia

Proyecto

Ahorcado
Un proyecto en detalle
En esta sección, usamos Pencil Code para hacer un juego de ahorcado desde
cero.
Dura un par de horas aprender la programación suficiente para hacer el juego
ahorcado.
Aprenderemos:
 Memoria y nombramiento
 Aritmética computacional
 Funciones utilizables
 Gráficos simples
 Cómo hacer un programa
 Entradas y salidas
 Bucles y elecciones
 Retrasos y sincronización
 Conectarse a internet
Al final tendremos un juego que podremos jugar.

1. Ir a Pencil Code
Ve a pencilcode.net
Clic en “lets play”
La pantalla debería verse así:
El lado izquierdo de la pantalla es donde se escribe el programa, y el derecho es
donde se ejecutan los programas. El lado bajo derecho es un panel de ensayo
en donde escribir código y ejecutarlo de forma inmediata.
Mientras se exploran los proyectos en este libro, también se puede utilizar el
panel de ensayo en la esquina de abajo derecha para pedir ayuda con el
funcionamiento de los comandos.

2. Mantener un secreto
Vamos a empezar por trabajar en el panel de ensayo. CoffeeScript puede
recordar cosas. Digamos que una palabra secreta.
Escribe las palabras azules abajo en el panel de ensayo.
Ves lo que pasa cuando presionas Enter.
Revela tu secreto tecleando “write secret”
¡Revisa el panel superior derecho!
Ahora intenta con algo que CoffeScript no sabe. Intenta escribir “number”.
No te preocupes. No pasa nada. Solo tienes que enseñarle a CoffeScript que
es “number” e intentarlo de nuevo

3. Los ordenadores son buenas calculadoras
Un ordenador es mejor que cualquier calculadora en las matemáticas. Vamos a
probarlo.
En CoffeScript, más y menos utilizan los símbolos habituales + y -. La
multiplicación y división se realizan mediante los símbolos * y /
Valores nombrados pueden usarse en formulas
El e+24 al final es la forma en que se escriben los números largos en CoffeScript.
Significa 1.8816763717891548 × 1024. CoffeScript calcula números con
precisión de 15 dígitos.
Hay varias maneras de cambiar un número. Por ejemplo, += cambia una variable
añadiéndolo a
Algunos símbolos importantes
Código significado
+ Suma
- Resta
* Multiplicación
/ División
X = 95 Guardar 95 como x
X is 24 ¿Es X igual a 24?
X < 24 ¿x es menor que 24?
X > 24 ¿x es más que 24?
“a” in Word ¿la palabra contiene “a”?
String
(num)
Convierte num en un hilo de dígitos
n+= 1 Cambia n añadiendo uno

Estas operaciones pueden ser combinadas.
CoffeScript obedece el mismo orden de operaciones en Algebra.
¿Cuál sería la respuesta para (2 * 3 + 3 * 5) / 7 - 1?
¿Qué haría cuando probamos '7' in String(99 * 123)?
Prueba tus propias formulas. No te preocupes si obtienes errores.
4. Hilos y números
¿Qué crees que pasa cuando probamos sumas con palabras?
Cuando ponemos algo entre comillas, CoffeeScript lo trata como una cadena de
cartas, incluso si se trata de todos los dígitos. Esa es la razón por la que '34' + 5
es 345. valores citados como estos son llamados "cadenas ".
La función Number () se puede utilizar para convertir una cadena en un número,
de modo que podemos hacer la aritmética ordinaria con él.
La función String () es opuesta, y convierte números en cadenas
Si tratamos de convertir una cadena a un numero de una manera que no tenga
sentido, obtenemos NaN, que significa "Not a Number" (no es número).

5. Creando Gráficos
En Pencil Code, podemos crear gráficos usando la tortuga. Existen cinco
funciones básicas de la tortuga.
Código significado
Pen red Elige el lápiz de color rojo
fd 100 Moverse hacia adelante 100
pixeles
rt 90 Girar 90 grados hacia la derecha
lt 120 Girar 120 grados hacia la
izquierda
Bk 50 Ir hacia atrás 50 pixeles
En el panel de prueba, escribe dos comandos para dibujar una línea:
La referencia al final de este libro enlista muchos otros colores que pueden
utilizarse. Para parar de dibujar, dibuja “pen null” para seleccionar no pen (no
lápiz)
Intenta voltear a la tortuga y dibujar otra línea. Observe que rt gira a la tortuga
en su lugar y necesitamos mover a la tortuga con fd para dibujar una esquina.
Lea sobre la función rt usando help:
Si le damos un segundo número a rt, la tortuga se moverá mientras gira
formando un arco. Intente hacer un círculo:
Recuerde poner coma entre los dos números.

6. Haciendo nuestro primer programa
Estamos listos para hacer el juego de ahorcado. En el editor del lado izquierdo
de Pencil Code:
 Seleccione y borre el programa de ejemplo
 Ahora, teclee el siguiente programa.
¡Presione el botón triangular de play!
Si no funciona, revise el programa cuidadosamente e inténtelo de nuevo. Cosas
que revisar:
 Deletrear cada función correctamente y en minúscula.
 No ponga sangría en ninguna de las funciones del programa
 Recuerde poner espacio después del nombre de las funciones.
Cada vez que se ejecuta el programa, se aclara la pantalla e inicia de nuevo.
Ahora, renombre el programa como “ahorcado” (hangman) editando el nombre
al lado del Lápiz y guarde con el botón de la derecha en la parte de arriba
Un sitio web será creado con el nombre de tu cuenta. Si elijo el nombre "novato"
para la cuenta, un sitio web se creara en "novato.pencilcode.net".
Una vez que haya guardado el programa con el nombre de "ahorcado", estará
disponible en dos direcciones diferentes en pencilcode:
 http://tunombre.pencilcode.net/edit/hangman - aquí es donde cualquier
persona
puede ver y editar el programa , pero necesitas contraseña para
guardar algún cambio.
 http://yourname.pencilcode.net/home/hangman - aquí es donde
puedes compartir y ejecutar el programa sin mostrar el código .

7. Apresúrate y espera
Escribe un mensaje de bienvenida después di dibujar la forma del ahorcado:
Notaras que la tortuga de Pencil Code es tan lenta como ¡una tortuga! A menos
que la aceleremos con la función speed, la tortuga toma su propio tiempo lento
mucho después de que le hemos pedido que se mueva, y aparece el mensaje
de bienvenida antes de la tortuga haya terminado.
Podemos hacer dos cosas para ayudar con la lenta tortuga:
 Cambiar el número de movimientos que hace por segundo usando
"speed”.
 Pedir al programa que esperare a la tortuga, usando "await donde defer
()".
Ahora, la tortuga se mueve más rápido, y el programa espera hasta que la tortuga
termina antes de escribir el mensaje de bienvenida.
Un par de cosas que debe saber:
 No utilice un espacio entre las diferir y el paréntesis " Defer ( )".
 Podemos hacer que la tortuga se mueve al instante mediante el uso de "
Speed Infinity”.
Incluso si ha programado antes, await/ defer puede ser nuevo para usted.
Estas palabras clave crean continuaciones, y son parte de Iced CoffeeScript .
Para explorar cómo funcionan en más detalle, revise la página en línea Iced
CoffeeScript
de Max Krohn

8. Usando “for” para repetir
Podemos repetir pasos en un programa con el comando "for".
Trate de añadir tres líneas al final de nuestro programa para que se parezca a
esto:
Debería ver esto:
El programa está diciendo: por cada letra en el secreto, escribir carta. Entonces
el ordenador repite "Carta de escritura " nueve veces, una vez para cada letra.
Si esto no funciona, compruebe el programa y asegurarse de que la línea
después de for tiene sangría; así es como CoffeeScript sabe qué línea se repite.
Una vez que tienes esto, mantener la palabra secreta cambiando el programa
para escribir guiones en lugar de letras:
Note que “append” en lugar de “write” pone texto en la misma línea en lugar
de iniciar una nueva línea cada vez:

9. Usando “if” para elegir
En nuestro juego del ahorcado, deberíamos mostrar dónde encontrar todas las
cartas que son adivinadas. Para decidir ya sea imprimir una línea en blanco o
una carta, tendremos que utilizar " si " y "else”.
Añadir cuatro nuevas líneas de nuestro programa:
No olvide alinear todo, y recuerde guardarlo.
¿Qué pasa cuando lo ejecutas? Revela todas las cartas en “show”: todas las
vocales.
Nuestra pantalla luce así:
Así es como funciona.
La línea de "if letter in show" hace una elección.
 Si la Letra esta entre nuestra muestra, se añade la letra rtogether con un
espacio después.
 De lo contrario ("else") se añade un poco de subrayado con un espacio.
Dado que todo el asunto se pone con sangría debajo de "for letter in secret," esta
elección
se repite para cada letra.
Comprobar la ortografía, el espaciado y la puntuacion si se producen errores.
Tómese su tiempo para conseguir que funcione.

10. Salida con “read”
Nuestro juego no es bueno si los jugadores no pueden adivinar. Para permitir
que el jugador adivine, escriba:
Funciona así:
"read" se abre un cuadro de entrada y recoge la entrada.
Los comandos "await " y "defer" trabajan juntos para hacer que el programa
espere hasta que se realiza la función de lectura.
"guess" es el nombre de la entrada recogida por "read”.
Trate de añadir estas líneas al programa:
Añadir “write guess a letter” hará saber a los jugadores cuando entrar una
adivinanza.
La línea “show w += guess" agrega la adivinanza al hilo de letras mostradas.
Ejecutemos.
Cuando ejecutemos el programa, nos mostrara donde aparecen nuestras letras
adivinadas.

11.Usando “while” para repetir
Debemos dejar a los jugadores tomar más de un turno.
“while turns > 0” repite todo en sangría debajo mientras el jugador aún tiene giros
a la izquierda.
Agrega sangría a todo lo que este debajo del comando “while” para que funcione.
El editor pondrá sangría a todo un bloque de código si lo seleccionas todo y
presionas “tab” en el teclado. “shift-tab”.
"Vueltas - = 1" significa restar uno de "turns". Se hará cuenta regresiva cada vez
que el jugador adivine. Cuando "turns" por fin este a cero, el comando "while"
dejara de repetirse.
Pruebe a ejecutar el programa. ¿Funciona?
En cualquier momento en que queramos ver el valor de una variable, podemos
escribir su nombre en el panel de ensayo.
¿Cómo le dará al jugador más adivinanzas?

12. Mejorando nuestro juego
Ya podemos jugar nuestro juego. Ahora debemos mejorarlo para hacerlo
divertido.
 Los jugadores deben ganar inmediatamente después de que no quedan
letras por adivinar.
 Los jugadores solo deben perder un turno si se equivocan
 Cuando los jugadores pierden, el juego debe decir el secreto.
Prueba esto:
Cada vez que se imprime la palabra, el número de "blanks" (espacios en blanco)
comienza en cero y
cuenta el número de espacios en blanco. Si termina en cero, significa que no hay
espacios en blanco. Por lo que el jugador ha adivinado todas las cartas y ha
¡ganado! En ese caso, el comando "breaks" rompe fuera de la sección temprana
“while", a pesar de que todavía hay giros a la izquierda.

13. Hacerlo que parezca un ahorcado
Sera más divertido si nuestro juego realmente parece al ahorcado.
Lo único que debemos hacer es dibujar partes del pobre ahorcado cuando hay
respuestas equivocadas. Prueba agregar algo así a la parte errónea:
El punto y coma (;) permite poner más de un paso en la misma línea. Dese
cuenta que al poner el "if" en la misma línea que los comandos a ejecutar,
debemos utilizar la palabra “then" entre la prueba y los comandos.
Trate de hacer variaciones en los dibujos del ahorcado para cada paso.
Siempre que queramos hacer una pausa en el programa para que la tortuga
termine el dibujo, podemos utilizar "await donde defer"

14. Eligiendo un secreto al azar
El único problema con el juego es que siempre juega con la misma palabra
secreta. Así que deberíamos usar la función “random” para elegir una palabra
random (al azar).
Cambia la línea que establece el secreto para que luzca así:
Los paréntesis cuadrados y comandos hacen una lista, y la función random elige
una cosa al azar de la lista.
Por supuesto, podemos hacer la lista tan larga como queramos, aquí hay una
lista larga:
Los paréntesis no tienen por qué estar en la misma línea, ¡pero si necesitamos
que estén los dos! Cuando enlistamos ítems en sus propias líneas, los comandos
son opcionales.

15. Descargando una lista de Internet
Hay una gran lista de animales en la dirección de internet
http://pencilcode.net/data/animals.
Podemos descargar estos datos usando una función JQuery “$.get”.
El código se ve así:
Significa que:
Pausa el programa hasta que $.get haya terminado.
Abre la dirección http://pencilcode.net/data/animals
Dile a $.get que resuma el programa después de poner la respuesta en “animals”.
El hilo especial 'n es el carácter nueva línea entre líneas en un archivo.
Note que "" es un slash hacía atrás, no es el slash ordinario.
Separe los hilos de animales en una formación, con una sola entrada por línea.
Elija un ítem de la formación al azar.
Llame a esto palabra random “secret”.

16. El programa entero de ahorcado
Aquí está todo el programa de inicio a fin.

17. Haciéndolo suyo
La mejor parte de la programación es la adición de su propio estilo personal.
Trate de hacer el juego para que se reproduzca de nuevo automáticamente
después de que este hecho. ¿Se puede hacer el juego más difícil o más fácil?
¿Se puede dar al jugador un premio por ganar?
Asegúrese de explorar las funciones en la ayuda en línea, y experimentar con
los ejemplos en el resto de este libro.
Por ejemplo, se puede añadir efectos de sonido y música. Intente explorar la
función "juego" y buscar en el Internet para aprender acerca de ABC notación,
acordes, formas de onda, y envolventes ADSR.
A veces las ideas más simples pueden hacer una gran diferencia. La función "ct
( )" borra el texto en la pantalla y el " cg ( ) " función borra los gráficos.
Tal vez esto podría ser utilizado para hacer un juego de dos jugadores donde
una persona
se le ocurre la palabra secreta , o en el que dos jugadores compiten para adivinar
la palabra en primer lugar.
Pronto se dará cuenta de que la verdadera diversión de la programación es en
poner su imaginación en el código.

Vocabulario
Movimiento
fd 50 avanzar 50 pixeles
bk 10 atrás 10 pixeles
rt 90 girar derecha 90 grados
lt 120 girar izquierda 120 grados
home ir a la página central
slide x, y deslizar derecha “x” y avanzar “y”
moveto x, y ir a x, y en relación con el hogar
turnto 45 establecer dirección a 45 (NE)
turn obj apuntar hacia obj
velocidad 30 hacer 30 movimientos por segundo
Dibujo
pen blue dibujar en azul
pen red, 9 9 pixel de ancho lápiz rojo
pen null no usar color
pen off uso pausado del lápiz
pen on usa lápiz de nuevo
mark “x” marcar con una X
dot Green dibujar un punto verde
dot gold, 30 punto dorado de 30 pixeles
pen “path” trazar un patrón invisible
fill cyan llenar camino trazado en cyan
Apariencia
ht() esconder tortuga
st() mostrar tortuga
scale 8 hacer todo 8 veces más grande
wear yellow usar caparazón amarillo

fadeout desvanecer y esconder tortuga
remove remover totalmente la tortuga
Propiedades
Turtle nombre de la tortuga principal
getxy() (x, y) posición relativa a casa
direction() dirección de la tortuga
hidden () si la tortuga está escondida
touches (obj) si la tortuga toca obj
inside (window) si está cubierto por ventana
lastamousemove donde el mouse tuvo movimiento la última vez
Salidas
Escribir “hi” añade HTML a la página
= write “fast” recordar escrito HTML
p.html “quick” cambiar texto antiguo
button “go”, fd 10 añadir botón con una acción
read (n) write n*n añadir un texto de salida con una acción
t = table 3,5 agrega un <tabla> de 3x5
t.cell (o, o) selecciona la primera celda de la tabla y establece texto
text “aloha
Sets
g = hatch 20
g = $ (“img”) selecciona todas las <img> en conjunto
g. plan (j) -> direcciona la tortuga jth para ir hacia delante 10j pixeles
@fd j * 10

Otros objetos
$ (window) ventana visible
$ (“p”). eq (0) el primer elemento <p>
$ (“·zed”) el elemento con id=”zed”
Otras funciones
See obj inspeccionar el valor del obj
Speed 8 establecer velocidad default
Rt 90, 50 90 grados de arco recto de radio 50
Tick 5, fd 10 ir 5 veces por segundo
Click fd 10 ir cuando clikea
Random [3, 5, 7] regresar 3, 5 o 7
Random 100 aleatorio [o..99]
Jugar “ceg” play notas musicales
Colores

Pencil code 100 pequeños proyectos

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Similar a Pencil code 100 pequeños proyectos

Similar a Pencil code 100 pequeños proyectos (20)

Más de Codemás

Más de Codemás (20)

Último

Último (20)

Pencil code 100 pequeños proyectos