Sesión de preguntas y respuestas

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

//Insertar imágenes sobre imagen en canvas y controlarla por eventos  
  
var tablero, direccion, contador=0;  
// Dirección es la variable en donde se esta moviendo la tecla    
  
// Esto es la matriz de movimientos permitido según los obstáculos del mapa  
        /*Eje y          0 1 2 3 4 5 6 7 8 9 */  
    var campo = [/*0*/    [1,1,1,1,0,1,1,1,1,1],  
                 /*1*/    [1,1,1,1,0,1,1,1,1,1],  
                 /*2*/    [1,1,1,1,0,1,1,1,1,1],  
                 /*3*/    [1,1,1,1,0,1,1,1,1,1],  
        /*Eje x*//*4*/    [0,0,0,1,0,1,1,1,1,1],  
                 /*5*/    [1,1,1,1,1,1,1,1,1,1],  
                 /*6*/    [1,1,1,1,1,1,1,1,1,1],  
                 /*7*/    [1,1,1,0,0,0,0,0,0,0],  
                 /*8*/    [1,1,1,1,1,1,1,1,1,1],  
                 /*9*/    [1,1,1,1,1,1,1,1,1,1]  
                 ];  
  
var teclas ={    // creo un objeto llamado tecla  
    UP:38,    // usando el código ASCII del teclado   
    DOWN:40,  
    LEFT:37,  
    RIGHT:39  
};      
  
var fondo = {        // creo un objeto llamado fondo  
    imagenURL: "fondo.png",  
    // Separo con, porque son ítems dentro del objeto  
    imagenOK: false  
  
};      
  
var tifis = {        // creo un objeto llamado tifis  
    x: 100,  
    y: 100,  
      
    URL:  ["diana-frente.png","diana-atras.png","diana-der.png","diana-izq.png"],  
    // Array de imágenes de Tifis  
    //0-FRENTE    1-ATRAS    2-DERECHA    3-IZQUIERDA  
    OK: false,      
    // Uso una sola variable de confirmación de carga   
    // para las 4 imágenes de tifis  
    imagen: [0,0,0,0],  
    velocidad: 50  
};  
  
var liz = {        // creo un objeto llamado liz  
    lizURL: "liz.png",  
    lizOK: false,  
    x: 300,  
    y: 300  
};  
  
  
  
function inicio ()  
{  
    var canvas = document.getElementById("campo");   
    tablero = canvas.getContext("2d");      
      
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = confirmarFondo;   
    // Cuando cargue la imagen ejecute función confirmar Fondo  
      
    for (var i = 0; i <= 3; i++)   
    {  
        tifis.imagen[i] = new Image();  
        tifis.imagen[i].src = tifis.URL[i];  
        tifis.imagen[i].onload = confirmarImagenesTifis;   
        // Uso una sola variable de confirmación de carga   
        // para las 4 imágenes de tifis  
    };  
      
      
  
    liz.lizI = new Image();  
    liz.lizI.src = liz.lizURL;  
    liz.lizI.onload = confirmarLiz;  
  
    document.addEventListener("keydown", teclado);  
    // a la función teclado le asigno los parámetros de  
  
  
}  
  
function confirmarImagenesTifis()      
{  
    contador++    // cuento las 4 imágenes que deben cargar   
    //para poder dar ok al control de carga de imágenes de tifis  
    if (contador == 3) {tifis.OK = true;};  
    dibujar();  
}  
  
  
function confirmarFondo()      
{  
    fondo.imagenOK = true;  
    dibujar();  
}  
  
function confirmarLiz()      
{  
    liz.lizOK = true;  
    dibujar();  
}  
  
function teclado(datos)  
{  
  
    var codigo = datos.keyCode;    // guardo el numero de la tecla optrimida  
      
        if (codigo == teclas.UP)  
        {  
            if (tifis.y > 0 )   
            {  
                if (campo[(tifis.y-50)/50][(tifis.x)/50])   
                {  
                    tifis.y -= tifis.velocidad;  
                };  
            };  
        };  
        if (codigo == teclas.DOWN)  
        {  
            if (tifis.y < 450)   
            {  
                if (campo[(tifis.y+50)/50][(tifis.x)/50])   
                {  
                    tifis.y += tifis.velocidad;  
                };  
            };  
        };  
        if (codigo == teclas.LEFT)  
        {  
            if (tifis.x > 0)   
            {  
                if (campo[(tifis.y)/50][(tifis.x-50)/50])   
                {  
                    tifis.x -= tifis.velocidad;  
                };  
            };  
        };  
        if (codigo == teclas.RIGHT)  
        {  
            if (tifis.x < 450)   
            {      
                if (campo[(tifis.y)/50][(tifis.x+50)/50])   
                {  
                    tifis.x += tifis.velocidad;  
                };  
            };  
        };  
      
    direccion = codigo;  
    dibujar();  
}  
  
function dibujar()    //aquí voy a guardar todas mis herramientas de dibujo  
        // (el fondo, tifis y al enemigo)  
{  
    // Capa 1: Fondo  
    if (fondo.imagenOK == true)    {    tablero.drawImage(fondo.imagen, 0, 0)    };   
  
    // Capa 2: Liz (Enemigo)  
    if (liz.lizOK)     {    tablero.drawImage( liz.lizI, liz.x, liz.y )    };  
      
    // Capa 3: Tifis  
    var tifiDibujo = tifis.imagen[0];       
    // cuando arranca la tifis la mostramos de frente  
    if (tifis.OK)   
    {  
        if (direccion == teclas.UP)        {    tifiDibujo = tifis.imagen[1];    };  
        if (direccion == teclas.DOWN)    {    tifiDibujo = tifis.imagen[0];    };          
        if (direccion == teclas.RIGHT)    {    tifiDibujo = tifis.imagen[2];    };  
        if (direccion == teclas.LEFT)    {    tifiDibujo = tifis.imagen[3];    };  
          
        tablero.drawImage( tifiDibujo, tifis.x, tifis.y )  
    };  
  
}

