Extendiendo la funcionalidad de los Strings

Clase 31 de 50 • Curso de Programación Básica 2014

Contenido del curso

Bienvenido

Introducción básica a HTML y Javascript para programar

Variables, Matrices y Objetos en Javascript

Ciclos y Dibujos con Canvas

Programando juegos con canvas

Uso de Objetos, Prototype y juego de ahorcado en Canvas

Cómo crear un algoritmo para el juego del ahorcado

Pregúntale a Freddy lo que quieras ... acerca de programación ;)

34
Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 1
32:25 min
35
Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 2
56:14 min

Conceptos básicos de programación: Frontend-Backend

Crea tu primer servidor web con Node.JS

Aprende a volar un dron con Javascript

Complementos del curso

50
Publica tu sitio web usando GitHub Pages
01:41 min

Tomar examen

Comentarios

Cristian Nuñez

student•

var array = ["Hola", "mama", "ya", "se", "programar", ":)"];

function aleatorio () {

var maximo = 5;
var minimo = 0;
this.text = Math.floor(Math.random()*(maximo - minimo) );
return text;
}

var eleccion = array[aleatorio()]

function inicio() {

document.write(" "+ array[aleatorio()]);

}

Eduardo Lemus Zavala

student•

String es un objeto que permite manejar las cadenas de texto.
.toUpperCase(); --> función del objeto String que convierte a mayusculas las letras de la cadena de texto.
.toLowerCase(); --> función del objeto String que convierte a minusculas las letras de la cadena de Texto.

Eduardo Lemus Zavala

student•

Cada tecla tiene un codigo diferente por lo tanto una letra minuscula y una letra mayuscula son diferentes:
"A" es diferente a "a"

Eduardo Lemus Zavala

student•

.lenght es una variable del metodo String que nos permite obtener la cantidad de caracteres de una cadena de texto.

int longitud = palabra.lenght;

Enrique Tecayehuatl

student•

Siempre me caga que tenga que actualizar la página al abandonar por cierto tiempo el sitio

Jhon Carlos Colorado Angulo

student•

Ok muy bien.

Santiago Alonso

student•

hola

Camilo Acevedo Escalante

student•

Hola

Estaba pensando en una función que a traves de prompt se le pidiera a un jugador la palabra secreta para que no quede una palabra definida, aunque no recuerdo la propiedad para que en un prompt se ingrese palabras como en un campo password, seria interesante, si ya se hizo no he dicho nada, apenas voy por este video jeje

Un abrazo!

Karenn Yeraldin Hernández Duarte

student•

Al usuario se le puede pedir la palabra con una caja de texto. En el html se le pondria <input type="password" id="loquesea"> y la guardas en el array.

Josué Manuel Echandia Asto

student•

Hola aqui les dejo mi codigo: Me esforzé mucho en comprimirlo
HTML

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>Juego</title>  
    <script type="text/javascript" src="juegos.js"></script>  
    <style type="text/css">  
body  
{  
    background: black;  
    color: white;  
    text-align: center;  
}  
</style>  
</head>  
<body>  
    <canvas width="500" height="500" id="campo"></canvas>  
    <p>Mueve a Diana contra Liz usando las flechas del teclado realizado el dia 22/02/15</p>  
    <script type="text/javascript">inicio();  
    </script>  
</body>  
</html>

JAVASCRIPT