function teclado(datos) {  
    var codigo = datos.keyCode;  
    if(codigo == teclas.UP){  
        tifis.y -= tifis.velocidad;  
        if (tifis.y<0|| tifis.y>300 && tifis.x>110 && tifis.y<360 || tifis.y>150 && tifis.x<140 && tifis.y<210 || tifis.y<210 && tifis.x>160 && tifis.x<240) {  
            tifis.y += tifis.velocidad;  
        };  
    }  
  
    if(codigo == teclas.DOWN){  
        tifis.y += tifis.velocidad;  
         if(tifis.y>450 || tifis.y>300 && tifis.x>110 && tifis.y<360 || tifis.y>150 && tifis.x<140 && tifis.y<210) {  
            tifis.y -= tifis.velocidad;  
        }      
    }  
  
    if(codigo == teclas.LEFT){  
        tifis.x -= tifis.velocidad;  
        if (tifis.x<-10 || tifis.y>150 && tifis.x<140 && tifis.y<210 || tifis.x>160 && tifis.y<210 && tifis.x<240) {  
            tifis.x += tifis.velocidad;  
        };  
    }  
  
    if(codigo == teclas.RIGHT){  
        tifis.x += tifis.velocidad;  
        if(tifis.x>460 || tifis.y>300 && tifis.y<350 && tifis.x>110 || tifis.x>160 && tifis.y<210 && tifis.x<240) {  
            tifis.x -= tifis.velocidad;  
        }  
    }  
  
    direccion = codigo;  
    dibujar();  
}

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>La leyenda de Tifis</title>  
    <style type="text/css">  
        body{  
            background: black;  
            color: white;  
            text-align: center;  
            }  
    </style>  
    <script type="text/javascript" src="tifis.js"></script>  
</head>  
<body>  
    <canvas id="campo" width="500" height="500"></canvas>  
    <p>Mueve a Diana contra Liz usando las flechas del teclado</p>  
    <script type="text/javascript">  
        inicio();  
    </script>  
</body>  
</html>

//JSON : JavaScript Object Notation  
var fondo = {imagenURL: "fondo.png"};  
var tifis = {  
             x: 0,  
             y: 0,   
             vel: 50,  
             URL: ["diana-frente.png", "diana-atras.png", "diana-der.png", "diana-izq.png"],  
            };  
var liz = {lizURL:"liz.png"};  
var teclas = {UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39};  
  
var campo = [[1,1,1,1,0,1,1,1,1,1],  
             [1,1,1,1,0,1,1,1,1,1],  
             [1,1,1,1,0,1,1,1,1,1],  
             [1,1,1,1,0,1,1,1,1,1],  
             [0,0,0,1,0,1,1,1,1,1],  
             [1,1,1,1,1,1,1,1,1,1],  
             [1,1,1,1,1,1,1,1,1,1],  
             [1,1,1,0,0,0,0,0,0,0],  
             [1,1,1,1,1,1,1,1,1,1],  
             [1,1,1,1,1,1,1,1,1,1]  
            ];  
  
var tablero, direccion;  
  
function inicio()  
{  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
    fondo.imagen = cargaImagen(fondo.imagenURL);  
    liz.lizy = cargaImagen(liz.lizURL);  
    tifis.Posicion = new Array(3); // array de imágenes de Tifis  
    for (var i = 0; i < 4; i++)   
    {  
        tifis.Posicion[i] = cargaImagen(tifis.URL[i]);  
    }  
    direccion = tifis.Posicion[0];  
    document.addEventListener("keydown",teclado);  
}  
  
function cargaImagen(url)  
{  
    var img = new Image();  
    img.src = url;  
    img.onload = dibujar;  
    return img;  
}  
  
function dibujar()  
{  
    tablero.drawImage(fondo.imagen, 0, 0); //Capa 1: Fondo  
    tablero.drawImage(liz.lizy, 420,420); //Capa 2: Liz  
    tablero.drawImage(direccion, tifis.x, tifis.y); //Capa 3: Tifis  
}  
  
function teclado(datos)  
{  
    if(datos.keyCode == teclas.UP)  
    {  
        if(tifis.y > 0)  
        {  
            if(campo[(tifis.y-tifis.vel)/tifis.vel][(tifis.x)/tifis.vel])   
            {  
                tifis.y -= tifis.vel;  
                direccion = tifis.Posicion[1];  
            }  
        }  
    }  
    else if(datos.keyCode == teclas.DOWN)  
    {  
        if(tifis.y < 450)  
        {  
            if(campo[(tifis.y+tifis.vel)/tifis.vel][(tifis.x)/tifis.vel])   
            {  
                tifis.y += tifis.vel;  
                direccion = tifis.Posicion[0];  
            }  
        }  
    }  
    if(datos.keyCode == teclas.LEFT)  
    {  
        if(tifis.x > 0)  
        {  
            if(campo[(tifis.y)/tifis.vel][(tifis.x-tifis.vel)/tifis.vel])   
            {  
                tifis.x -= tifis.vel;  
                direccion = tifis.Posicion[3];  
            }  
        }  
    }  
    else if(datos.keyCode == teclas.RIGHT)  
    {  
        if(tifis.x < 450)  
        {  
            if(campo[(tifis.y)/tifis.vel][(tifis.x+tifis.vel)/tifis.vel])   
            {  
                tifis.x += tifis.vel;  
                direccion = tifis.Posicion[2];  
            }  
        }  
    }  
    dibujar();  
}

var tablero;  
var direccion;  
//objetos JSON  
var teclas =  
{  
    UP: 38,  
    DOWN: 40,  
    LEFT: 37,  
    RIGHT:39  
};  
var fondo =  
{  
    imagenUrl: "fondo.png",  
    imagenOK: false,  
};  
var diana =  
{  
    x:100,  
    y:100,  
    frenteUrl: "diana-frente.png",  
    frenteOK: false,  
    atrasUrl: "diana-atras.png",  
    atrasOK: false,  
    izqUrl: "diana-izq.png",  
    izqOK: false,  
    derUrl: "diana-der.png",  
    derOK: false,  
    velocidad: 10,  
    posicion:0  
};  
var liz =  
{  
    x:250,  
    y:250,  
    lizUrl: "liz.png",  
    lizOK: false,  
};  
function inicio ()   
{  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
    fondo.imagen = new Image ();  
    fondo.imagen.src = fondo.imagenUrl;  
    fondo.imagen.onload = confirmarFondo;  
  
    diana.frente = new Image ();  
    diana.frente.src = diana.frenteUrl;  
    diana.frente.onload = confirmarFrente;  
  
    diana.atras = new Image ();  
    diana.atras.src = diana.atrasUrl;  
    diana.atras.onload = confirmarAtras;  
  
    diana.der = new Image ();  
    diana.der.src = diana.derUrl;  
    diana.der.onload = confirmarDer;  
  
    diana.izq = new Image ();  
    diana.izq.src = diana.izqUrl;  
    diana.izq.onload = confirmarIzq;  
  
    liz.liz = new Image ();  
    liz.liz.src = liz.lizUrl;  
    liz.liz.onload = confirmarLiz;  
  
    document.addEventListener("keydown",teclado);  
}  
  
function teclado (datos)   
{  
    var codigo = datos.keyCode;  
      
    //movimientos hacia abajo  
    if(codigo == teclas.DOWN)  
    {  
        if (diana.x <= 180 && diana.y <= 140)   
            {  
                diana.y += diana.velocidad;  
            }  
        diana.posicion = 1  
        if (diana.x >= 131 && diana.x <=180 && diana.y >= 141 && diana.y <= 290)   
            {  
                diana.y += diana.velocidad;  
            }  
        diana.posicion = 2  
        if (diana.x <=119 && diana.y >= 241 && diana.y <= 440)   
            {  
                diana.y += diana.velocidad;  
            }  
        diana.posicion = 3  
        if (diana.x >=120 && diana.x <= 140 && diana.y >=200  && diana.y < 300)   
            {  
                diana.y += diana.velocidad;  
            }  
        diana.posicion = 31  
        if (diana.x >=120 && diana.x <= 130 && diana.y >=390  && diana.y < 440)   
            {  
                diana.y += diana.velocidad;  
            }  
        diana.posicion = 32  
  
        if (diana.x >= 125 && diana.x <= 460 && diana.y >= 390 && diana.y <= 440)   
            {  
                diana.y += diana.velocidad;  
            }  
        diana.posicion = 4  
  
        if (diana.x >= 190 && diana.x <= 220 && diana.y >= 240 && diana.y <= 290)   
            {  
                diana.y += diana.velocidad;  
            }  
        diana.posicion = 5  
        if (diana.x >= 220 && diana.x <= 460 && diana.y >= 0 && diana.y <= 290)   
            {  
                diana.y += diana.velocidad;  
            }  
        diana.posicion = 6  
    }  
  
    //movimientos hacia arriba  
    if(codigo == teclas.UP)  
    {  
        if (diana.x <= 165 && diana.y >= 3 && diana.y <= 150)   
            {  
                diana.y -= diana.velocidad;  
            }  
        diana.posicion = 7  
          
        if (diana.x >= 135&& diana.x <= 165 && diana.y >= 151 && diana.y <= 300)   
            {  
                diana.y -= diana.velocidad;  
            }  
        diana.posicion = 8  
        if (diana.x <= 119 && diana.y >= 260 && diana.y <= 460)   
            {  
                diana.y -= diana.velocidad;  
            }  
        diana.posicion = 9  
        if (diana.x >= 120 && diana.x <= 140 && diana.y >= 410 && diana.y <= 460)   
            {  
                diana.y -= diana.velocidad;  
            }  
        diana.posicion = 91  
        if (diana.x >=130  && diana.x <=460  && diana.y >=410  && diana.y <=460 )   
            {  
                diana.y -= diana.velocidad;  
            }  
        diana.posicion = 10  
        if (diana.x >=120  && diana.x <=140  && diana.y >=410  && diana.y <=460 )   
            {  
                diana.y -= diana.velocidad;  
            }  
        diana.posicion = 101  
  
        if (diana.x >= 170  && diana.x <= 230  && diana.y >= 260  && diana.y <=300 )   
            {  
                diana.y -= diana.velocidad;  
            }  
        diana.posicion = 11  
        if (diana.x >= 240  && diana.x <= 460  && diana.y >= 3  && diana.y <=300)   
            {  
                diana.y -= diana.velocidad;  
            }  
        diana.posicion = 12  
        if (diana.x >= 120  && diana.x <= 140  && diana.y >= 260  && diana.y <=310)   
            {  
                diana.y -= diana.velocidad;  
            }  
        diana.posicion = 123  
    }  
    //movimientos hacia la izquierda  
    if(codigo == teclas.LEFT)  
    {  
        if (diana.x >= 0 && diana.x <= 170 && diana.y >=0 && diana.y <= 150)  
            {  
                diana.x -= diana.velocidad;  
            }  
            diana.posicion = 13  
        if (diana.x >= 150 && diana.x <= 170 && diana.y >= 150 && diana.y <= 240)  
            {  
                diana.x -= diana.velocidad;  
            }  
            diana.posicion = 14  
        if (diana.x >= 0 && diana.x <= 460 && diana.y >= 250 && diana.y <= 300)  
            {  
                diana.x -= diana.velocidad;  
            }  
            diana.posicion = 15  
        if (diana.x >= 0 && diana.x <= 110 && diana.y >= 250 && diana.y <= 450)  
            {  
                diana.x -= diana.velocidad;  
            }  
            diana.posicion = 16  
        if (diana.x >= 111 && diana.y >= 250 && diana.y <= 450)  
            {  
                diana.x -= diana.velocidad;  
            }  
            diana.posicion = 17  
        if (diana.x >= 250 && diana.x <= 460 && diana.y >= 0 && diana.y <= 250)  
            {  
                diana.x -= diana.velocidad;  
            }  
            diana.posicion = 18  
    }  
    //movimientos hacia la derecha  
    if(codigo == teclas.RIGHT)  
    {  
        if(diana.x <= 150 && diana.y >= 0 && diana.y <= 150)  
        {  
            diana.x += diana.velocidad;  
        }  
        diana.posicion = 19  
        if(diana.x >= 130 && diana.x <= 150 && diana.y >= 160 && diana.y <= 230)  
        {  
            diana.x += diana.velocidad;  
        }  
        diana.posicion = 20  
        if(diana.x <= 450 && diana.y >= 250 && diana.y <= 300)  
        {  
            diana.x += diana.velocidad;  
        }  
        diana.posicion = 21  
        if(diana.x <= 100 && diana.y >= 290 && diana.y <= 390)  
        {  
            diana.x += diana.velocidad;  
        }  
        diana.posicion = 22  
        if(diana.x <= 450 && diana.y >= 400 && diana.y <= 450)  
        {  
            diana.x += diana.velocidad;  
        }  
        diana.posicion = 23  
        if(diana.x >= 240 && diana.x <= 450 && diana.y >= 0 && diana.y <= 240)  
        {  
            diana.x += diana.velocidad;  
        }  
        diana.posicion = 24  
    }  
  
    direccion = codigo;  
    dibujar();  
}  
  
  
function confirmarFondo()   
{  
    fondo.imagenOK = true;  
    dibujar();  
}  
  