var tablero,num=0;  
var UP=38,DOWN=40,LEFT=37,RIGHT=39;  
var Coords =[[200,0],[200,50],[200,100],[200,150],[200,200],[0,200],[50,200],[100,200],[150,350],[200,350],[250,350],[300,350],[350,350],[400,350],[450,350]]  
var imagen={velocidad:50,x:100,y:100};  
var URL=["fondo.png","diana-frente.png","diana-atras.png","diana-izq.png","diana-der.png","liz.png"]  
function inicio()  
{  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
    for(var i=0;i<=5;i++)  
        {var rec = new Image()  
         rec.src=URL[i]  
         if(i==0){imagen.fondo=rec}  
         if(i==1){imagen.frente=rec}  
         if(i==2){imagen.atras=rec}  
         if(i==3){imagen.izq=rec}  
         if(i==4){imagen.der=rec}  
         if(i==5){imagen.liz=rec}  
         rec.onload=add   }  
    document.addEventListener("keydown",teclas)  
}  
function add(){num++; if(num==5) {dibujar()}}  
function teclas(evento)  
{   y=imagen.y;x=imagen.x  
    var tecla=evento.keyCode,orientacion;  
    if(tecla==UP){y-=imagen.velocidad;orientacion=imagen.atras}   
    if(tecla==DOWN){y+=imagen.velocidad;orientacion=imagen.frente}   
    if(tecla==LEFT){x-=imagen.velocidad;orientacion=imagen.izq}   
    if(tecla==RIGHT){x+=imagen.velocidad;orientacion=imagen.der}  
    if(x<0){x=0}  
    if(y<0){y=0}  
    if(x>450){x=450}  
    if(y>450){y=450}  
    for(var i=0;i<15;i++)  
      {if(x==Coords[i][0]&&y==Coords[i][1])  
           {    if(tecla==UP||tecla==DOWN){y=operacion(tecla,y)}  
                if(tecla==LEFT||tecla==RIGHT){x=operacion(tecla,x)}}}  
    imagen.y=y;imagen.x=x  
    dibujar(orientacion,x,y)  
}     
function operacion(tecla,valor)  
{   var resultado  
    if (tecla==UP) {resultado=valor+50};  
    if (tecla==DOWN) {resultado=valor-50};  
    if (tecla==LEFT) {resultado=valor+50};  
    if (tecla==RIGHT) {resultado=valor-50};  
    return resultado  
}  
function dibujar(a,x,y)  
{if(a==undefined){a=imagen.frente;x=imagen.x;y=imagen.y}  
 tablero.drawImage(imagen.fondo,0,0)  
 tablero.drawImage(imagen.liz,400,200)  
 tablero.drawImage(a,x,y)            }

Josué Manuel Echandia Asto

student•

Es del juego de Tifis

Germán Restrepo Fernández

student•

Estimado compañero: Muy bueno tu código; sin embargo, si me permites una opinión la compresión excesiva puede ir en contra de la comprensión. Creo que una "buena práctica" es escribir código que sea fácil de entender por otros.

Julio Cesar Labrador Rosales

student•

toUpperCase: convierte todas las letras de una palabra en mayuscula.
toLowerCase: convierte todas las letras de una palabra a minuscula.
length: es para saber la cantidad exacta de letras de un texto en una variable.
ejm:

palabra = palabra.toUpperCase();  
    alert(palabra.length);

Mario Ruano Fernández

student•

Hola a toda la comunidad! Tengo un duda que no consigo aclarar por mucho que analizo el código y hago pruebas a parte. En concreto con la siguiente línea de código:

espacio = new Array(palabra.length);

Entiendo perfectamente el objetivo de esta sentencia, obtener un array con las dimensiones del string que contiene la variable palabra. Mi duda más bien viene por la variable "espacio".

¿Por qué no se declara "var" antes del nombre "espacio" si es el primer punto del código completo donde se declara? He visto que Javascript acepta la omisión de var, pero como hablamos de "buenas prácticas" siempre trato de tener un código claro y completo.

¿Es que la variable "espacio" queda declarada en un punto posterior en el código?

mostrarPista(espacio);

Entiendo que esto no tiene por qué influir en la declaración de una variable, pero por salir de la duda.

Bueno, ahí les dejo una de las pocas cosas que me detienen ya de este código. Me gusta desgranarlos al mínimo para poder comprenderlos bien, entender el proceso para optimizarlo y aplicarlo en otros casos prácticos.

Un saludo y gracias!

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>Juego</title>  
    <script type="text/javascript" src="juegos.js"></script>  
    <style type="text/css">  
body  
{  
    background: black;  
    color: white;  
    text-align: center;  
}  
</style>  
</head>  
<body>  
    <canvas width="500" height="500" id="campo"></canvas>  
    <p>Mueve a Diana contra Liz usando las flechas del teclado realizado el dia 22/02/15</p>  
    <script type="text/javascript">inicio();  
    </script>  