function confirmarFrente()   
{  
    diana.frenteOK =true;  
    dibujar();  
}  
function confirmarAtras()   
{  
    diana.atrasOK =true;  
    dibujar();  
}  
function confirmarIzq()   
{  
    diana.izqOK =true;  
    dibujar();  
}  
function confirmarDer()   
{  
    diana.derOK =true;  
    dibujar();  
}  
  
function confirmarLiz()   
{  
    liz.lizOK = true;  
    dibujar();  
}  
  
function dibujar()   
{  
    if(fondo.imagenOK)  
    {  
        tablero.drawImage(fondo.imagen,0,0);  
    }  
    var dianadibujo = diana.frente;  
    if(diana.frenteOK)  
    {  
        if (direccion == teclas.DOWN)   
            {  
                if(diana.posicion == 1)  
                {  
                    dianadibujo = diana.frente;  
                }  
                if(diana.posicion == 2)  
                {  
                    dianadibujo = diana.frente;  
                }  
                if(diana.posicion == 3)  
                {  
                    dianadibujo = diana.frente;  
                }  
                if(diana.posicion == 31)  
                {  
                    dianadibujo = diana.frente;  
                }  
                if(diana.posicion == 32)  
                {  
                    dianadibujo = diana.frente;  
                }  
                if(diana.posicion == 4)  
                {  
                    dianadibujo = diana.frente;  
                }  
                if(diana.posicion == 5)  
                {  
                    dianadibujo = diana.frente;  
                }  
                if(diana.posicion == 6)  
                {  
                    dianadibujo = diana.frente;  
                }  
            }  
        if (direccion == teclas.UP)   
            {  
                if(diana.posicion == 7)  
                {  
                    dianadibujo = diana.atras;  
                }  
                if(diana.posicion == 8)  
                {  
                    dianadibujo = diana.atras;  
                }  
                if(diana.posicion == 9)  
                {  
                    dianadibujo = diana.atras;  
                }  
                if(diana.posicion == 91)  
                {  
                    dianadibujo = diana.atras;  
                }  
                if(diana.posicion == 10)  
                {  
                    dianadibujo = diana.atras;  
                }  
                if(diana.posicion == 101)  
                {  
                    dianadibujo = diana.atras;  
                }  
                if(diana.posicion == 11)  
                {  
                    dianadibujo = diana.atras;  
                }  
                if(diana.posicion == 12)  
                {  
                    dianadibujo = diana.atras;  
                }  
                if(diana.posicion == 123)  
                {  
                    dianadibujo = diana.atras;  
                }  
            }  
        if (direccion == teclas.LEFT)  
            {   
                if(diana.posicion == 13)  
                {  
                    dianadibujo = diana.izq;  
                }  
                if(diana.posicion == 14)  
                {  
                    dianadibujo = diana.izq;  
                }  
                if(diana.posicion == 15)  
                {  
                    dianadibujo = diana.izq;  
                }  
                if(diana.posicion == 16)  
                {  
                    dianadibujo = diana.izq;  
                }  
                if(diana.posicion == 17)  
                {  
                    dianadibujo = diana.izq;  
                }  
                if(diana.posicion == 18)  
                {  
                    dianadibujo = diana.izq;  
                }  
            }  
        if (direccion == teclas.RIGHT)   
            {  
                if(diana.posicion == 19)  
                {  
                    dianadibujo = diana.der;  
                }  
                if(diana.posicion == 20)  
                {  
                    dianadibujo = diana.der;  
                }  
                if(diana.posicion == 21)  
                {  
                    dianadibujo = diana.der;  
                }  
                if(diana.posicion == 22)  
                {  
                    dianadibujo = diana.der;  
                }  
                if(diana.posicion == 23)  
                {  
                    dianadibujo = diana.der;  
                }  
                if(diana.posicion == 24)  
                {  
                    dianadibujo = diana.der;  
                }  
            }  
        tablero.drawImage(dianadibujo,diana.x,diana.y);  
    }  
    if(liz.lizOK)  
    {  
        tablero.drawImage(liz.liz,liz.x,liz.y);  
    }  
}

<!DOCTYPE html>  
<html>  
<head>  
    <title>jueguito de muñequitas</title>  
    <meta charset="utf-8" />  
    <style type="text/css">  
    body  
    {  
        background: blue;  
        text-align: center;  
        color: pink;  
    }  
    </style>  
    <script type="text/javascript" src="jueguito.js"></script>  
</head>  
<body>  
<h1>jueguito</h1>  
<!--<p>  
    <p><input type="button" value="sub" id="moverarriba" /></p>  
    <input type="button" value="der" id="moverder" />  <input type="button" value="izq" id="moverizq" />  
    <p><input type="button" value="baj" id="moverabajo" /></p>  
</p>-->  
<canvas id="campo" width="500" height="500"></canvas>  
<script type="text/javascript">  
    inicio();  
</script>  
<p>Mueve a diana con las fleclas de dirección del teclado</p>  
</body>  
</html>

var tablero;  
var fondo = {  
    imagenURL: "fondo.png",  
    imagenOK: false  
};  
var tifis = {  
    x:100,  
    y:100,  
    frenteURL: "diana-frente.png",  
    atrasURL: "diana-atras.png",  
    derechaURL: "diana-der.png",  
    izquierdaURL: "diana-izq.png",  
    posicion: 0,  
    velocidad:20  
};  
var liz = {  
    lizURL: "liz.png",  
    lizOK: false,  
    x:400,  
    y:200  
};  
var teclas = {  
    UP:38,  
    DOWN:40,  
    LEFT:37,  
    RIGHT:39  
};  
function inicio (){  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = confirmarFondo;  
    liz.lizy = new Image();  
    liz.lizy.src=liz.lizURL;  
    liz.lizy.onload = confirmarLiz;  
    tifis.frente = new Image();  
    tifis.frente.src = tifis.frenteURL;  
    tifis.atras = new Image();  
    tifis.atras.src = tifis.atrasURL;  
    tifis.izquierda = new Image();  
    tifis.izquierda.src = tifis.izquierdaURL;  
    tifis.derecha = new Image();  
    tifis.derecha.src = tifis.derechaURL;  
    document.addEventListener("keydown", teclado);  
}  
function teclado(datos){  
    var codigo = datos.keyCode;  
    if (codigo == teclas.UP){  
        tifis.y -= tifis.velocidad;  
        if(tifis.y>300 && tifis.y<370 && tifis.x>100 && tifis.x<500){  
        tifis.y += tifis.velocidad;  
          }  
          if(tifis.y>158 && tifis.y<220 && tifis.x>=-20 && tifis.x<130){  
        tifis.y += tifis.velocidad;  
          }  
        tifis.posicion = 0;  
    }  
    if (codigo == teclas.DOWN){  
        tifis.y += tifis.velocidad;  
        if(tifis.y>300 && tifis.y<370 && tifis.x>100){  
        tifis.y -= tifis.velocidad;  
          }  
        if(tifis.y>158 && tifis.y<220 && tifis.x>=-20 && tifis.x<130){  
        tifis.y -= tifis.velocidad;  
          }  
        tifis.posicion = 1;  
    }  
    if (codigo == teclas.LEFT){  
        tifis.x -= tifis.velocidad;  
        if(tifis.y>0 && tifis.y<205 && tifis.x>160 && tifis.x<230){  
        tifis.x += tifis.velocidad;  
          }  
          if(tifis.y>160 && tifis.y<220 && tifis.x>0 && tifis.x<130){  
        tifis.x += tifis.velocidad;  
          }  
        tifis.posicion = 2;  
    }  
    if (codigo == teclas.RIGHT){  
        tifis.x += tifis.velocidad;  
        if(tifis.y>300 && tifis.y<370 && tifis.x>100){  
        tifis.x -= tifis.velocidad;  
          }  
          if(tifis.y>0 && tifis.y<205 && tifis.x>170 && tifis.x<190){  
        tifis.x -= tifis.velocidad;  
          }  
        tifis.posicion = 3;  
    }  
    dibujar();  
}  
function confirmarLiz()  
{  
    liz.lizOK = true;  
    dibujar();  
}  
function confirmarFondo(){  
    fondo.imagenOK = true;  
    dibujar();  
}  
function dibujar(){  
    if (fondo.imagenOK == true){  
        tablero.drawImage(fondo.imagen,0,0);  
    }  
    if(tifis.posicion == 0){  
        tablero.drawImage(tifis.atras,tifis.x,tifis.y);  
    }  
    else if (tifis.posicion == 1){  
        tablero.drawImage(tifis.frente,tifis.x,tifis.y);  
    }  
    else if(tifis.posicion == 2){  
        tablero.drawImage(tifis.izquierda,tifis.x,tifis.y);  
    }  
    else if (tifis.posicion == 3){  
        tablero.drawImage(tifis.derecha,tifis.x,tifis.y);  
    }  
    if(liz.lizOK){  
        tablero.drawImage(liz.lizy,liz.x,liz.y);  
    }  
}

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>La Leyenda de Tifis</title>  
<script type="text/javascript" src="tifis.js"></script>  
<style type="text/css">  
body  
{  
background: black;  
text-align: center;  
}  
</style>  
</head>  
<body>  
<canvas id="campo" width="500" height="500"></canvas>  
<script type="text/javascript">  
inicio();  
</script>  
</body>  
</html>

var tablero;  
var teclas =  
{  
    UP: 38,  
    DOWN: 40,  
    LEFT: 37,  
    RIGHT: 39  
};  
var fondo = {  
    imagenURL: "fondo.png",  
    imagenOK: false  
};  
var tifis = {  
    frenteOK: false,  
    atrasOK: false,  
    derOK: false,  
    izqOK: false,  
    velocidad: 50,  
    x: 0,  
    y: 0  
};  
var liz = {  
    imagenOK: false,  
    x: 400,  
    y: 200  
};  
function inicio()  
{  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = confirmarFondo;  
  
    tifis.frente = new Image();  
    tifis.frente.src = "diana-frente.png";  
    tifis.frente.onload = confirmarFrente;  
  
    tifis.atras = new Image();  
    tifis.atras.src = "diana-atras.png";  
    tifis.atras.onload = confirmarAtras;  
  
    tifis.izq = new Image();  
    tifis.izq.src = "diana-izq.png";  
    tifis.izq.onload = confirmarIzq;  
  
    tifis.der = new Image();  
    tifis.der.src = "diana-der.png";  
    tifis.der.onload = confirmarDer;  
  
    liz.imagen = new Image();  
    liz.imagen.src = "liz.png";  
    liz.imagen.onload = confirmarLiz;  
  
    document.addEventListener("keydown", teclado);  
  
}  
function teclado(evento)  
{  
    var codigo = evento.keyCode;  
    tifis.x1 = tifis.x;  
    tifis.y1 = tifis.y;  
  
    if(codigo == teclas.UP)  
    {  
        tifis.y -= tifis.velocidad;  
    }  
    if(codigo == teclas.DOWN)  
    {  
        tifis.y += tifis.velocidad;  
    }  
    if(codigo == teclas.LEFT)  
    {  
        tifis.x -= tifis.velocidad;  
    }  
    if(codigo == teclas.RIGHT)  
    {  
        tifis.x += tifis.velocidad;  
    }  
  
    if (tifis.x == 200 && tifis.y <= 200) {  
        tifis.x = tifis.x1;  
        tifis.y = tifis.y1;  
    }  
  
    else if (tifis.x < 150 && tifis.y == 200){  
        tifis.x = tifis.x1;  
        tifis.y = tifis.y1;  
    }  
  
    else if (tifis.x > 100 && tifis.y == 350){  
        tifis.x = tifis.x1;  
        tifis.y = tifis.y1;  
    }  
  
    else if (tifis.x < 0 || tifis.y < 0){  
        tifis.x = tifis.x1;  
        tifis.y = tifis.y1;  
    }  
  
    else if (tifis.x >= 500 || tifis.y >= 500){  
        tifis.x = tifis.x1;  
        tifis.y = tifis.y1;  
    }  
    //Imprimir la ubicación por consola   
    console.log("X "+tifis.x+" Y "+tifis.y);  
  
    dibujar(codigo);  
}  
function confirmarFondo()  
{  
    fondo.imagenOK = true;  
    dibujar();  
}  
  
function confirmarFrente()  
{  
    tifis.frenteOK = true;  
    dibujar();  
}  
function confirmarAtras()  
{  
    tifis.atrasOK = true;  
    dibujar();  
}  
function confirmarIzq()  
{  
    tifis.izqOK = true;  
    dibujar();  
}  
function confirmarDer()  
{  
    tifis.derOK = true;  
    dibujar();  
}  
  