</body>  
</html>

var tablero,num=0;  
var UP=38,DOWN=40,LEFT=37,RIGHT=39;  
var Coords =[[200,0],[200,50],[200,100],[200,150],[200,200],[0,200],[50,200],[100,200],[150,350],[200,350],[250,350],[300,350],[350,350],[400,350],[450,350]]  
var imagen={velocidad:50,x:100,y:100};  
var URL=["fondo.png","diana-frente.png","diana-atras.png","diana-izq.png","diana-der.png","liz.png"]  
function inicio()  
{  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
    for(var i=0;i<=5;i++)  
        {var rec = new Image()  
         rec.src=URL[i]  
         if(i==0){imagen.fondo=rec}  
         if(i==1){imagen.frente=rec}  
         if(i==2){imagen.atras=rec}  
         if(i==3){imagen.izq=rec}  
         if(i==4){imagen.der=rec}  
         if(i==5){imagen.liz=rec}  
         rec.onload=add   }  
    document.addEventListener("keydown",teclas)  
}  
function add(){num++; if(num==5) {dibujar()}}  
function teclas(evento)  
{   y=imagen.y;x=imagen.x  
    var tecla=evento.keyCode,orientacion;  
    if(tecla==UP){y-=imagen.velocidad;orientacion=imagen.atras}   
    if(tecla==DOWN){y+=imagen.velocidad;orientacion=imagen.frente}   
    if(tecla==LEFT){x-=imagen.velocidad;orientacion=imagen.izq}   
    if(tecla==RIGHT){x+=imagen.velocidad;orientacion=imagen.der}  
    if(x<0){x=0}  
    if(y<0){y=0}  
    if(x>450){x=450}  
    if(y>450){y=450}  
    for(var i=0;i<15;i++)  
      {if(x==Coords[i][0]&&y==Coords[i][1])  
           {    if(tecla==UP||tecla==DOWN){y=operacion(tecla,y)}  
                if(tecla==LEFT||tecla==RIGHT){x=operacion(tecla,x)}}}  
    imagen.y=y;imagen.x=x  
    dibujar(orientacion,x,y)  
}     
function operacion(tecla,valor)  
{   var resultado  
    if (tecla==UP) {resultado=valor+50};  
    if (tecla==DOWN) {resultado=valor-50};  
    if (tecla==LEFT) {resultado=valor+50};  
    if (tecla==RIGHT) {resultado=valor-50};  
    return resultado  
}  
function dibujar(a,x,y)  
{if(a==undefined){a=imagen.frente;x=imagen.x;y=imagen.y}  
 tablero.drawImage(imagen.fondo,0,0)  
 tablero.drawImage(imagen.liz,400,200)  
 tablero.drawImage(a,x,y)            }

Extendiendo la funcionalidad de los Strings

Bienvenido

Aprender a programar es fácil

La Web con Visión Profesional

Aprende sobre Algoritmos

Condicionales y operadores en programación

Qué lenguaje de programación aprender primero

Material del curso / Archivos del curso

Introducción básica a HTML y Javascript para programar

Uso del sistema de vídeo y notas

Lenguajes y compiladores

HTML y Javascript

Variables y funciones

Piedra, papel y tijera con Javascript

Variables, Matrices y Objetos en Javascript

Escribir HTML desde JS (document.write)

Matrices

Juego campo minado

Objetos del navegador

Objetos en JS

Preguntas

Ciclos y Dibujos con Canvas

Ciclos

Dibujos con canvas

Dibujar con eventos

Preguntas y respuestas

Programando juegos con canvas

Tipos de imágenes

Insertar imágenes en canvas

Dibujo de múltiples imágenes en canvas

Dibujar al enemigo y controlar a Diana

Sesión de preguntas y respuestas

Uso de Objetos, Prototype y juego de ahorcado en Canvas

Objetos en JavaScript con Prototype

Creando el juego del Ahorcado

Dibujo de un ahorcado usando Canvas

Sesión de preguntas y respuestas

Cómo crear un algoritmo para el juego del ahorcado