function confirmarLiz()  
{  
    liz.imagenOK = true;  
    dibujar();  
}  
  
function dibujar(direccion)  
{  
    if(fondo.imagenOK)  
    {  
        tablero.drawImage(fondo.imagen, 0, 0);      
    }  
  
    var tifisOrientada = tifis.frente;  
  
    if(tifis.frenteOK && tifis.atrasOK && tifis.derOK && tifis.izqOK)  
    {  
        if(direccion == teclas.DOWN || direccion == undefined)  
        {  
            tifisOrientada = tifis.frente;  
        }  
        else if(direccion == teclas.UP)  
        {  
            tifisOrientada = tifis.atras;  
        }  
        else if(direccion == teclas.LEFT)  
        {  
            tifisOrientada = tifis.izq;  
        }  
        else if(direccion == teclas.RIGHT)  
        {  
            tifisOrientada = tifis.der;  
        }  
    }  
    tablero.drawImage(tifisOrientada, tifis.x, tifis.y);  
  
    if(liz.imagenOK)  
    {  
        tablero.drawImage(liz.imagen, liz.x, liz.y);  
    }  
}

<DOCTYPE html>  
<html>  
    <head>  
    <meta carset="utf-8"/>  
    <title>Juego XD</title>  
    <style type="text/css">  
    body  
    {  
        background-color: black;  
        color:White;  
        text-align: center;  
    }  
    </style>  
    <script type="text/javascript" src = "juego.js"></script>  
    </head>  
    <body>  
        <p><canvas width="500" height="500" id="dibujito"></canvas></p>  
        <p>Mueve a Diana para alcanzar a su amiga liz</p>  
        <script type="text/javascript">  
        inicio();  
        </script>  
  
    </body>  
</html>

var helado, direccion;  
var teclas =  
{  
    UP: 38,  
    DOWN: 40,  
    LEFT: 37,  
    RIGTH: 39  
};  
var fondo ={  
    imagenOK: false  
};  
var andrea = {  
    freOK: false,  
    atrOK: false,  
    derOK: false,  
    izOK: false,  
    velocidad: 20,  
    x: 0,  
    y: 0,  
};  
  
var mala = {  
    malaOK: false,  
    x:400,  
    y:200,  
      
};  
  
  
function inicio()  
{  
    var canvas = document.getElementById("dibujito");  
    helado = canvas.getContext("2d");  
  
    fondo.imagen = new Image();  
    fondo.imagen.src = "fondo.png";  
    fondo.imagen.onload = confirmarfondo;  
  
    mala.malas = new Image();  
    mala.malas.src = "liz.png";  
    mala.malas.onload = confirmarmaldad;  
  
    andrea.frente = new Image();  
    andrea.frente.src = "diana-frente.png";  
    andrea.frente.onload = confirmarfrente;  
  
    andrea.atrass = new Image();  
    andrea.atrass.src = "diana-atras.png";  
    andrea.atrass.onload = confirmaratrass;  
  
    andrea.der = new Image();  
    andrea.der.src = "diana-der.png";  
    andrea.der.onload = confirmarder;  
  
    andrea.izq = new Image();  
    andrea.izq.src = "diana-izq.png";  
    andrea.izq.onload = confirmarizq;  
  
    //var m = document.getElementById("mover");  
    //m.addEventListener("click", movimiento)  
    document.addEventListener("keydown", teclado);  
}  
function teclado(datos)  
  
{   
    var codigo = datos.keyCode;  
    if(codigo == teclas.DOWN)   
        {  
            andrea.y += andrea.velocidad;  
            if(andrea.y>455 || andrea.x<140 && andrea.y>155 && andrea.y<190 || andrea.y>300 && andrea.x<350 && andrea.x>110 && andrea.x<200)  
        {  
            andrea.y -= andrea.velocidad;  
        }  
        }  
    if(codigo == teclas.UP)   
        {  
            andrea.y -= andrea.velocidad;  
            if(andrea.y<0 || andrea.x<140 && andrea.y<250 && andrea.x<145 || andrea.x>175 && andrea.y<245  && andrea.x<225)// ||   andrea.y> 425 && andrea.y<400 && andrea.x<130)  
        {  
            andrea.y += andrea.velocidad;  
        }  
        }  
    if(codigo == teclas.RIGTH)   
        {  
            andrea.x += andrea.velocidad;  
            if(andrea.x>475 || andrea.y<260 && andrea.x>160 && andrea.x<210)  
        {  
            andrea.x -= andrea.velocidad;  
        }  
        }  
    if(codigo == teclas.LEFT)   
        {  
            andrea.x -= andrea.velocidad;  
            if(andrea.x<0)  
        {  
            andrea.x += andrea.velocidad;  
        }  
        }  
    direccion = codigo;  
        dibujar();  
}  
function confirmarfondo()  
    {  
        fondo.imagenOK = true;  
        dibujar();  
    }  
function confirmarfrente()  
    {  
        andrea.freOK = true;  
        dibujar();  
    }  
function confirmaratrass()  
    {  
        andrea.atrOK = true;  
        dibujar();  
    }  
function confirmarmaldad()  
    {  
        mala.malaOK = true;  
        dibujar();  
    }  
function confirmarder()  
    {  
        andrea.derOK = true;  
        dibujar();  
    }  
function confirmarizq()  
    {  
        andrea.izOK = true;  
        dibujar();  
    }  
function dibujar()  
{ if(fondo.imagenOK)   
    {  
    helado.drawImage(fondo.imagen, 0, 0);  
    }  
    var andreaDibujo = andrea.frente;  
    if (andrea.freOK && andrea.atrOK && andrea.derOK && andrea.izOK)   
        {  
            if (direccion == teclas.UP)  
            {  
            andreaDibujo = andrea.atrass;  
            }  
            if (direccion == teclas.DOWN)  
            {  
                andreaDibujo = andrea.frente;  
            }  
            if (direccion == teclas.RIGTH)  
            {  
                andreaDibujo = andrea.der;  
            }  
            if (direccion == teclas.LEFT)  
            {  
                andreaDibujo = andrea.izq;  
            }  
        }  
        helado.drawImage(andreaDibujo, andrea.x, andrea.y);      
if(mala.malaOK)   
    {  
    helado.drawImage(mala.malas, mala.x, mala.y);  
    }  
}

Juan Manuel

student•

comparten su versión del código.

Usuario anónimo

user•

Aqui el codigo con los obstaculos!

Pablo Cesar Farias

Hola quería consultarte lo siguiente porque en el if pones esto:

if (tifis.y<0|| tifis.y>300 && tifis.x>110 && tifis.y<360 || tifis.y>150 && tifis.x<140 && tifis.y<210 || tifis.y<210 && tifis.x>160 && tifis.x<240)  
me lo puedes explicar??  
gracias

Antonio Mendiola Farías

Encontré que no es necesario una función para evaluar la carga de las imágenes ya que el evento "onload" es precisamente lo que hace. Aquí mi resultado optimizado.
HTML:

JavaScript:

Saludos!

Santiago Avellaneda

Está súper el aporte compa

Chris

Logre mover a Liz y hacer que Muera cuando diana la alcanza haha pero ahora Liz es un perrito :( Diana es la malvada del cuento al final del dia xD

Jorge A. VARGAS

Excelentes clases Freddy...

Fredy Luján

Que bueno que se pudiera poner el video a diferente velocidad de reproducción

Julio Cesar Labrador Rosales

html:

Cesar Garzon

gracias compañero a que compartiste el código yo pude resolver el mio gracias :D

Rafael Olguin

//Solo pude hacer los bordes, los obstáculos no pude :c

var tablero, direccion;

var teclas =
{
UP: 38,
DOWN: 40,
LEFT: 37,
RIGHT: 39
};

var fondo = {
imagenURL: "Imagenes/fondo.png",
imagenOK: false
};

var tifis = {
x: 100,
y: 100,
frenteURL: "Imagenes/diana-frente.png",
frenteOK: false,
atrasURL: "Imagenes/diana-atras.png",
atrasOK: false,
izqURL: "Imagenes/diana-izq.png",
izqOK: false,
derURL: "Imagenes/diana-der.png",
derOK: false,
velocidad: 50
};

var liz = {
x:400,
y:200,
lizURL: "Imagenes/liz.png",
lizOK: false
}

function inicio ()
{
var canvas = document.getElementById("campo");
tablero = canvas.getContext("2d");

fondo.imagen = new Image();
fondo.imagen.src = fondo.imagenURL;
fondo.imagen.onload = confirmarFondo;

tifis.atras = new Image();
tifis.atras.src = tifis.atrasURL;
tifis.atras.onload = confirmarAtras;

tifis.frente = new Image();
tifis.frente.src = tifis.frenteURL;
tifis.frente.onload = confirmarFrente;

tifis.der = new Image();
tifis.der.src = tifis.derURL;
tifis.der.onload = confirmarDer;

tifis.izq = new Image();
tifis.izq.src = tifis.izqURL;
tifis.izq.onload = confirmarIzq;

liz.lizy = new Image();
liz.lizy.src = liz.lizURL;
liz.lizy.onload = confirmarLiz;

if(codigo == teclas.LEFT)
{
if(tifis.x > 0)
{
tifis.x -= tifis.velocidad;
}
}
if(codigo == teclas.RIGHT)
{
if(tifis.x < 450)
{
tifis.x += tifis.velocidad;
}
}

direccion = codigo;

dibujar();
}
function confirmarFondo()
{
fondo.imagenOK = true;
dibujar ();
}
function confirmarLiz()
{
liz.lizOK = true;
dibujar();
}
function confirmarFrente()
{
tifis.frenteOK = true;
dibujar ();
}
function confirmarAtras()
{
tifis.atrasOK = true;
dibujar ();
}
function confirmarDer()
{
tifis.derOK = true;
dibujar ();
}
function confirmarIzq()
{
tifis.izqOK = true;
dibujar ();
}
function dibujar()
{
if(fondo.imagenOK == true)
{
tablero.drawImage(fondo.imagen, 0, 0)
}
var tifiDibujo = tifis.frente;
if (tifis.frenteOK && tifis.atrasOK && tifis.derOK && tifis.izqOK)
{
if (direccion == teclas.UP)
{
tifiDibujo = tifis.atras;
}
if (direccion == teclas.DOWN)
{
tifiDibujo = tifis.frente;
}
if (direccion == teclas.LEFT)
{
tifiDibujo = tifis.izq;
}
if (direccion == teclas.RIGHT)
{
tifiDibujo = tifis.der;
}
tablero.drawImage(tifiDibujo, tifis.x, tifis.y);
}
if (liz.lizOK == true)
{
tablero.drawImage(liz.lizy, liz.x, liz.y);
}

}

Diana Mora

Alexandro Gálvez

var fondo = {
imagenURL: "fondo.png",
imagenOK: false,
};

var tifis = {
x: 0,
y: 0,
imagenURL: ["diana-frente.png", "diana-atras.png", "diana-der.png", "diana-izq.png"],
teclas: [40, 38, 39, 37], //DOWN: 40, UP: 38, RIGHT: 39, LEFT: 37
imagenOK: false,
velocidad: 50
};

var liz = {
lizURL: "liz.png",
lizOK: false,
x: 400,
y: 200
};

var obstaculos = [[0,200],[50,200],[100,200],[200,0],[200,50],[200,100],[200,150],[200,200],[150,350],[200,350],[250,350],[300,350],[350,350],[400,350],[450,350]];

function inicio(){
var canvas = document.getElementById("campo");
tablero = canvas.getContext("2d");
fondo.imagen = new Image();
fondo.imagen.src = fondo.imagenURL;
fondo.imagen.onload = confirmarFondo;

tifis.imagen = new Array();
for (var i = 0; i < tifis.imagenURL.length; i++) {
tifis.imagen[i] = new Image();
tifis.imagen[i].src = tifis.imagenURL[i];
tifis.imagen[i].onload = confirmarTifis;
}

document.addEventListener("keydown", teclado)
}

function verificarObstaculo(x,y) {
for(var i = 0; i < 15; i++) {
if((obstaculos[i][0] == x) && (obstaculos[i][1] == y)) {
return true;
}
}
return false;
}

function teclado(datos){
var codigo = datos.keyCode;

if(codigo == tifis.teclas[0]){
if(tifis.y < 450){
tifis.y += tifis.velocidad;
if(verificarObstaculo(tifis.x,tifis.y)) {
tifis.y -= tifis.velocidad;
}

}
}

if(codigo == tifis.teclas[1]){
if(tifis.y != 0){
tifis.y -= tifis.velocidad;
if(verificarObstaculo(tifis.x,tifis.y)) {
tifis.y += tifis.velocidad;
}

if(codigo == tifis.teclas[2]){
if(tifis.x < 450){
tifis.x += tifis.velocidad;
if(verificarObstaculo(tifis.x,tifis.y)) {
tifis.x -= tifis.velocidad;
}
}
}

if(codigo == tifis.teclas[3]){
if(tifis.x != 0){
tifis.x -= tifis.velocidad;
if(verificarObstaculo(tifis.x,tifis.y)) {
tifis.x += tifis.velocidad;
}

dibujar();
}

function confirmarLiz(){
liz.lizOK = true;
dibujar();
}
function confirmarFondo(){
fondo.imagenOK = true;
dibujar();
}

function confirmarTifis(){
tifis.imagenOK = true;
dibujar();
}

Rafael Luna Paredes

Excelente código, lo único que note es que cuando borras uno de los obstaculos o agregas uno nuevo se descompone el juego de Tifis, probe a poner obstaculos.length, en lugar del 15 que manejas en verificarObstaculo, y me funcionó.

Kenny Jusseth Garceranth Florez

Como programo un escenario("Fondo") en movimiento?

Pedro Quiñonez Verdugo

Intenta poner una imagen dinámica en formato gif, hay herramientas de diseño que te permiten crear imágenes en movimiento en formato gif

Puedes hacer que se mueva el fondo según el movimiento del personaje para simular que está corriendo o avanzando en una pista según presiones teclas manteniendo la posición del personaje y moviendo los elementos de fondo y los obstáculos hacia el, manteniendo el sujeto principal en posición fija, hay muchos juegos que manejan ese concepto, creo que es a lo que te refieres

Gian

Quiero crear una web tipo pokemon porfa alguien me ayudaria con lo basico yo ya me encargo de todo

Joel Buenrostro

A que te refieres con lo básico?

Si es como juego de gb, es posible con los conocimientos adquiridos hasta el momento, no tengo idea a que te refieres con lo básico

Jhon Gomez

var tablero, direccion;
var fondo = {

imagenURL: "fondo.png",
imagenOK: false,
};
var tifis = {

x: 200,
y: 100,
frenteURL: "diana-frente.png",
frenteOK: false,
velocidad: 20,
atrasURL: "diana-atras.png",
atrasOK: false,
derURL: "diana-der.png",
derOK: false,
izqURL: "diana-izq.png",
izqOk: false

};

var liz = {

lizURL: "liz.png",
lizOK: false,
x: 400,
y: 200,
};

var teclas = {

UP: 38,
DOWN: 40,
LEFT: 37,
RIGTH: 39
};

function inicio(){

var canvas = document.getElementById("campo");
tablero = canvas.getContext("2d");

fondo.imagen = new Image();
fondo.imagen.src = fondo.imagenURL
fondo.imagen.onload = confirmarFondo;

var mover = document.getElementById("mover");
//mover.addEventListener("click",movimiento);

liz.liz = new Image();
liz.liz.src = liz.lizURL;
liz.liz.onload = confirmarLiz;

document.addEventListener("keydown",teclado);

function teclado(datos){

//guardo los codigos de la tecla oprimida
var codigo = datos.keyCode

if(codigo == teclas.UP){

tifis.y -= tifis.velocidad;
}

if(codigo == teclas.DOWN){

tifis.y += tifis.velocidad;
}

if(codigo == teclas.LEFT){

tifis.x -= tifis.velocidad;
}

if(codigo == teclas.RIGTH){

tifis.x += tifis.velocidad;
}

direccion = codigo;
dibujar();
}

function confirmarLiz(){

liz.lizOK = true;
dibujar();
}

/*function movimiento(){
tifis.x +=10;
dibujar();
}*/

function dibujar(){

tablero.drawImage(fondo.imagen,0,0);
}

function confirmarFrente(){

tifis.frenteOK = true;
dibujar()
}

function confirmarAtras(){

tifis.atrasOK = true;
dibujar()
}

function confirmarIzq(){

tifis.izqOK = true;
dibujar()
}

function confirmarDer(){

tifis.derOK = true;
dibujar()
}

function confirmarFondo(){

fondo.imagenOK = true;
dibujar()
}

if(fondo.imagenOK){

//capa 3, dibujar enemigo
if(liz.lizOK){

tablero.drawImage(liz.liz,liz.x,liz.y);
}

var tifiDibujo = tifis.frente;
if(tifis.frenteOK && tifis.atrasOK && tifis.derOK && tifis.izqOK){

if(direccion == teclas.UP){

tifiDibujo = tifis.atras;
}

if(direccion == teclas.DOWN){

tifiDibujo = tifis.frente;
}

if(direccion == teclas.LEFT){

tifiDibujo = tifis.izq;
}

if(direccion == teclas.RIGTH){

tifiDibujo = tifis.der;
}

tablero.drawImage(tifiDibujo,tifis.x,tifis.y);
}

Súper, aunque procura usar escribir y la parte de código primero hacer clic en código, luego pegarlo, presionas enter, sigues escribiendo y si vasa colocar más código hacer clic en código de nuevo, recomendación :)

Ḁ̪̻̫̰̭̌ͅbȇ͎̭͎̾̄̄̊l Vilca Quispe

interesante GaD?

Wilson Bohórquez

interesante

Abraham

Muy interesante! :)

Gracias a todos los que comparten su versión
del código. Ayuda mucho.

Franklin Gil

no me sertifico hasta que pague.

Certifico, y es justo, es muy buen material en mi opinión, ya he visto cursos de udemy, presenciales, y la verdad es lo mejor que hay, por mucho, vale la pena, y de todas formas vale más el conocimiento que el certificado

Hola, adjunto el código con los obstáculos para que Tifis no cruce sobre ellos y que no se salga del juego:
HTML

CSS

hola compañeritos aquí esta mi código que puedo compartir de lo aprendido es que cuando se realiza una variable general y después e invoca en una función da error ejemplo.

oh a mi me paso que no funcionaba si me pueden explicar por que no funciona quedaría agradecido gracias.

var helado;  
function confirmarizq(helado)  
    {  
        andrea.izOK = true;  
        dibujar();  
    }

mi codigo XD
juego1.html

juego.js

Sesión de preguntas y respuestas

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